Table

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

Adding a new Table component to your page creates a default set of columns. The columns are generated based on the array in the Data field on the Properties pane.

Each object in the array represents a row in a Table, and the properties in the object represent the columns in a Table.

Each object's id property is a primary key, which is required for the column to display in a Table.

The following is an example of an object's appearance in a data array.

{ 
"id": 1,
"lastName": "Snow",
"firstName": "Jon",
"age": 35,
"birthday": "1975-03-12",
"balance": 186 
}

You can modify your columns by editing the array in the Data field. Any changes made will not take effect until you click the "Auto Generate Columns" button, which deletes the old columns and creates your new columns.

If you scroll down in the Properties pane to the Columns section, you can see the list of columns that were autogenerated when you added the Table component to your page.

Each column has its own properties that you can customize by clicking the gear icon to the right of the column name, which opens a Settings panel.

Important Column Properties

• Key - this is a code level name used for the column.
• Name - the column name that displays in the table.
• Format - this allows you to define the type of data in the column.
  • USD - currency symbol
  • URL link - a web link
  • Drop down - a drop down menu

[!NOTE] Example: How to render pictures in a Table Let's create a small example to see how rendering images in a Table works.

1. Drag a Table component onto a Page in your Frontend project.
2. Click the expand arrow on the Data field to open the code panel.
3. Delete all the objects in the array except for two.
4. Modify the objects so they have id, gallery, and photo columns.
5. Add a name for each gallery and a link for each photo.
6. Each object should look something like this: {"id":1,"gallery":"Henry Art","photo":"https://henryart.org/_images/img/_largeImage/230331_henry_art_gallery_175.jpg"}
7. Click "Auto Generate Columns" to delete the old columns and create new ones.
8. Scroll down to the Columns section in the Properties pane, and click the gear icon next to the Photo column name to open the Settings panel.
9. Click the "Add Render Cell" button and choose Container in the drop-down, which creates a container to hold your image within the column.
10. Close the pop-up window and Settings panel.
11. Click the arrow to the left of the table name in the Properties pane, which opens the Components pane.
12. Enter the word "image" in the Search box and drag an Image component onto the Container within the Photo column.
13. The Image component should be selected in the table.
14. In the Properties pane, enter {{item.photo}} in the Source field. You should now see the images in the table.

Under the Container is a Looper component that accesses each object's "photo" key in the array. The render cell option allows each "photo" to display as an image within the column.

Properties

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.

Style Attributes

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.

Text

The Text component creates a text value for another component.

For further details, see the Text component.

Properties

Name	Type	Default	Description
text	string		Specifies a text value for the multiselect item.

Link

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

For further details, see the Link component.

Properties

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.

Container

Defines the margin and padding around a multiselect item.

For further details, see the Container component.