We use cookies on this site to enhance your user experience
Collapse Sidebar


Show deprecated


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 UITableLayoutUITableLayout result

By changing the UITableLayout/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.




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.