29 lines
1.1 KiB
Markdown
29 lines
1.1 KiB
Markdown
# 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`.
|