UITableLayout

Show Deprecated

A UITableLayout lays out sibling UI elements as rows in a table. Child UI elements (the table cells) of these rows are then arranged in columns (within rows). Each cell within a row has the same height, and each cell within a column has the same width. The hierarchy in the explorer should look like this (Frames are yellow rows, TextLabels are cells)

Hierarchy of UI elements used with a UITableLayout UITableLayout result

By changing the UIGridStyleLayout.FillDirection, sibling UI elements can act as columns instead.

When applied, a UITableLayout will take control of sibling and cell elements' GuiObject.Size and GuiObject.Position. Changing these in the Properties window is still possible will not produce any effect.

Dimensions of the cells in the resulting table are controlled by the parent UI element's dimensions. Unless UITableLayout.FillEmptySpaceColumns or UITableLayout.FillEmptySpaceRows is enabled, the cell dimensions will be that of the parent UI element (and thus tables with more than one cell extend outside of their parent).

Cells will continue to respect UISizeConstraint objects within them. In other words, setting UISizeConstraint.MinSize on UISizeConstraints within the header cells can determine the size of the rest of the cells. If UISizeConstraint.MaxSize restricts a cell's size from filling the allotted space (i.e. another row/column is wider than it), it will align to the top-left.

Code Samples

Build UI Table

1local frame = script.Parent
2
3-- Table data
4local headerWidth = { 200, 80, 80 }
5local headers = {
6 "Name",
7 "Job",
8 "Cash",
9}
10local data = {
11 { "Bob", "Waiter", 100 },
12 { "Lisa", "Police", 200 },
13 { "George", "-", 50 },
14}
15
16-- First, build the table layout
17local uiTableLayout = Instance.new("UITableLayout")
18uiTableLayout.FillDirection = Enum.FillDirection.Vertical
19uiTableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
20uiTableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
21uiTableLayout.FillEmptySpaceColumns = false
22uiTableLayout.FillEmptySpaceRows = false
23uiTableLayout.Padding = UDim2.new(0, 5, 0, 5)
24uiTableLayout.SortOrder = Enum.SortOrder.LayoutOrder
25frame.Size = UDim2.new(0, 0, 0, 40) -- The Size of the parent frame is the cell size
26uiTableLayout.Parent = frame
27
28-- Next, create column headers
29local headerFrame = Instance.new("Frame")
30headerFrame.Name = "Headers"
31headerFrame.Parent = frame
32for i = 1, #headers do
33 local headerText = headers[i]
34 local headerCell = Instance.new("TextLabel")
35 headerCell.Text = headerText
36 headerCell.Name = headerText
37 headerCell.LayoutOrder = i
38 headerCell.Size = UDim2.new(0, 0, 0, 24)
39 headerCell.Parent = headerFrame
40 local headerSize = Instance.new("UISizeConstraint")
41 headerSize.MinSize = Vector2.new(headerWidth[i], 0)
42 headerSize.Parent = headerCell
43end
44
45-- Finally, add data rows by iterating over each row and the columns in that row
46for index, value in ipairs(data) do
47 local rowData = value
48 local rowFrame = Instance.new("Frame")
49 rowFrame.Name = "Row" .. index
50 rowFrame.Parent = frame
51 for col = 1, #value do
52 local cellData = rowData[col]
53 local cell = Instance.new("TextLabel")
54 cell.Text = cellData
55 cell.Name = headers[col]
56 cell.TextXAlignment = Enum.TextXAlignment.Left
57 if tonumber(cellData) then -- If this cell is a number, right-align it instead
58 cell.TextXAlignment = Enum.TextXAlignment.Right
59 end
60 cell.ClipsDescendants = true
61 cell.Size = UDim2.new(0, 0, 0, 24)
62 cell.Parent = rowFrame
63 end
64end

Summary

Properties

Determines whether cells are sized such that they occupy the horizontal space of the parent UI element.

Determines whether cells are sized such that they occupy the vertical space of the parent UI element.

Determines whether sibling UI elements are treated as rows or columns.

Determines the empty space between cells.

Events

Methods

Properties

FillEmptySpaceColumns

FillEmptySpaceColumns determines whether cells' X size are set such that the entire horizontal space of the parent UI element is used. Enabling this is useful for making sure your table takes up a more easily predictable amount of horizontal space (the X-axis size of the parent UI element). It is still possible that a UISizeConstraint applied to cells will cause underflow/overflow.

When enabling this property, the column widths will be approximately equal to the parent's GuiBase2d.AbsoluteSize.X component divided by the number of columns (not accounting for padding or other factors).

FillEmptySpaceRows

FillEmptySpaceRows determines whether cells' Y size are set such that the entire vertical space of the parent UI element is used. Enabling this is useful for making sure your table takes up a more easily predictable amount of vertical space (the Y-axis size of the parent UI element). It is still possible that a UISizeConstraint applied to cells will cause underflow/overflow.

When enabling this property, the row heights will be approximately equal to the parent's GuiBase2d.AbsoluteSize.Y component divided by the number of rows (not accounting for padding or other factors).

MajorAxis determines whether sibling UI elements are treated as rows or columns. Below, the left uses a TableMajorAxis of RowMajor, and the right uses ColumnMajor.

Row major

Note: it seems that this property isn't making noticeable changes, and rather its behavior is determined by UIGridStyleLayout.FillDirection instead.

Padding

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

Events

Methods