Table
Virtualized data grid with declarative columns, sorting, selection, pinning and resizing.
c2-table
A data grid: a scrolling, virtualized table built from a rows array (or an async dataSource) and a set of
c2-table-column definitions given as light-DOM children. Sorting, row selection, column pinning, column resizing
and keyboard navigation are built in; every cell can be rendered by a function, so a cell body can be any markup —
including other c2 components.
Rows and columns are readable from markup as JSON attributes as well as from script as properties, so a table can be authored without a build step:
<c2-table row-key="id" selection="multiple" checkbox-selection sortable stripe style="height: 320px">
<c2-table-column field="name" header="Name" width="2fr" pinned="start"></c2-table-column>
<c2-table-column field="score" header="Score" width="120px" align="end" format="number"></c2-table-column>
</c2-table>
Layout. The table is one CSS grid: the header row and every body row are grid items using grid-template-columns: subgrid, so columns stay aligned without any scroll syncing, and pinned columns are position: sticky cells rather
than separate containers. Give the host a height (or --c2-table--max-height) — the body scrolls inside it.
Styling one column. Every cell carries two parts named after its column — cell-<field> on the cell box and
cell-content-<field> on the text inside it — so a single column can be given its own colour, alignment or pill
shape from outside: ::part(cell-content-status) { border-radius: 999px; background: #f4f4f5 }. Rows are
::part(row) and ::part(row-selected).
Styling renderer output. What renderCell (or renderGroup) returns is placed in the table's own shadow root,
so a page stylesheet cannot select it — but a part it carries is exposed as-is: return
html`<span part="badge badge-${row.status}">…</span>` (or a node with that attribute) and style it with
c2-table::part(badge). A part cannot be combined with an attribute or class selector, so encode the variant in the
part name itself. Content slotted through a cell-slot column stays in the light DOM and takes page styles directly.
Styling one row. ::part(row) cannot be conditioned on row data (::part() takes no attribute selector), so
rowPart adds part names of your own to a row from its data: table.rowPart = ({ row }) => row.failed ? 'row-failed' : undefined makes c2-table::part(row-failed) { background: #fef2f2 } work. rowStyle sets inline
styles from the same context instead.
Virtualization windows the rows to the visible range plus an overscan margin. It needs a uniform row height, which
it measures from the first rendered row, so theme the height with --c2-table__row--height (row-height is only the
estimate used for the first paint). It turns on automatically past virtual-threshold rows; virtual="always" and
virtual="never" force it. range-change reports the rows in the window and renderedRange holds the last one.
Wrapping cells. Cells clip their text to one line by default, which is what a windowed grid of uniform rows needs.
wrap lets body cells grow instead: text wraps, rows take the height of their tallest cell (at least
--c2-table__row--height), cell content is top-aligned with --c2-table__cell__wrap--padding and no longer
clipped. Variable row heights cannot be windowed, so wrap turns virtualization off whatever virtual says and
every row is rendered — keep it for tables of a few hundred rows, or page them with page-size.
Realtime updates. Add animate-updates when replacing rows with successive snapshots. Matching rows are found
by row-key (or index), and their finite numeric fields are interpolated over update-duration. With a stable key,
added rows expand in and deleted rows collapse out. Nested numbers in arrays and objects animate too, so a custom
renderCell such as a sparkline receives the same transient row as the formatted cells around it. Add
highlight-updates to pulse row backgrounds, and optionally choose its numeric direction with
update-highlight-field. Only rendered rows are interpolated, and reduced-motion preferences are respected.
Row keys. Selection, value and events name a row by its key: the row-key field of the row (or
getRowKey(row)) as a string, so { id: 7 } is "7". Without a row-key the key is the row's position, which
points at another row after a sort, so set one on any selectable table. keyOf(row), isSelected(row),
selectRows(rows) and deselectRows(rows) work from the rows themselves when the key rule is beside the point.
Summary row. Give a column summary="sum" (or avg, min, max, count, or a function of the rows) and the
table adds a totals row below the body. It is a row of the same grid, so every value sits under its own column
whatever the order, width or pinning, is formatted with the column's format, and stays in view while the body
scrolls. Values are keyed by the column's id, which defaults to its field; summary-label puts text such as
Total in a column with no value and summary-span stretches it across the columns after it. Aggregates cover
every row (summary-scope="page" limits them to the page on show). A dataSource only holds the rows it has
fetched, so give it the server's totals through summaryValues instead, which also overrides any computed value:
<c2-table summary-values='{"amount": 128450.5}'>
<c2-table-column field="name" summary-label="Total"></c2-table-column>
<c2-table-column field="amount" format="currency" align="end"></c2-table-column>
<c2-table-column field="qty" align="end" summary="sum"></c2-table-column>
</c2-table>
Grouping. group-by="region,status" gathers the rows into collapsible groups, outermost level first; the grid
becomes a treegrid. With the default group-display="row" each group is a row of the grid: its label and row
count in the first column (or the one marked group-column), and under every column with a summary that
aggregate over the group's rows, formatted like the column. group-display="band" draws one full-width band per
group instead. A group is named by its path, region=EMEA/status=Paid: expanded-groups lists the open ones
(every group is open until then, or closed with groups-collapsed), group-toggle reports a click, and a group's
checkbox selects its rows. The groups of the rows at the top stay under the header while their rows scroll, and
a page that starts inside a group repeats its headers; pages count display lines, so a closed group takes one.
Grouping is done on the client and does not apply to a dataSource.
<c2-table row-key="id" group-by="region" selection="multiple" checkbox-selection>
<c2-table-column field="customer" header="Customer"></c2-table-column>
<c2-table-column field="region" hidden></c2-table-column>
<c2-table-column field="amount" format="currency" align="end" summary="sum"></c2-table-column>
</c2-table>
Wrapped in a c2-context-menu, a right-clicked or long-pressed body cell answers the menu's request with the same
detail as cell-click (row, rowIndex, key, column, value), which the menu passes on as context.data
with this table as context.source, so renderContextMenu can build the rows for that cell. The cell also takes
the keyboard focus.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | null | null | The host's aria-label, observed so the grid inside the shadow root is named after it: the host is not the
grid, so a name set on it would otherwise name nothing. |
aria-labelledby | string | null | null | The host's aria-labelledby. ARIA cannot resolve a light-DOM id from inside the shadow root, so the referenced
elements' text is copied onto the grid instead, and aria-labelledby wins over aria-label as ARIA ranks them. |
rows | TableRow[] | [] | The rows to display. An array in the property, JSON in the attribute. |
columns | TableColumnConfig[] | undefined | — | Column definitions, as an alternative to c2-table-column children. Children win when both are present. |
row-key | string | — | Field holding the identity of a row — its key — used for selection, DOM reuse, animated updates and cell slots;
may be a dotted path. A key is always a string: { id: 7 } has the key "7". Without one (or where the field is
empty) a row's key is its position in the sorted dataset, which moves when the rows are sorted or replaced — so
a selection would move with it. Set it whenever rows can be selected. |
selection | TableSelectionMode | none | single selects one row at a time, multiple supports ⌘/ctrl-click and shift-click ranges. A click selects the
row alone; clicking the row that is already the whole selection clears it, and ⌘/ctrl-click or Space toggles one row. |
checkbox-selection | boolean | false | Adds a leading checkbox column, pinned to the start. |
value | string[] | [] | Keys of the selected rows (see row-key): an array in the property, ;-separated in the attribute. Entries are
stored as strings, so [1, 2] selects the rows whose key field holds 1 and 2. To select by row rather than
by key, use selectRows(). |
sort | SortModel[] | [] | The sort, in priority order: SortModel[] in the property, field:asc;other:desc in the sort attribute. |
multi-sort | boolean | false | Lets shift-click add a column to the sort instead of replacing it. |
sortable | boolean | false | Makes every column sortable; a column's own sortable still wins. |
resizable | boolean | true | Columns are resizable by default; resizable="false" turns it off. A column's own resizable still wins. |
stripe | boolean | false | Tints odd rows with --c2-table__row__odd--background. |
animate-updates | boolean | false | Smoothly interpolates changed finite numbers when rows is replaced. Rows are matched by row-key, or by index. |
update-duration | number | 400 | Duration of an animated rows update in milliseconds. |
highlight-updates | boolean | false | Pulses changed row backgrounds: green for additions/increases, red for removals/decreases, blue otherwise. |
update-highlight-field | string | — | Numeric field that determines whether a modified row highlights as increased or decreased. Defaults to its first changed number. |
virtual | TableVirtualMode | auto | auto virtualizes past virtual-threshold rows; always and never force it. wrap overrides it with never. |
wrap | boolean | false | Wraps body cell text onto several lines: rows grow to their content (at least --c2-table__row--height) and cells
are top-aligned and no longer clipped. Rows of different heights cannot be windowed, so this turns virtualization
off — every row is rendered, whatever virtual says. |
row-height | number | 36 | Row height in pixels used before the first row has been measured. |
overscan | number | 6 | Rows rendered above and below the viewport while virtualizing. |
virtual-threshold | number | 100 | Row count past which virtual="auto" starts windowing. |
block-size | number | 100 | Number of rows the table asks a dataSource for at a time. |
loading | boolean | false | Shows the loading state; implied while a dataSource resolves its first block. |
error | string | — | Shows the error state with this message. |
empty-message | string | No rows | Message shown when there are no rows. |
page | number | 1 | The page on show, 1-based. Only meaningful while the table is paginated; clamped to pageCount. |
page-size | number | 0 | Rows per page. 0 leaves paging off; a c2-pagination slotted into the footer sets it from its own
page-size when the table has none, which is what makes the nested form work with no configuration.
With rows the page is sliced in place; with a dataSource each page is one request. |
summary-values | Record<string, unknown> | undefined | — | Values of the summary row keyed by column id (its field unless set), such as totals computed by a server.
An entry wins over the column's summary aggregate. An object in the property, JSON in the attribute. |
summary-scope | TableSummaryScope | all | Rows the summary aggregates cover: all rows, or only the page on show. A dataSource is only aggregated per page. |
group-by | (string | TableGroupBy)[] | [] | Groups the rows by these fields, outermost first: group-by="region,status" in the attribute, and field names or
TableGroupBy objects in the property. Not applied to a dataSource, which only holds the rows it fetched. |
group-display | TableGroupDisplay | row | row gives each group a row of the grid with its column aggregates; band draws a full-width band per group. |
expanded-groups | string[] | undefined | — | Keys of the open groups (region=EMEA/status=Paid). While unset, every group follows groups-collapsed; the
first toggle writes the full list here, so it can be read, stored and handed back. ;-separated in the attribute. |
groups-collapsed | boolean | false | Starts every group closed while expandedGroups is unset. |
empty-group-label | string | No value | Label of the group of rows whose value is empty. |
Slots
| Name | Description |
|---|---|
default | The column definitions: c2-table-column elements. They render nothing themselves. |
toolbar | Bar above the header, for a title, filters or a column menu. Hidden when empty. |
footer | Bar below the rows, for a row count or a c2-pagination. Hidden when empty. |
empty | Replaces the built-in "no rows" message. |
loading | Replaces the built-in spinner shown while the first rows load. |
error | Replaces the built-in message shown when error is set. |
fallback | Meaningful server-rendered table content. It remains visible before custom-element upgrade and is retained in the light DOM but hidden after the interactive grid mounts, avoiding duplicate client content. |
group:{groupKey} | Label of one group, e.g. slot="group:region=EMEA", in place of its formatted value and row count. The copy of the group kept under the header while its rows scroll shows the built-in label. |
cell:{line}:{field} | Body of one cell of a column marked cell-slot, e.g. slot="cell:0:change" for the first displayed row. line is the cell's display line, counted across the whole dataset after sort, filter and grouping with the page offset included — the numbering of range-change. Lets a framework render a cell with its own template language instead of a renderCell function; the column's renderCell or formatted value stays as the fallback. Children are needed only for the lines range-change reports (map detail.rows, or renderedRange.rows, each { line, key, row }); a child whose line is outside the rendered window is left unassigned. After a sort, filter or page change the same line holds a different row, so re-render the children from the next range-change. |
Events
| Name | Type | Description |
|---|---|---|
page-change | CustomEvent<TablePageChangeEventDetail> | Fired after the shown page changes, while paginated. detail.start and detail.count are the slice of the whole dataset now shown — with a dataSource, the getRows request that follows. A pager slotted in the footer does not fire its own: the table speaks for it. |
range-change | CustomEvent<TableRangeChangeEventDetail> | Fired after the rendered body rows change — the window scrolled, or the rows, sort, page or grouping changed. detail.start/detail.end are the display lines rendered (end exclusive), detail.rows one { line, key, row } entry per rendered data row in display order (group rows and rows a dataSource has not delivered are left out) and detail.keys their keys. Those lines are the only ones whose cell:{line}:{field} slots exist. Fires again when the same keys move to other lines. Does not bubble. |
group-toggle | CustomEvent<TableGroupToggleEventDetail> | Fired after the user opens or closes a group, with its key, whether it is now expanded, and the group itself (its rows and aggregates). expandedGroups already holds the new state. Does not bubble. |
sort-change | CustomEvent<TableSortChangeEventDetail> | Fired after the user clicks a sortable header. detail.sort is the new sort model, in priority order. |
row-click | CustomEvent<TableRowEventDetail> | Fired when a row is clicked, before the selection is applied. |
row-activate | CustomEvent<TableRowEventDetail> | Fired when the user opens a row: a pointer click on it, or Enter on one of its focused cells — so one listener serves a table used for navigation from the mouse and the keyboard alike. Not fired by a click or Enter that belongs to a control inside a cell (a button, link or input), and fired before the selection is applied. Does not bubble: a table nested in another table's cell would otherwise open the outer row too, so the listener belongs on the element itself. |
cell-click | CustomEvent<TableCellEventDetail> | Fired when a cell is clicked; adds detail.column and detail.value. |
selection-change | CustomEvent<TableSelectionChangeEventDetail> | Fired after the user changes the selection. detail.value is the array of selected row keys, detail.rows the matching rows. Does not bubble: several components fire selection-change, so a listener belongs on the element itself rather than on an ancestor. |
column-resize | CustomEvent<TableColumnResizeEventDetail> | Fired when the user releases a column's resize handle. |
CSS parts
Shadow DOM styling hooks used with ::part(name). Prefer CSS custom properties when they cover the change.
| Name | Description |
|---|---|
toolbar | Row above the grid containing the toolbar slot. |
viewport | Scrollable container around the grid. |
grid | The ARIA grid containing the header and body rows. |
footer | Row below the grid containing the footer slot. |
state | Shared cell containing the empty, loading, or error slot and its fallback state. |
header-row | The grid header row. |
header-cell | Every column header cell. |
selection-header-cell | The header cell containing the select-all checkbox. |
resizer | The pointer target used to resize a column. |
sort-icon | The sort-direction indicator in a sortable header. |
cell | Every body grid cell. |
selection-cell | A body cell containing a row-selection checkbox. |
skeleton | Placeholder displayed while a remote row is loading. |
cell-content | The content wrapper inside a body cell. |
row | Every rendered body row. Also carries the names rowPart returns for it, such as row-failed. |
row-selected | A body row while it is selected; exposed in addition to row. |
summary-row | The totals row kept at the bottom of the grid. |
summary-cell | Every cell of the summary row. Each also carries summary-cell-<id>, named after its column. |
summary-content | The content wrapper inside a summary cell; also summary-content-<id>. |
group-row | Every group row. Also group-row-level-<n> (0 for the outermost level), group-band with group-display="band", and group-row-echo on a copy kept under the header. |
group-cell | Every cell of a group row. Each also carries group-cell-<id>, named after its column. |
group-toggle | The chevron of a group row. |
group-label | The group's value, or what renderGroup returned. |
group-count | The number of rows in the group. |
CSS custom properties
Grouped by semantic target and state from --c2-<component>__<target>__<state>--<property>. Click a group to collapse it; click a name to copy it.
| Name | Type | Default | Description |
|---|---|---|---|
--c2-table--background | color | #ffffff | |
--c2-table--color | color | #18181b | |
--c2-table--font-size | font-size | 14px | |
--c2-table--max-height | pixel | none | Caps the height when the host is not sized itself; the body scrolls. |
--c2-table--border-top | border | 1px solid #e4e4e7 | |
--c2-table--border-right | border | 1px solid #e4e4e7 | |
--c2-table--border-bottom | border | 1px solid #e4e4e7 | |
--c2-table--border-left | border | 1px solid #e4e4e7 | |
--c2-table--border-top-left-radius | border-radius | 8px | |
--c2-table--border-top-right-radius | border-radius | 8px | |
--c2-table--border-bottom-left-radius | border-radius | 8px | |
--c2-table--border-bottom-right-radius | border-radius | 8px | |
--c2-table--box-shadow | box-shadow | none | |
--c2-table__header--background | color | #fafafa | |
--c2-table__header--color | color | #71717a | |
--c2-table__header--height | pixel | 36px | |
--c2-table__header--font-size | font-size | 12px | |
--c2-table__header--font-weight | font-weight | 600 | |
--c2-table__header--letter-spacing | letter-spacing | 0.02em | |
--c2-table__header--border-bottom | border | 1px solid #e4e4e7 | |
--c2-table__header-cell--padding | padding | 0 12px | |
--c2-table__header-cell--gap | pixel | 6px | |
--c2-table__header-cell__hover--background | color | #f4f4f5 | |
--c2-table__header-cell__sorted--color | color | #18181b | |
--c2-table__sort-icon--width | pixel | 14px | |
--c2-table__sort-icon--height | pixel | 14px | |
--c2-table__sort-icon--color | color | #a1a1aa | |
--c2-table__sort-icon__active--color | color | rgb(2, 101, 220) | |
--c2-table__resizer--width | pixel | 9px | Width of the grab area, not of the visible line. |
--c2-table__resizer--height | pixel | 56% | Height of the resting divider, as a share of the header. |
--c2-table__resizer--line-width | pixel | 1px | |
--c2-table__resizer--color | color | #e4e4e7 | The divider drawn at a resizable column's edge. |
--c2-table__resizer__hover--height | pixel | 100% | |
--c2-table__resizer__hover--line-width | pixel | 2px | |
--c2-table__resizer__hover--color | color | rgb(2, 101, 220) | |
--c2-table__row--height | pixel | 36px | Row height; virtualization measures it, so keep it uniform. |
--c2-table__row--border-bottom | border | 1px solid #e4e4e7 | |
--c2-table__row__hover--background | color | #f4f4f5 | |
--c2-table__row__odd--background | color | #fafafa | Applies with the stripe attribute. |
--c2-table__row__selected--background | color | #edf1fe | |
--c2-table__row__selected--color | color | #18181b | |
--c2-table__row__selected__hover--background | color | #e2e9fd | A selected row under the pointer. |
--c2-table__row__added--background | color | rgba(22,163,74,0.16) | Highlight used while a realtime row expands into the table. |
--c2-table__row__removed--background | color | rgba(220,38,38,0.14) | Highlight used while a realtime row collapses out of the table. |
--c2-table__row__increased--background | color | rgba(22,163,74,0.14) | Pulse used when the watched numeric value increases. |
--c2-table__row__decreased--background | color | rgba(220,38,38,0.12) | Pulse used when the watched numeric value decreases. |
--c2-table__row__modified--background | color | rgba(2,101,220,0.1) | Pulse used when a change has no numeric direction. |
--c2-table__cell--padding | padding | 0 12px | |
--c2-table__cell--gap | pixel | 8px | |
--c2-table__cell--font-size | font-size | 14px | |
--c2-table__cell--color | color | #18181b | |
--c2-table__cell--border-right | border | none | Vertical grid lines; applies to header cells too. |
--c2-table__cell__wrap--padding | padding | 8px 12px | Body cell padding with wrap, where content is top-aligned. |
--c2-table__cell__focus--outline | outline | 2px solid rgba(2, 101, 220, 0.4) | |
--c2-table__cell__focus--outline-offset | pixel | -2px | |
--c2-table__pinned-start--box-shadow | box-shadow | 1px 0 0 0 #e4e4e7 | Separator on the last column pinned to the start. |
--c2-table__pinned-end--box-shadow | box-shadow | -1px 0 0 0 #e4e4e7 | Separator on the first column pinned to the end. |
--c2-table__summary--height | pixel | 36px | |
--c2-table__summary--background | color | #fafafa | |
--c2-table__summary--color | color | #18181b | |
--c2-table__summary--font-size | font-size | 14px | |
--c2-table__summary--font-weight | font-weight | 600 | |
--c2-table__summary--box-shadow | box-shadow | 0 -1px 0 0 #e4e4e7 | Separator above the summary row; a shadow rather than a border so it lands on the last row's own border instead of doubling it. |
--c2-table__group-row--background | color | #fafafa | |
--c2-table__group-row--color | color | #18181b | |
--c2-table__group-row--font-weight | font-weight | 600 | |
--c2-table__group-row__hover--background | color | #f4f4f5 | |
--c2-table__group-row__echo--box-shadow | box-shadow | 0 1px 0 0 #e4e4e7 | Separator under a group row kept under the header. |
--c2-table__group-band--background | color | #f4f4f5 | Background of a group with group-display="band". |
--c2-table__group--indent | pixel | 24px | Indentation per group level; the default lines rows up with their group's label. |
--c2-table__group-toggle--size | pixel | 16px | |
--c2-table__group-toggle--color | color | #71717a | |
--c2-table__group-toggle--transition-duration | time | 150ms | Chevron turn when a group opens or closes; respects reduced motion. |
--c2-table__group-count--background | color | #f4f4f5 | |
--c2-table__group-count--color | color | #52525b | |
--c2-table__group-count--font-size | font-size | 12px | |
--c2-table__group-count--font-weight | font-weight | 600 | |
--c2-table__group-count--padding | padding | 1px 7px | |
--c2-table__group-count--border-radius | border-radius | 999px | |
--c2-table__selection-cell--width | pixel | 44px | Width of the checkbox-selection column. |
--c2-table__skeleton--background | color | #f4f4f5 | Placeholder shown in cells whose dataSource block is still loading. |
--c2-table__skeleton--border-radius | border-radius | 4px | |
--c2-table__state--color | color | #71717a | Colour of the empty and loading messages. |
--c2-table__state--padding | padding | 32px 12px | |
--c2-table__state--font-size | font-size | 14px | |
--c2-table__state__error--color | color | rgb(211, 21, 16) | |
--c2-table__toolbar--background | color | transparent | |
--c2-table__toolbar--padding | padding | 8px 12px | |
--c2-table__toolbar--border-bottom | border | 1px solid #e4e4e7 | |
--c2-table__footer--background | color | transparent | |
--c2-table__footer--padding | padding | 8px 12px | |
--c2-table__footer--border-top | border | 1px solid #e4e4e7 | |
c2-table-column
One column of a c2-table, declared as a light-DOM child. The element renders nothing: it is a definition the
table reads, the same way c2-select reads its c2-list-item children. Everything it exposes as an attribute can
also be set as a property, and the function-valued properties (renderCell, renderHeader, comparator) are
property-only.
<c2-table rows='[{ "name": "Ada", "score": 12 }]'>
<c2-table-column field="name" header="Name" width="2fr" sortable pinned="start"></c2-table-column>
<c2-table-column field="score" header="Score" width="120px" align="end" format="number" sortable></c2-table-column>
</c2-table>
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
column-id | string | — | Stable identity of the column; defaults to field. Set it when two columns show the same field, or for a
computed column with no field. Widths, pinning, the cell-<id> parts and the summary row are keyed by it. Not the
HTML id, which has to be unique in the whole document rather than in one table. |
field | string | — | Key of the value in the row object; may be a dotted path such as user.name. |
header | string | undefined | — | Header label. Falls back to the field name. |
width | string | 1fr | Grid track for the column: 1fr, 160px, minmax(120px, 1fr)… |
min-width | number | 64 | Lower bound in pixels: the floor of a flexible (fr) track on a narrow table, and while the column is resized. |
align | ColumnAlign | start | Horizontal alignment of the header and the cells. |
sortable | boolean | undefined | — | Lets the user sort by this column. Absent inherits the table's sortable; sortable="false" opts out. |
resizable | boolean | undefined | — | Lets the user drag the column's trailing edge. Absent inherits the table's resizable; resizable="false" opts out. |
pinned | ColumnPin | undefined | — | Freezes the column against the leading or trailing edge while scrolling horizontally. |
hidden | boolean | false | Leaves the column out of the table without removing the definition. |
format | ColumnFormat | text | Built-in Intl formatting applied when no renderCell is set. |
format-options | Record<string, unknown> | undefined | — | Options handed to the Intl formatter of format, as JSON in the attribute. |
currency | string | undefined | — | Currency code used by format="currency". |
locale | string | undefined | — | BCP 47 locale used by format. Defaults to the browser locale. |
cell-class | string | undefined | — | Class set on every cell of this column, so light-DOM CSS can target it through ::part(cell). |
cell-slot | boolean | false | Renders each cell from a light-DOM child of the table rather than from renderCell: the cell holds a
<slot name="cell:<line>:<field>">, line being the row's display line, so a framework can build the body with
its own template language. Render children only for the lines the table's range-change reports (detail.rows);
after a sort, filter or page change the same line holds another row, so re-render from the next range-change. |
summary | TableSummaryAggregate | TableSummaryFunction | undefined | — | Value of the column in the table's summary row: sum, avg, min, max or count, or a function of the rows (property only). |
summary-label | string | undefined | — | Text shown in the column's summary cell when it has no value, such as Total. |
summary-align | ColumnAlign | undefined | — | Alignment of the summary cell. Defaults to align. |
summary-span | number | undefined | — | Number of columns the summary cell spans, starting at this one; the spanned columns' summaries are not shown. |
group-column | boolean | false | Puts the group tree (chevron, group label and count, indentation) in this column while the table is grouped. Defaults to the first column. |