Skip to main content

Table

The Table component displays data in a table format on a page.

Properties

NameTypeDefaultDescription
dataarrayDefines the data for the table in the format column name, column value. The array may use static or dynamic data, must have an id field for each array element, and the id must be lowercase.
autoGenerateColumnsThe table will populate based on what is in the data field.
rowCountintegerSpecifies the total number of rows in the table.
loadingboolfalseIf true, displays a loading animation.
columnsAddItemAdds a new column to the table. (See column settings).
rowsPerPageinteger5Defines the number of table rows to display per page.
rowsPerPageOptionsarrayDefines an array of options for the rows per page selection.
hideFooterboolfalseIf true, hides the footer at the bottom of the table.
hideFooterPaginationboolfalseIf true, hides the pagination information in the footer.
hideFooterSelectedRowCountboolfalseIf true, hides the selected row counter in the footer.
checkboxSelectionboolfalseIf true, adds a column of checkboxes to the table.
disableSelectionOnClickboolfalseIf true, disables clicking on a column to select it.
disableColumnSelectorboolfalseIf true, disables access to the column selector to show or hide columns.

Column Settings Clicking on the gear on the right-hand side of a column brings up the settings panel for the column.

NameTypeDefaultDescription
keystringSpecifies a unique key for the column.
namestringSpecifies a unique name for the column.
hideboolfalseIf true, hides the column in the table.
widthintegerSpecifies the width of each cell in the column.
transformDefines a transformation on the column.
addRenderCelltext
link
container
node
Specifies the component to render the cell content.
formattext
usd
usd(cents)
boolean
date
dateTime
float
integer
percent
url
button
checkbox
datePicker
dropDown
modal
object
radioButton
textInput
string
Defines the data type in the column.

Style Attributes

NameTypeDefaultDescription
showRightCellBorderboolfalseIf true, displays the right-hand border on all cells except those in the last column.
showColumnRightBorderboolfalse
showTableBorderboolfalseIf true, displays the table border.
rowHeightintegerDefines the height of the table rows.

Subcomponents

The Table component has three possible subcomponents Text, Link, or Container used to render the cell data within the table.

Text

The Text component creates a text value for another component.

For further details, see the Text component.

Properties

NameTypeDefaultDescription
textstringSpecifies a text value for the multiselect item.

The Link component provides a link to either a document or a location.

For further details, see the Link component.

Properties

NameTypeDefaultDescription
textstringDefines the text to use as a link.
absoluteboolfalseIf true, enables the href and target properties and disables the to property.
tostringSpecifies the document to link to.

Container

Defines the margin and padding around a multiselect item.

For further details, see the Container component.

on this page
Was this article useful?
89% of our users said this content was useful.