PcoWSkbVqDnWTu_dm2ix
Collapse Sidebar

Padding

UITableLayout

UDim2

Padding will position elements with extra space between them. This can be done using Scale or Offset components of UDim2. Negative values can bring elements closer together. When non-zero, the sibling UI elements may be visible between the cells contained within them. In the image below, you can see the padding of 5 pixels applied between the cells (and the sibling UI elements acting as rows in yellow).

UITableLayout with padding between cells


Code Samples


Build UI Table

This code sample builds a table of 4 rows, the first having headers. It does this using some for-loops and a UITableLayout. The widths of each column are set using UISizeConstraints.

local frame = script.Parent

-- Table data
local headerWidth = {200, 80, 80}
local headers = {
	"Name",     "Job",    "Cash"}
local data = {
	{"Bob",     "Waiter",   100},
	{"Lisa",    "Police",   200},
	{"George",  "-",         50},
}

-- First, build the table layout
local uiTableLayout = Instance.new("UITableLayout")
uiTableLayout.FillDirection = Enum.FillDirection.Vertical
uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
uiTableLayout.FillEmptySpaceColumns = false
uiTableLayout.FillEmptySpaceRows = false
uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
uiTableLayout.Parent = frame

-- Next, create column headers
local headerFrame = Instance.new("Frame", frame)
headerFrame.Name = "Headers"
for i = 1, #headers do
	local headerText = headers[i]
	local headerCell = Instance.new("TextLabel", headerFrame)
	headerCell.Text = headerText
	headerCell.Name = headerText
	headerCell.LayoutOrder = i
	local headerSize = Instance.new("UISizeConstraint")
	headerSize.MinSize = Vector2.new(headerWidth[i], 0)
	headerSize.Parent = headerCell
end

-- Finally, add data rows by iterating over each row and the columns in that row
for row = 1, #data do
	local rowData = data[row]
	local rowFrame = Instance.new("Frame", frame)
	rowFrame.Name = "Row" .. row
	for col = 1, #data[row] do
		local cellData = rowData[col]
		local cell = Instance.new("TextLabel", rowFrame)
		cell.Text = cellData
		cell.Name = headers[col]
		cell.TextXAlignment = Enum.TextXAlignment.Left
		if tonumber(cellData) then -- If this cell is a number, right-align it instead
			cell.TextXAlignment = Enum.TextXAlignment.Right
		end
		cell.ClipsDescendants = true
	end
end