Table

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

Name	Type	Default	Description
data	array		Defines 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.
autoGenerateColumns			The table will populate based on what is in the data field.
rowCount	integer		Specifies the total number of rows in the table.
loading	bool	false	If true, displays a loading animation.
columnsAddItem			Adds a new column to the table. (See column settings).
rowsPerPage	integer	5	Defines the number of table rows to display per page.
rowsPerPageOptions	array		Defines an array of options for the rows per page selection.
hideFooter	bool	false	If true, hides the footer at the bottom of the table.
hideFooterPagination	bool	false	If true, hides the pagination information in the footer.
hideFooterSelectedRowCount	bool	false	If true, hides the selected row counter in the footer.
checkboxSelection	bool	false	If true, adds a column of checkboxes to the table.
disableSelectionOnClick	bool	false	If true, disables clicking on a column to select it.
disableColumnSelector	bool	false	If 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.

Name	Type	Default	Description
key	string		Specifies a unique key for the column.
name	string		Specifies a unique name for the column.
hide	bool	false	If true, hides the column in the table.
width	integer		Specifies the width of each cell in the column.
transform			Defines a transformation on the column.
addRenderCell	text link container node		Specifies the component to render the cell content.
format	text 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.

Name	Type	Default	Description
showRightCellBorder	bool	false	If true, displays the right-hand border on all cells except those in the last column.
showColumnRightBorder	bool	false
showTableBorder	bool	false	If true, displays the table border.
rowHeight	integer		Defines 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.

The Text component creates a text value for another component.

For further details, see the Text component.

Name	Type	Default	Description
text	string		Specifies 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.

Name	Type	Default	Description
text	string		Defines the text to use as a link.
absolute	bool	false	If true, enables the href and target properties and disables the to property.
to	string		Specifies the document to link to.

Defines the margin and padding around a multiselect item.

For further details, see the Container component.