How do I make this kind of table/leaderboard-style GUI?

Help and Feedback Art Design Support
#1

For my game, I need to make a GUI which organises items into rows, with each row having information about the name, stats, price, and an action button. I also need to “load in” data from a script and use it to fill the text and other values in the GUI. The ROBLOX client has a similar GUI element, the leaderboard:
rblx_leaderboard

How do I make a GUI that looks and functions kind of like the leaderboard, except with different kinds of data being loaded and displayed?

1 Like
#2

Firstly create ScreenGui and setup like this:
image

After create Frame in this ScreenGui and setup like this:
image
if you wanna make it in top of right corner make it’s position like {0.813, 0},{0.03, 0}

Then create ScrollingFrame in MainFrame:
image
image

Then create in Container (ScrollingGui) UIListLayout:
image

After create Frame in Container:
image

Then create 2 TextLabels:
First Label:
image
image

Second Label:
image
image

Then clone this Frame and name it Template.
Create server script in ServerScriptService and paste Template into this script. Then paste in script this code:

local createLeaderstats = true

game.Players.PlayerAdded:Connect(function(Player)
	spawn(function()
		if createLeaderstats == true then
			local leaderstats = Instance.new("Folder", Player)
			leaderstats.Name = "leaderstats"
			
			local value = Instance.new("NumberValue", leaderstats)
			value.Name = "Coins"
			value.Value = 0
		end
		
		local function CreateTemplate(plr:Player)
			spawn(function()
				repeat wait() until Player:FindFirstChild("leaderstats")

				local leaderstats = Player:FindFirstChild("leaderstats")
				local value = leaderstats:FindFirstChild("Coins")

				local Template = script.Template:Clone()
				Template.Parent = plr.PlayerGui:WaitForChild("ScreenGui"):WaitForChild("MainFrame"):WaitForChild("Container")
				Template.Name = Player.Name.."_Template"
				Template.NameLabel.Text = Player.Name
				Template.ValueLabel.Text = value.Value

				value.Changed:Connect(function()
					Template.ValueLabel.Text = value.Value
				end)
			end)
		end
		
		for _, plr:Player in pairs(game.Players:GetPlayers()) do
			CreateTemplate(plr, Player)
		end
	end)
end)

game.Players.PlayerRemoving:Connect(function(Player)
	for _, plr:Player in pairs(game.Players:GetPlayers()) do
		if plr.PlayerGui:WaitForChild("ScreenGui"):WaitForChild("MainFrame"):WaitForChild("Container"):FindFirstChild(Player.Name) then
			plr.PlayerGui.ScreenGui.MainFrame.Container:FindFirstChild(Player.Name):Destroy()
		end
	end
end)

It’s must look like this:
image

I think that’s it. If you have any questions, ask me

2 Likes