tp-table

Displays a list of items in a interactive table.

Defining columns

The columns property is an array of objects that define the columns of the table.

Each column object has the following properties:

• label: The label of the column.
• name: The name of the column. This is the property name within the item object that is currently being displayed.
• width: The width of the column in pixels. Should be a string like 100px.
• required: Whether the column is required. Required columns are always visible.
• visible: Whether the column is visible by default.
• sortable: Whether the column is sortable.

Custom table elements

To override the default table column headers you can override the renderColumnHeader(column, idx) method.

To override only the selection header, provide a selectionHeaderRenderer function property. Return null or undefined to use the default select-all checkbox.

To override the default cell elements you can override the renderItem(item, idx, columns, selected) method.

Styling

• --tp-table-checkbox-column-width: Width of the checkbox selection column. Defaults to 40px.