HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TableView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA table of data, laid out on a grid.StableSince 0.1.0DataUsageimport'@fusion.dev/helix/table'import'@fusion.dev/helix-headless/table'Preview
API ReferenceRoothelix-tableA table of data, laid out on a grid.
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, in a reorderable table.columnsstringDefault""The column widths as one track list, written once on the table.defaultExpandedstringDefault""The keys of the rows whose rows are shown at the start, separated by
commas. Used until expanded 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 held row is dropped, in a reorderable table.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. Set it when a
fetch fails, and clear it once you try again. Empty, the default, shows
nothing.expandColumnLabelstringDefault"Expand"The name of the heading over the disclosure buttons.expandedstringThe keys of the rows whose rows are shown, separated by commas, in a table
whose rows nest. A press on a row's disclosure button asks first, and
default-expanded seeds what this element then owns.expandRowLabelstringDefault"Expand {row}"The name of a row's disclosure button. {row} is the words of the row's first cell.fallbackLabelstringDefault"Table"The table's name where neither label nor an aria-label or
aria-labelledby on the host gives it one.gridbooleanDefaultfalseMakes the table a grid: one tab stop, and the arrow keys, Home, End and the
Page keys move focus between its cells, the headings included. Enter moves
into a cell's controls, and Tab leaves the table.labelstringDefault""Accessible name for the table.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.loadMorebooleanDefaultfalseSends helix-load-more once the end of the table comes within a screen
of view, so you can add the next rows as a reader nears them.movedLabelstringDefault"{name} moved to position {position} of {count}"What screen readers hear each time a key moves a held row, in a
reorderable table. {name} is the row's words, {position} the place it
would go, counting from 1, and {count} the number of rows.moveRowLabelstringDefault"Move {row}"The name of a row's grip, in a reorderable table. {row} is replaced
with the words of the row's first cell.pickedUpLabelstringDefault"Picked up {name}"What screen readers hear when a key or a click picks up a row, in a
reorderable table. {name} is the row's words.reorderablebooleanDefaultfalseAdds a column of grips that move rows, by dragging or with the keys. The
table moves no row itself: you move your rows on helix-reorder.rowGripsLabelstringDefault"Move rows"The name of the heading over the row grips, in a reorderable table.selectablebooleanDefaultfalseAdds a column of checkboxes for selecting rows. Each row is known by its
value, and by its place among the rows as written where it has none.selectAllLabelstringDefault"Select every row"The name of the checkbox in the heading that selects every row.selectColumnLabelstringDefault"Select"The name of the heading over the checkboxes under
selection-mode="single", where it holds no checkbox of its own.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 press on a row, or in a grid table a key that moves to one, does
to the rows already selected: toggle, the default, leaves them to the
checkboxes, and replace selects the row alone.selectionMode"multiple"|"single"How many rows a selectable table selects: multiple, the default, or
single, one at a time.selectRowLabelstringDefault"Select {row}"The name of a row's checkbox. {row} is replaced with the words of the
row's first cell.sortstringThe sort order, as field:direction, where field is a sortable column's
field.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.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, as
Data Table's windowed does. The table's box then scrolls, at the
height --table-block-size gives it in the styled tier, and the
headings stick to its top.
ReadTypeDescriptiontableColumnsHelixHeadlessTableColumn[]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 table's rows.columnsThe columns, as TableColumn elements. The table moves each column here itself, so markup that runs in a browser leaves it out; a server-rendered page writes slot="columns" on each column so the headings sit in place before the table upgrades.emptyContent shown when there are no rows 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.headingWords that name the table, shown above it in the weight of a heading.loadingContent shown while the rows load, such as a spinner. Falls back to loading-text, which the live region still says.
EventTypeDescriptionhelix-before-reorderHelixBeforeReorderEventFired when a row is dropped at a new place, in a reorderable table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.helix-before-toggleHelixBeforeToggleEventFired from a row when its disclosure button is pressed, with whether it would be open in detail.checked. Cancelable: cancel it to keep the row as it is.helix-load-moreHelixLoadMoreEventFired, in a table with load-more, when the end of the table comes within a screen of view, once for each number of rows.helix-reorderHelixReorderEventFired after helix-before-reorder when nobody canceled it. Move your rows to the order in keys. Cancelable: cancel it to say the move did not happen.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, as field:direction, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order.helix-sortedHelixSortedEventFired after the sort order changes, with the new order.helix-toggleHelixToggleEventFired from a row once the rows under it are shown or hidden, with whether it is open in detail.checked.
MethodTypeDescriptiontoggleSort(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.checkboxThe checkbox in the heading that selects every row, in a selectable table.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, in a reorderable table. Hidden from assistive technology.emptyThe text shown when there are no rows.errorThe line shown after the rows while error-text is set, in place of the empty and loading text.expand-headThe heading over the disclosure buttons, in a table whose rows nest.grid-endAn empty box after the rows, in a grid table. Tab focuses it on its way out of the table, so the key leaves from the end.grid-startAn empty box before the rows, in a grid table. Shift with Tab focuses it on its way out of the table.grip-headThe heading over the row grips, in a reorderable table.headThe row that holds the column headings. It has display: contents, so it takes no space of its own.liveA live region that repeats the empty and loading text, and says each step of a move, so screen readers announce it when it changes. Visually hidden in the styled tier.loadingThe text shown while the rows are loading.select-allThe heading that holds the checkbox that selects every row.tableThe grid.
CSS PropertyDescription--table-block-sizeHow tall the table's box is while windowed, when it scrolls its rows. 24em by default.--table-columnsTrack list for the columns. It overrides the track list worked out from the columns.--table-drag-preview-background-colorThe fill behind the copy of a row a pointer drags.--table-drag-preview-border-colorThe color of the edge around the copy of a row a pointer drags.--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.--table-drag-preview-opacityThe opacity of the copy of a row a pointer drags.--table-drag-preview-radiusThe corner radius of the copy of a row a pointer drags.--table-drag-preview-shadowThe shadow that raises the copy of a row a pointer drags over the page.--table-error-colorThe color of the words in the line shown while error-text is set.--table-heading-background-colorThe fill behind the headings while windowed, which the rows scroll under. The page's background by default.--table-templateThe column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set columns to change the tracks.--table-title-colorThe color of the words in the heading slot.--table-title-gapThe space between the heading slot and the grid.--table-title-textThe font size of the words in the heading slot.
Custom stateDescriptionemptyWhile there are no rows 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.
Cellhelix-table-cellOne cell of a table.
PropTypeDescriptionheaderbooleanDefaultfalseWhether the cell is a header: of its row in a row of values, and of its
column in a row of headers alone.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The cell's content.
CSS PropertyDescription--table-cell-alignThe text alignment of the column above the cell: start, center, or end, and unset when the column sets none. The table writes it, and the stylesheet that draws the cell reads it for justify-content and text-align, which both follow the writing direction.--table-cell-min-block-sizeThe least height of a cell, and so of its row. Unset, every row is as tall as a control, whatever its cells hold.--table-padding-blockThe space above and below a cell's content. Two values set the space above and the space below.--table-rule-colorThe color of the line under a cell, which is 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.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.textThe cell holds text of its own, beside or instead of elements, so the stylesheet lets its content flow as a line of text.
Columnhelix-table-columnOne column of a table: its heading and its width.
PropTypeDescriptioncellCellReaderA function that reads the cell's content from a row, for cells that field
alone cannot read.compareCellReaderA function that reads the value used for sorting and filtering, when it
differs from the cell.fieldstringDefault""The key this column reads out of a row.moveLabelstringDefault"{named, select, no {Move column} other {Move {name}}}"The accessible name of the grip that moves the column. {name} is the
heading text, and {named} is no for a column without one, so the
sentence for it can name the column another way.resizablebooleanDefaultfalseWhether the column can be resized.resizeLabelstringDefault"{named, select, no {Resize column} other {Resize {name}}}"The accessible name of the separator that resizes the column. {name} is
the heading text, and {named} is no for a column without one.rowHeaderbooleanDefaultfalseMakes this column's cells the headers of their rows, in DataTable.sortablebooleanDefaultfalseWhether the table can be sorted by this column.textAlign"center"|"end"|"start"Which edge the values line up against.widthstringDefault""The track this column takes, as CSS.widthLabelstringDefault"{width, plural, one {# pixel} other {# pixels}}"The text screen readers announce for the column's width. {width} is
the width in pixels, written in the locale, and each language writes the
forms it has.
ReadTypeDescriptioncanSortbooleanWhether the table can be sorted by this column, which needs sortable and
a field.trackstringThe track this column contributes, resolved.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The heading.
EventTypeDescriptionhelix-before-resizeHelixBeforeResizeEventThe column is about to be resized, with the requested width. Cancelable: cancel it to keep the current width.helix-resizedHelixResizedEventFired after the column is resized, with the new width.
MethodTypeDescriptionorder(row: Readonly<Record<string, unknown>>) => unknownThe value this column sorts and filters by for a row, which can differ from
what it shows.read(row: Readonly<Record<string, unknown>>) => unknownThe value this column shows for a row.
PartDescriptioncolumnThe heading cell.gripThe handle for moving the column, when the table allows it.grip-markThe icon on the grip.resizerThe edge that is dragged to change the width, when the column is resizable.sortThe button that a sortable heading renders as.
CSS PropertyDescription--table-padding-blockThe space above and below a heading's words. Unset, the heading takes none, and its height comes from its own least height.--table-rule-colorThe color of the line under the headings. It takes a color only, because it fills the color in a border shorthand.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.sorted-ascendingWhile the table is sorted by this column, smallest first.sorted-descendingWhile the table is sorted by this column, largest first.
Rowhelix-table-rowOne row of a table.
PropTypeDescriptiondisabledbooleanDefaultfalseTakes the row out of the table's selection and out of its link: the row's
checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
pass over it, and a press does not follow href. A row already selected
stays selected. A screen reader hears it as unavailable, and in a grid
table the arrow keys still reach it, as a disabled cell in a grid is
reached.hrefstringDefault""The URL a press on the row follows, which makes the whole row a link.
Empty, the default, leaves presses to the row's cells.parentstringDefault""The key of the row this one sits under, in a table whose rows nest: that
row's value, or its place among the rows where it has none. Empty, the
default, is a row at the top.relstringDefault""The rel of the row's link. You set it yourself, as on an anchor.targetstringDefault""Where the row's link opens, such as _blank.valuestringDefault""The key the table's selected lists this row by. Left empty, the row is
known by its place among the rows as written.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The row's cells.
PartDescriptioncheckboxThe row's checkbox, in a selectable table.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.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.expandThe cell that holds the row's disclosure button, in a table whose rows nest. It carries --table-row-level, the row's depth from 1.expand-buttonThe button that shows and hides the rows under this one.expand-markThe caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.gripThe cell that holds the row's grip, in a reorderable table.grip-buttonThe button that moves the row.grip-markThe icon on the grip.selectThe cell that holds the row's checkbox, in a selectable table.select-selectedAdded to select while the row is selected.
CSS PropertyDescription--table-dragging-opacityThe opacity of a row being moved, in a reorderable table.--table-drop-indicator-colorThe color of the line where a moved row would land.--table-drop-indicator-sizeThe thickness of the line where a moved row would land.--table-expand-colorThe color of a row's disclosure button, in a table whose rows nest.--table-grip-colorThe color of a row's grip, in a reorderable table.--table-grip-disabled-opacityThe opacity of a row's grip while a sort decides the order.--table-indentHow far each step of depth sets a nested row's disclosure cell in.--table-row-disabled-opacityThe opacity of the cells of a disabled row.--table-row-hover-background-colorThe wash across the cells of a row with href under the pointer.--table-row-levelWritten by the row on its expand cell: how deep the row sits, from 1. Do not set it.
Custom stateDescriptiondraggingThe row is being moved, in a reorderable table.drop-afterThe row being moved goes after this one when it is dropped.drop-beforeThe row being moved goes before this one when it is dropped.expandedWhile the rows under this one are shown.linkWhile the row has href and is not disabled, so a press on it follows the link.selectedWhile the row is selected, in a selectable table.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-tableA table of data, laid out on a grid.
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, in a reorderable table.columnsstringDefault""The column widths as one track list, written once on the table.defaultExpandedstringDefault""The keys of the rows whose rows are shown at the start, separated by
commas. Used until expanded 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 held row is dropped, in a reorderable table.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. Set it when a
fetch fails, and clear it once you try again. Empty, the default, shows
nothing.expandColumnLabelstringDefault"Expand"The name of the heading over the disclosure buttons.expandedstringThe keys of the rows whose rows are shown, separated by commas, in a table
whose rows nest. A press on a row's disclosure button asks first, and
default-expanded seeds what this element then owns.expandRowLabelstringDefault"Expand {row}"The name of a row's disclosure button. {row} is the words of the row's first cell.fallbackLabelstringDefault"Table"The table's name where neither label nor an aria-label or
aria-labelledby on the host gives it one.gridbooleanDefaultfalseMakes the table a grid: one tab stop, and the arrow keys, Home, End and the
Page keys move focus between its cells, the headings included. Enter moves
into a cell's controls, and Tab leaves the table.labelstringDefault""Accessible name for the table.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.loadMorebooleanDefaultfalseSends helix-load-more once the end of the table comes within a screen
of view, so you can add the next rows as a reader nears them.movedLabelstringDefault"{name} moved to position {position} of {count}"What screen readers hear each time a key moves a held row, in a
reorderable table. {name} is the row's words, {position} the place it
would go, counting from 1, and {count} the number of rows.moveRowLabelstringDefault"Move {row}"The name of a row's grip, in a reorderable table. {row} is replaced
with the words of the row's first cell.pickedUpLabelstringDefault"Picked up {name}"What screen readers hear when a key or a click picks up a row, in a
reorderable table. {name} is the row's words.reorderablebooleanDefaultfalseAdds a column of grips that move rows, by dragging or with the keys. The
table moves no row itself: you move your rows on helix-reorder.rowGripsLabelstringDefault"Move rows"The name of the heading over the row grips, in a reorderable table.selectablebooleanDefaultfalseAdds a column of checkboxes for selecting rows. Each row is known by its
value, and by its place among the rows as written where it has none.selectAllLabelstringDefault"Select every row"The name of the checkbox in the heading that selects every row.selectColumnLabelstringDefault"Select"The name of the heading over the checkboxes under
selection-mode="single", where it holds no checkbox of its own.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 press on a row, or in a grid table a key that moves to one, does
to the rows already selected: toggle, the default, leaves them to the
checkboxes, and replace selects the row alone.selectionMode"multiple"|"single"How many rows a selectable table selects: multiple, the default, or
single, one at a time.selectRowLabelstringDefault"Select {row}"The name of a row's checkbox. {row} is replaced with the words of the
row's first cell.sortstringThe sort order, as field:direction, where field is a sortable column's
field.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.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, as
Data Table's windowed does. The table's box then scrolls, at the
height --table-block-size gives it in the styled tier, and the
headings stick to its top.
ReadTypeDescriptiontableColumnsHelixHeadlessTableColumn[]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 table's rows.columnsThe columns, as TableColumn elements. The table moves each column here itself, so markup that runs in a browser leaves it out; a server-rendered page writes slot="columns" on each column so the headings sit in place before the table upgrades.emptyContent shown when there are no rows 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.headingWords that name the table, shown above it, such as a heading.loadingContent shown while the rows load, such as a spinner. Falls back to loading-text, which the live region still says.
EventTypeDescriptionhelix-before-reorderHelixBeforeReorderEventFired when a row is dropped at a new place, in a reorderable table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.helix-before-toggleHelixBeforeToggleEventFired from a row when its disclosure button is pressed, with whether it would be open in detail.checked. Cancelable: cancel it to keep the row as it is.helix-load-moreHelixLoadMoreEventFired, in a table with load-more, when the end of the table comes within a screen of view, once for each number of rows.helix-reorderHelixReorderEventFired after helix-before-reorder when nobody canceled it. Move your rows to the order in keys. Cancelable: cancel it to say the move did not happen.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, as field:direction, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order.helix-sortedHelixSortedEventFired after the sort order changes, with the new order.helix-toggleHelixToggleEventFired from a row once the rows under it are shown or hidden, with whether it is open in detail.checked.
MethodTypeDescriptiontoggleSort(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.checkboxThe checkbox in the heading that selects every row, in a selectable table.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, in a reorderable table. Hidden from assistive technology.emptyThe text shown when there are no rows.errorThe line shown after the rows while error-text is set, in place of the empty and loading text.expand-headThe heading over the disclosure buttons, in a table whose rows nest.grid-endAn empty box after the rows, in a grid table. Tab focuses it on its way out of the table, so the key leaves from the end.grid-startAn empty box before the rows, in a grid table. Shift with Tab focuses it on its way out of the table.grip-headThe heading over the row grips, in a reorderable table.headThe row that holds the column headings. It has display: contents, so it takes no space of its own.liveA live region that repeats the empty and loading text, and says each step of a move, so screen readers announce it when it changes. Visually hidden in the styled tier.loadingThe text shown while the rows are loading.select-allThe heading that holds the checkbox that selects every row.tableThe grid.
CSS PropertyDescription--table-templateThe column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set columns to change the tracks.
Custom stateDescriptionemptyWhile there are no rows 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.
Cellhelix-headless-table-cellOne cell of a table.
PropTypeDescriptionheaderbooleanDefaultfalseWhether the cell is a header: of its row in a row of values, and of its
column in a row of headers alone.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The cell's content.
CSS PropertyDescription--table-cell-alignThe text alignment of the column above the cell: start, center, or end, and unset when the column sets none. The table writes it, and the stylesheet that draws the cell reads it for justify-content and text-align, which both follow the writing direction.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.textThe cell holds text of its own, beside or instead of elements, so the stylesheet lets its content flow as a line of text.
Columnhelix-headless-table-columnOne column of a table: its heading, its width, and the field it reads from each row.
PropTypeDescriptioncellCellReaderA function that reads the cell's content from a row, for cells that field
alone cannot read.compareCellReaderA function that reads the value used for sorting and filtering, when it
differs from the cell.fieldstringDefault""The key this column reads out of a row.moveLabelstringDefault"{named, select, no {Move column} other {Move {name}}}"The accessible name of the grip that moves the column. {name} is the
heading text, and {named} is no for a column without one, so the
sentence for it can name the column another way.resizablebooleanDefaultfalseWhether the column can be resized.resizeLabelstringDefault"{named, select, no {Resize column} other {Resize {name}}}"The accessible name of the separator that resizes the column. {name} is
the heading text, and {named} is no for a column without one.rowHeaderbooleanDefaultfalseMakes this column's cells the headers of their rows, in DataTable.sortablebooleanDefaultfalseWhether the table can be sorted by this column.textAlign"center"|"end"|"start"Which edge the values line up against.widthstringDefault""The track this column takes, as CSS.widthLabelstringDefault"{width, plural, one {# pixel} other {# pixels}}"The text screen readers announce for the column's width. {width} is
the width in pixels, written in the locale, and each language writes the
forms it has.
ReadTypeDescriptioncanSortbooleanWhether the table can be sorted by this column, which needs sortable and
a field.trackstringThe track this column contributes, resolved.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The heading.
EventTypeDescriptionhelix-before-resizeHelixBeforeResizeEventThe column is about to be resized, with the requested width. Cancelable: cancel it to keep the current width.helix-resizedHelixResizedEventFired after the column is resized, with the new width.
MethodTypeDescriptionorder(row: Readonly<Record<string, unknown>>) => unknownThe value this column sorts and filters by for a row, which can differ from
what it shows.read(row: Readonly<Record<string, unknown>>) => unknownThe value this column shows for a row.
PartDescriptioncolumnThe heading cell.gripThe handle for moving the column, when the table allows it.grip-markThe icon on the grip.resizerThe edge that is dragged to change the width, when the column is resizable.sortThe button that a sortable heading renders as.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.sorted-ascendingWhile the table is sorted by this column, smallest first.sorted-descendingWhile the table is sorted by this column, largest first.
Rowhelix-headless-table-rowOne row of a table.
PropTypeDescriptiondisabledbooleanDefaultfalseTakes the row out of the table's selection and out of its link: the row's
checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
pass over it, and a press does not follow href. A row already selected
stays selected. A screen reader hears it as unavailable, and in a grid
table the arrow keys still reach it, as a disabled cell in a grid is
reached.hrefstringDefault""The URL a press on the row follows, which makes the whole row a link.
Empty, the default, leaves presses to the row's cells.parentstringDefault""The key of the row this one sits under, in a table whose rows nest: that
row's value, or its place among the rows where it has none. Empty, the
default, is a row at the top.relstringDefault""The rel of the row's link. You set it yourself, as on an anchor.targetstringDefault""Where the row's link opens, such as _blank.valuestringDefault""The key the table's selected lists this row by. Left empty, the row is
known by its place among the rows as written.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The row's cells.
PartDescriptioncheckboxThe row's checkbox, in a selectable table.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.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.expandThe cell that holds the row's disclosure button, in a table whose rows nest. It carries --table-row-level, the row's depth from 1.expand-buttonThe button that shows and hides the rows under this one.expand-markThe caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.gripThe cell that holds the row's grip, in a reorderable table.grip-buttonThe button that moves the row.grip-markThe icon on the grip.selectThe cell that holds the row's checkbox, in a selectable table.select-selectedAdded to select while the row is selected.
CSS PropertyDescription--table-row-levelWritten by the row on its expand cell: how deep the row sits, from 1. Do not set it.
Custom stateDescriptiondraggingThe row is being moved, in a reorderable table.drop-afterThe row being moved goes after this one when it is dropped.drop-beforeThe row being moved goes before this one when it is dropped.expandedWhile the rows under this one are shown.linkWhile the row has href and is not disabled, so a press on it follows the link.selectedWhile the row is selected, in a selectable table.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionColumnsThe column widths set once on the table with columns.GridA table read as a grid: one tab stop, the arrow keys between its cells, and Enter on a row to open it.PreviewRows and columns, with a caption that names the table.PreviewRows and columns, with a caption that names the table.ReorderingA grip on each row that moves it, by dragging or with the arrow keys after you press it.SelectingA heading that names the table, and a checkbox on each row that selects it.WindowedA thousand rows written as markup, with only the rows in view drawn.