HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Data TableView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA table drawn from an array of rows, with sorting, filtering, and paging.StableSince 0.1.0DataUsageimport'@fusion.dev/helix/data-table'import'@fusion.dev/helix/table'// Tableimport'@fusion.dev/helix-headless/data-table'import'@fusion.dev/helix-headless/table'// TablePreview
API ReferenceRoothelix-data-tableA table drawn from an array of rows, with sorting, filtering, and paging.
PropTypeDescriptionascendingLabelstringDefault"ascending"The word for an ascending sort, in a sorted-label that writes {order}.canceledLabelstringDefault"Canceled"What screen readers hear when a held row is put back, or a move is
refused, with reorderable-rows.childFieldstringThe field that holds a row's child rows, as an array. Set it, and row-key,
and the grid becomes a tree grid.columnsstringDefault""The column tracks, as a grid track list such as 2fr 1fr max-content,
dealt out one track to a column in the order the columns are written. A
column's own width wins in its place, and a column it does not reach
takes the track a column with no width takes.defaultExpandedstringDefault""The keys of the rows open at the start, separated by commas. Used until
expanded is set.defaultFilterstringDefault""The starting search query, used until filter is set.defaultOrderstringDefault""The starting column order, used until order is set.defaultPagenumberDefault1The starting page, used until page is set.defaultPageSizenumberDefault0The starting page size, used until pageSize is set.defaultSelectedstringDefault""The keys selected at the start, separated by commas. Used until selected
is set.defaultSortstringDefault""The starting sort order, used until sort is set.descendingLabelstringDefault"descending"The word for a descending sort, in a sorted-label that writes {order}.droppedLabelstringDefault"Dropped"What screen readers hear when a row is dropped, with reorderable-rows.emptyTextstringDefault"Nothing to show"The text shown and announced when there are no rows and none are loading.errorTextstringDefault""The text shown and announced when the rows could not load, such as "The
files did not load". Set it when a fetch fails, and clear it once you try
again. Empty, the default, shows nothing.estimatenumberDefault32The estimated height of a row before it is drawn, in pixels.expandedstringThe keys of the open rows in a tree grid, separated by commas, the shape of
selected. A reader's press writes it and then sends helix-expand.filterstringThe search query. A row is shown when the query matches any of its columns.gapLabelstringDefault"Skip to page {page}"The built-in pagination's name for a gap in its run of pages. {page} is
replaced with the page it jumps to.labelstringDefault""The grid's name, read by screen readers.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.loadMorebooleanDefaultfalseDraws a row after the last one with a button that asks for more rows.loadMoreLabelstringDefault"Load more"The words on the button in the more row.localestringDefault""The locale the words, plural forms, and numbers are in, as a BCP 47 tag
such as pl. Empty reads the nearest lang, then the browser's
language. The built-in pagination speaks it too.mode"client"|"server"Default"client"Where filtering, sorting, and paging happen. client does them in the
table, and server leaves them to your code.movedLabelstringDefault"{name} moved to position {position} of {count}"What screen readers hear each time a key moves a held row, with
reorderable-rows. {name} is the row's name, {position} the place it
would go, counting from 1, and {count} the number of rows on the page.moveRowLabelstringDefault"Move {row}"The name of a row's grip, with reorderable-rows. {row} is replaced with
the row's name.nextLabelstringDefault"Next page"The built-in pagination's name for the button that moves forward a page.orderstringThe column order, as field names separated by spaces.pagenumberThe page shown, counting from 1.pageLabelstringDefault"Page {page}"The built-in pagination's name for one page. {page} and {pages} are
replaced with the page number and the page count.pageSizenumberThe number of rows on a page. 0 shows every row, with no paging.paginatedbooleanShows a pagination under the grid.paginationLabelstringDefault"Pagination"The name of the built-in pagination's navigation landmark.pickedUpLabelstringDefault"Picked up {name}"What screen readers hear when a key or a click picks up a row, with
reorderable-rows. {name} is the row's name.previousLabelstringDefault"Previous page"The built-in pagination's name for the button that moves back a page.reorderablebooleanDefaultfalseLets users reorder the columns.reorderableRowsbooleanDefaultfalseLets people move rows, by a grip that leads each row. The table moves no
row itself: set rows to the order helix-reorder carries.resultLabelstringWhat screen readers hear when a search leaves one row, where
results-label should not say it. {count} is the count.resultsLabelstringDefault"{count, plural, one {# result} other {# results}}"What screen readers hear when a search narrows the rows. {count} is how
many rows are left, written in the locale, and each language writes the
forms it has: {count, plural, one {# wiersz} few {# wiersze} many {# wierszy} other {# wiersza}}.rowGripsLabelstringDefault"Move rows"The name of the heading over the row grips, with reorderable-rows.rowKeystringDefault""The field that identifies each row.rowsreadonlyDataRow[]Default[]Every row of the result, in the order it arrived.selectablebooleanDefaultfalseAdds a column of checkboxes for selecting rows.selectAllLabelstringDefault"Select every row"The name of the checkbox in the heading that selects every row.selectedstringThe keys of the selected rows, separated by commas.selectedLabelstringDefault"{count} selected"What screen readers hear when the chosen rows change. {count} is how many
rows are chosen, written in the locale, and a language that needs plural
forms writes them: {count, plural, one {# wybrany} few {# wybrane} many {# wybranych} other {# wybranego}}.selectionBehavior"replace"|"toggle"Default"toggle"What a key or a press on a row does to the rows already selected, in a
selectable table. toggle, the default, keeps them: Space adds or takes
out the row. replace selects the row alone, as a file list does: Down and
Up carry the selection with them, and a press on a row selects it. Control
or Command with a press or Space adds or takes out one row, and with a move
goes without selecting. The checkboxes add or take out one row either way.selectRowLabelstringDefault"Select {row}"The name of a row's checkbox. {row} is replaced with the row's value in
the first column that has a field, or with its key.sortstringThe sort order, as field:direction.sortedLabelstringDefault"{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}"What screen readers hear when the table is sorted. {column} is the
column's heading and {direction} is ascending or descending, so each
order has its whole sentence. {order} is the deprecated
ascending-label or descending-label.totalnumberDefault0The number of rows in the whole result, for when the table cannot count
them.unsortedLabelstringDefault"Not sorted"What screen readers hear when the table stops being sorted.windowedbooleanDefaultfalseDraws only the rows in view, with empty space in place of the rest.
ReadTypeDescriptionorderedColumnsHelixHeadlessTableColumn[]The columns in their current order.tableColumnsHelixHeadlessTableColumn[]The columns declared as children, in the order they are written.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The columns, as TableColumn elements, and the first page served as TableRow elements, which show until rows holds a row.emptyContent shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to empty-text, which the live region still says.errorContent shown while error-text is set, such as a button that tries again. Falls back to error-text, which the live region still says.footerContent below the grid. It replaces the built-in pagination.loadingContent shown while the rows load, such as a spinner. Falls back to loading-text, which the live region still says.toolbarContent above the grid, such as a search field or actions.
EventTypeDescriptionhelix-activateHelixActivateEventFired after the page changes, with the new page as a string in detail.value.helix-before-reorderHelixBeforeReorderEventA row is about to move, with reorderable-rows. The event carries every row's key in the new order. Cancelable: cancel it to keep the row where it is.helix-expandHelixExpandEventFired after a row opens or closes, with every open row's key, separated by commas, which expanded also holds.helix-filterHelixFilterEventThe search query is about to change. Cancelable: cancel it to keep the current query.helix-filteredHelixFilteredEventFired after the search query changes, with the new query.helix-load-moreHelixLoadMoreEventFired when a reader asks for more rows, by the load-more row's button or by scrolling a windowed table near its end.helix-navigateHelixNavigateEventAnother page was requested. Cancelable: cancel it to stay on the current page.helix-reorderHelixReorderEventThe columns are about to move, with kind set to column and every field in the new order. Cancelable: cancel it to keep the current order. For a row, with kind set to row, it follows helix-before-reorder, and you set rows to the order in keys.helix-reorderedHelixReorderedEventFired after the columns move, with every field in the new order.helix-selectHelixSelectEventThe selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.helix-selectedHelixSelectedEventFired after the selection changes, with every selected key, separated by commas.helix-sortHelixSortEventA different sort order was requested. Cancelable: cancel it to keep the current order.helix-sortedHelixSortedEventFired after the sort order changes, with the new order.
MethodTypeDescriptioncsv() => stringReturns the result as CSV: every row that matches the filter, in the order
and columns shown, under a line of the column headings.search(query: string) => booleanFilters the rows by a query from your own search field.toggleSort(field: string) => booleanCycles the sort order of one column, as a click on its heading does.
PartDescriptionafterThe space that stands in for the rows below the window. Only while windowed.beforeThe space that stands in for the rows above the window. Only while windowed.cellOne cell.cell-headerAdded to cell for a cell of the row header column.cell-selectedAdded to cell in a selected row.checkboxA row's checkbox, or the checkbox in the heading that selects every row.checkbox-boxThe box drawn for the checkbox's input.checkbox-controlThe checkbox's input.checkbox-feedbackForwarded from the checkbox. Not shown in the table.checkbox-fieldThe row that holds the checkbox's box.checkbox-hintForwarded from the checkbox. Not shown in the table.checkbox-labelForwarded from the checkbox. The label is read by screen readers only.checkbox-markThe check mark, or the dash while some rows are selected.checkbox-mark-checkedAdded to checkbox-mark while its box is checked.checkbox-mark-dashAdded to checkbox-mark while it draws the dash, which it keeps until its box is checked.checkbox-mark-indeterminateAdded to checkbox-mark while only some rows are selected.drag-previewA copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, with reorderable-rows. Hidden from assistive technology.emptyShown when there are no rows, because none arrived or the filter matches none. While rows are loading, the loading part is shown in its place.errorShown after the rows while error-text is set, in place of the empty and loading lines.footerThe region below the grid.grip-headThe heading over the row grips, with reorderable-rows.headThe row that holds the column headings. It is display: contents, so it takes no space.liveA copy of the empty and loading messages, which screen readers announce when they change. Visually hidden in the styled tier.loadingShown while the rows are loading.moreThe row after the last one that holds the button for more rows, while load-more is set.more-buttonThe button that asks for more rows.more-cellThe cell of the more row, which spans every column.paginationThe built-in pagination, when it is shown.pagination-firstThe pagination's button that goes to the first page, shown with ends.pagination-gapThe pagination's marker for pages that are not shown.pagination-itemOne item in the pagination's list, holding a page or a gap.pagination-lastThe pagination's button that goes to the last page, shown with ends.pagination-listThe pagination's list of pages.pagination-liveThe region that announces a page change. It is clipped out of sight and still read by screen readers.pagination-markThe icon on the first, previous, next, and last buttons.pagination-nextThe pagination's button that goes forward one page.pagination-pageThe pagination's button for one page.pagination-page-currentAdded to pagination-page for the current page.pagination-previousThe pagination's button that goes back one page.pagination-statusThe pagination's text that says which page is shown, in compact.rowOne row of data.row-draggingAdded to row while it is being moved.row-drop-afterAdded to row when the row being moved goes after it.row-drop-beforeAdded to row when the row being moved goes before it.row-gripThe cell that holds a row's grip, with reorderable-rows.row-grip-buttonThe button that moves a row.row-grip-markThe icon on a row's grip.row-lastAdded to row on the page's last row, where nothing follows it: never under windowed, nor above the load-more row.selectThe cell that holds a row's checkbox.select-allThe heading that holds the checkbox that selects every row.select-selectedAdded to select in a selected row.tableThe grid.toggleThe mark in a row header that a press opens and closes its row by, in a tree grid.toggle-markThe caret in toggle. It points along the line while the row is closed and down while it is open.toggle-openAdded to toggle while its row is open.toolbarThe region above the grid.
CSS PropertyDescription--data-table-block-sizeThe height of the scrolling box while windowed. Ignored otherwise, where the grid is as tall as its rows. It is a fixed height, so a short result keeps the full box with space below it.--data-table-cell-alignThe alignment of the cell's column: start, center, or end. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. Table sets --table-cell-align for the same purpose.--data-table-colorThe text color of a cell.--data-table-columnsThe grid track list for the columns. It overrides the list worked out from the columns.--data-table-drag-preview-background-colorThe fill behind the copy of a row a pointer drags.--data-table-drag-preview-border-colorThe color of the edge around the copy of a row a pointer drags.--data-table-drag-preview-border-widthThe width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.--data-table-drag-preview-opacityThe opacity of the copy of a row a pointer drags.--data-table-drag-preview-radiusThe corner radius of the copy of a row a pointer drags.--data-table-drag-preview-shadowThe shadow that raises the copy of a row a pointer drags over the page.--data-table-dragging-opacityThe opacity of a row being moved, with reorderable-rows.--data-table-drop-indicator-colorThe color of the line where a moved row would land.--data-table-drop-indicator-sizeThe thickness of the line where a moved row would land.--data-table-error-colorThe color of the words in the line shown while error-text is set.--data-table-footer-gapThe space between the grid and the footer below it.--data-table-footer-item-gapThe space between the pieces of the footer, such as a summary and the pagination.--data-table-grip-colorThe color of a row's grip, with reorderable-rows.--data-table-grip-disabled-opacityThe opacity of a row's grip while a sort decides the order.--data-table-heading-background-colorThe fill behind a heading while windowed. It is opaque, because rows scroll under the sticky heading. Unset otherwise.--data-table-heading-colorThe text color of a heading.--data-table-indentHow far a tree grid's row header steps in for each level. It defaults to the width of the mark that opens a row.--data-table-levelHow deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it.--data-table-more-border-colorThe color of the edge around the button in the load-more row.--data-table-more-hover-background-colorThe fill behind the button in the load-more row while the pointer is over it.--data-table-more-padding-blockThe space above and below the words of the button in the load-more row.--data-table-more-padding-inlineThe space either side of the words of the button in the load-more row.--data-table-more-radiusThe corner radius of the button in the load-more row.--data-table-padding-blockThe space above and below a cell's content.--data-table-padding-inlineThe space on either side of a cell's content.--data-table-rule-colorThe color of the line between rows. It takes a color only, because it fills the color in a border shorthand, and a full border value makes the rule invalid. It is drawn on the cells, because the row is display: contents.--data-table-selected-background-colorThe fill across a selected row.--data-table-templateThe column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's width to change it.--data-table-textThe font size of headings and cells.--data-table-toggle-colorThe color of the mark that opens and closes a row of a tree grid.--data-table-toggle-gapThe space between the mark that opens a row of a tree grid and the row's name, also kept by a row with no children.--data-table-toggle-sizeThe size of the mark that opens and closes a row of a tree grid, and of the room a row with no children keeps for it.--data-table-toolbar-gapThe space between the toolbar and the grid below it.
Custom stateDescriptionemptyWhile there are no rows to show and none are loading.errorWhile error-text is set.loadingWhile loading is set, as the rows are on their way.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-data-tableA table drawn from an array of rows, with sorting, filtering, and paging.
PropTypeDescriptionascendingLabelstringDefault"ascending"The word for an ascending sort, in a sorted-label that writes {order}.canceledLabelstringDefault"Canceled"What screen readers hear when a held row is put back, or a move is
refused, with reorderable-rows.childFieldstringThe field that holds a row's child rows, as an array. Set it, and row-key,
and the grid becomes a tree grid.columnsstringDefault""The column tracks, as a grid track list such as 2fr 1fr max-content,
dealt out one track to a column in the order the columns are written. A
column's own width wins in its place, and a column it does not reach
takes the track a column with no width takes.defaultExpandedstringDefault""The keys of the rows open at the start, separated by commas. Used until
expanded is set.defaultFilterstringDefault""The starting search query, used until filter is set.defaultOrderstringDefault""The starting column order, used until order is set.defaultPagenumberDefault1The starting page, used until page is set.defaultPageSizenumberDefault0The starting page size, used until pageSize is set.defaultSelectedstringDefault""The keys selected at the start, separated by commas. Used until selected
is set.defaultSortstringDefault""The starting sort order, used until sort is set.descendingLabelstringDefault"descending"The word for a descending sort, in a sorted-label that writes {order}.droppedLabelstringDefault"Dropped"What screen readers hear when a row is dropped, with reorderable-rows.emptyTextstringDefault"Nothing to show"The text shown and announced when there are no rows and none are loading.errorTextstringDefault""The text shown and announced when the rows could not load, such as "The
files did not load". Set it when a fetch fails, and clear it once you try
again. Empty, the default, shows nothing.estimatenumberDefault32The estimated height of a row before it is drawn, in pixels.expandedstringThe keys of the open rows in a tree grid, separated by commas, the shape of
selected. A reader's press writes it and then sends helix-expand.filterstringThe search query. A row is shown when the query matches any of its columns.gapLabelstringDefault"Skip to page {page}"The built-in pagination's name for a gap in its run of pages. {page} is
replaced with the page it jumps to.labelstringDefault""The grid's name, read by screen readers.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.loadMorebooleanDefaultfalseDraws a row after the last one with a button that asks for more rows.loadMoreLabelstringDefault"Load more"The words on the button in the more row.localestringDefault""The locale the words, plural forms, and numbers are in, as a BCP 47 tag
such as pl. Empty reads the nearest lang, then the browser's
language. The built-in pagination speaks it too.mode"client"|"server"Default"client"Where filtering, sorting, and paging happen. client does them in the
table, and server leaves them to your code.movedLabelstringDefault"{name} moved to position {position} of {count}"What screen readers hear each time a key moves a held row, with
reorderable-rows. {name} is the row's name, {position} the place it
would go, counting from 1, and {count} the number of rows on the page.moveRowLabelstringDefault"Move {row}"The name of a row's grip, with reorderable-rows. {row} is replaced with
the row's name.nextLabelstringDefault"Next page"The built-in pagination's name for the button that moves forward a page.orderstringThe column order, as field names separated by spaces.pagenumberThe page shown, counting from 1.pageLabelstringDefault"Page {page}"The built-in pagination's name for one page. {page} and {pages} are
replaced with the page number and the page count.pageSizenumberThe number of rows on a page. 0 shows every row, with no paging.paginatedbooleanShows a pagination under the grid.paginationLabelstringDefault"Pagination"The name of the built-in pagination's navigation landmark.pickedUpLabelstringDefault"Picked up {name}"What screen readers hear when a key or a click picks up a row, with
reorderable-rows. {name} is the row's name.previousLabelstringDefault"Previous page"The built-in pagination's name for the button that moves back a page.reorderablebooleanDefaultfalseLets users reorder the columns.reorderableRowsbooleanDefaultfalseLets people move rows, by a grip that leads each row. The table moves no
row itself: set rows to the order helix-reorder carries.resultLabelstringWhat screen readers hear when a search leaves one row, where
results-label should not say it. {count} is the count.resultsLabelstringDefault"{count, plural, one {# result} other {# results}}"What screen readers hear when a search narrows the rows. {count} is how
many rows are left, written in the locale, and each language writes the
forms it has: {count, plural, one {# wiersz} few {# wiersze} many {# wierszy} other {# wiersza}}.rowGripsLabelstringDefault"Move rows"The name of the heading over the row grips, with reorderable-rows.rowKeystringDefault""The field that identifies each row.rowsreadonlyDataRow[]Default[]Every row of the result, in the order it arrived.selectablebooleanDefaultfalseAdds a column of checkboxes for selecting rows.selectAllLabelstringDefault"Select every row"The name of the checkbox in the heading that selects every row.selectedstringThe keys of the selected rows, separated by commas.selectedLabelstringDefault"{count} selected"What screen readers hear when the chosen rows change. {count} is how many
rows are chosen, written in the locale, and a language that needs plural
forms writes them: {count, plural, one {# wybrany} few {# wybrane} many {# wybranych} other {# wybranego}}.selectionBehavior"replace"|"toggle"Default"toggle"What a key or a press on a row does to the rows already selected, in a
selectable table. toggle, the default, keeps them: Space adds or takes
out the row. replace selects the row alone, as a file list does: Down and
Up carry the selection with them, and a press on a row selects it. Control
or Command with a press or Space adds or takes out one row, and with a move
goes without selecting. The checkboxes add or take out one row either way.selectRowLabelstringDefault"Select {row}"The name of a row's checkbox. {row} is replaced with the row's value in
the first column that has a field, or with its key.sortstringThe sort order, as field:direction.sortedLabelstringDefault"{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}"What screen readers hear when the table is sorted. {column} is the
column's heading and {direction} is ascending or descending, so each
order has its whole sentence. {order} is the deprecated
ascending-label or descending-label.totalnumberDefault0The number of rows in the whole result, for when the table cannot count
them.unsortedLabelstringDefault"Not sorted"What screen readers hear when the table stops being sorted.windowedbooleanDefaultfalseDraws only the rows in view, with empty space in place of the rest.
ReadTypeDescriptionorderedColumnsHelixHeadlessTableColumn[]The columns in their current order.tableColumnsHelixHeadlessTableColumn[]The columns declared as children, in the order they are written.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The columns, as TableColumn elements, and the first page served as TableRow elements, which show until rows holds a row.emptyContent shown when there are no rows to show and none are loading, such as a picture and a link. Falls back to empty-text, which the live region still says.errorContent shown while error-text is set, such as a button that tries again. Falls back to error-text, which the live region still says.footerContent below the grid. It replaces the built-in pagination.loadingContent shown while the rows load, such as a spinner. Falls back to loading-text, which the live region still says.toolbarContent above the grid, such as a search field or actions.
EventTypeDescriptionhelix-activateHelixActivateEventFired after the page changes, with the new page as a string in detail.value.helix-before-reorderHelixBeforeReorderEventA row is about to move, with reorderable-rows. The event carries every row's key in the new order. Cancelable: cancel it to keep the row where it is.helix-expandHelixExpandEventFired after a row opens or closes, with every open row's key, separated by commas, which expanded also holds.helix-filterHelixFilterEventThe search query is about to change. Cancelable: cancel it to keep the current query.helix-filteredHelixFilteredEventFired after the search query changes, with the new query.helix-load-moreHelixLoadMoreEventFired when a reader asks for more rows, by the load-more row's button or by scrolling a windowed table near its end.helix-navigateHelixNavigateEventAnother page was requested. Cancelable: cancel it to stay on the current page.helix-reorderHelixReorderEventThe columns are about to move, with kind set to column and every field in the new order. Cancelable: cancel it to keep the current order. For a row, with kind set to row, it follows helix-before-reorder, and you set rows to the order in keys.helix-reorderedHelixReorderedEventFired after the columns move, with every field in the new order.helix-selectHelixSelectEventThe selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.helix-selectedHelixSelectedEventFired after the selection changes, with every selected key, separated by commas.helix-sortHelixSortEventA different sort order was requested. Cancelable: cancel it to keep the current order.helix-sortedHelixSortedEventFired after the sort order changes, with the new order.
MethodTypeDescriptioncsv() => stringReturns the result as CSV: every row that matches the filter, in the order
and columns shown, under a line of the column headings.search(query: string) => booleanFilters the rows by a query from your own search field.toggleSort(field: string) => booleanCycles the sort order of one column, as a click on its heading does.
PartDescriptionafterThe space that stands in for the rows below the window. Only while windowed.beforeThe space that stands in for the rows above the window. Only while windowed.cellOne cell.cell-headerAdded to cell for a cell of the row header column.cell-selectedAdded to cell in a selected row.checkboxA row's checkbox, or the checkbox in the heading that selects every row.checkbox-boxThe box drawn for the checkbox's input.checkbox-controlThe checkbox's input.checkbox-feedbackForwarded from the checkbox. Not shown in the table.checkbox-fieldThe row that holds the checkbox's box.checkbox-hintForwarded from the checkbox. Not shown in the table.checkbox-labelForwarded from the checkbox. The label is read by screen readers only.checkbox-markThe check mark, or the dash while some rows are selected.checkbox-mark-checkedAdded to checkbox-mark while its box is checked.checkbox-mark-dashAdded to checkbox-mark while it draws the dash, which it keeps until its box is checked.checkbox-mark-indeterminateAdded to checkbox-mark while only some rows are selected.drag-previewA copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, with reorderable-rows. A column's grip moves the column itself. Hidden from assistive technology.emptyShown when there are no rows, because none arrived or the filter matches none. While rows are loading, the loading part is shown in its place.errorShown after the rows while error-text is set, in place of the empty and loading lines.footerThe region below the grid.grip-headThe heading over the row grips, with reorderable-rows.headThe row that holds the column headings. It is display: contents, so it takes no space.liveA copy of the empty and loading messages, which screen readers announce when they change. Visually hidden in the styled tier.loadingShown while the rows are loading.moreThe row after the last one that holds the button for more rows, while load-more is set.more-buttonThe button that asks for more rows.more-cellThe cell of the more row, which spans every column.paginationThe built-in pagination, when it is shown.pagination-firstThe pagination's button that goes to the first page, shown with ends.pagination-gapThe pagination's marker for pages that are not shown.pagination-itemOne item in the pagination's list, holding a page or a gap.pagination-lastThe pagination's button that goes to the last page, shown with ends.pagination-listThe pagination's list of pages.pagination-liveThe region that announces a page change. It is clipped out of sight and still read by screen readers.pagination-markThe icon on the first, previous, next, and last buttons.pagination-nextThe pagination's button that goes forward one page.pagination-pageThe pagination's button for one page.pagination-page-currentAdded to pagination-page for the current page.pagination-previousThe pagination's button that goes back one page.pagination-statusThe pagination's text that says which page is shown, in compact.rowOne row of data.row-draggingAdded to row while it is being moved.row-drop-afterAdded to row when the row being moved goes after it.row-drop-beforeAdded to row when the row being moved goes before it.row-gripThe cell that holds a row's grip, with reorderable-rows.row-grip-buttonThe button that moves a row.row-grip-markThe icon on a row's grip.row-lastAdded to row on the page's last row, where nothing follows it: never under windowed, nor above the load-more row.selectThe cell that holds a row's checkbox.select-allThe heading that holds the checkbox that selects every row.select-selectedAdded to select in a selected row.tableThe grid. While windowed, the box that scrolls, which needs only a block size on this tier.toggleThe mark in a row header that a press opens and closes its row by, in a tree grid.toggle-markThe caret in toggle. It points along the line while the row is closed and down while it is open.toggle-openAdded to toggle while its row is open.toolbarThe region above the grid.
CSS PropertyDescription--data-table-cell-alignThe alignment of the cell's column: start, center, or end. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. Table sets --table-cell-align for the same purpose.--data-table-levelHow deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it.--data-table-templateThe column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's width to change it.
Custom stateDescriptionemptyWhile there are no rows to show and none are loading.errorWhile error-text is set.loadingWhile loading is set, as the rows are on their way.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionEventsThe sort, filter, and page requests the table sends.Loading MoreSix rows at first, with a row after them that loads six more each time it is pressed.Moving RowsRows you move by a grip, with the new order set back on the table.Nested RowsA file tree as a table: folders open and close in place, and their files sit under them.PagingEight rows a page, with the table's built-in pagination.PreviewA table that sorts when you click a heading, with pages for the rest of the rows.PreviewA table that sorts when you click a heading, with pages for the rest of the rows.SearchingOne query matched against every column, from your own search field.Selecting And ArrangingRows selected by their key, and columns you can reorder and resize.Serving The First PageThe first page written out as rows, so the HTML carries the values before the table draws its own.Summary And SizeA summary of the rows shown and a page size menu, on either side of the built-in pagination.Windowed PagingPages of five hundred rows, with only the rows in view drawn.WindowingFive thousand rows, with only the rows in view drawn.