Table
The <pines-table> component renders data in a tabular layout. It supports two modes: a data-driven mode where rows are generated automatically from a list of objects and a column configuration, and a child-content mode where <pines-table-header>, <pines-table-row>, and <pines-table-cell> sub-components are composed manually. Use data-driven mode for displaying model collections; use child-content mode when table structure or cell content requires custom markup.
pines-table Properties (Data-Driven Mode)
| Attribute | Type | Default | Description |
table-id
|
string?
|
N/A | Optional unique identifier applied to the rendered table element. Use when you need to reference the table from JavaScript or CSS, or when multiple tables are present on the same page. |
column-config
|
List<(string Name, string DisplayName)>
|
new List<>()
|
Defines the columns to render in data-driven mode. Each entry maps a property name on the data objects to a human-readable column header. The order of entries determines column order. |
data
|
List<object>
|
new List<>()
|
The collection of row data objects to render. Each object's properties are matched against column-config entries to populate cells. Used only in data-driven mode. |
display-action-col
|
bool
|
false
|
When true, an additional "Actions" column is appended to the table. Use this when rows need inline action buttons — the column content is rendered via a slot or child fragment. |
pines-table (Child-Content Mode)
When column-config and data are not provided, UsesChildContent becomes true and the table renders child components directly.
pines-table-header Properties
| Attribute | Type | Description |
class
|
string?
|
Additional CSS classes applied to the header row. Use to customize header appearance, such as background color or text weight, beyond the component's defaults. |
pines-table-row Properties
| Attribute | Type | Description |
class
|
string?
|
Additional CSS classes applied to the row element. Use for conditional row highlighting — for example, applying a warning background to rows that represent overdue items. |
pines-table-cell Properties
| Attribute | Type | Default | Description |
class
|
string?
|
N/A | Additional CSS classes applied to the cell element. Use to control text alignment, padding, or custom styling for individual cells. |
is-header
|
bool
|
false | When true, the cell is rendered as a th element instead of td. Use this within pines-table-header in child-content mode to mark cells as column headers. |