HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Data TableView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA table that owns a result: rows as data, with sort, filter and paging.ExperimentalSince 0.1.0DataUsageimport'@fusion.dev/helix/data-table'import'@fusion.dev/helix-headless/data-table'Preview
API ReferenceRoothelix-data-tableA table that owns a result: rows as data, with sort, filter and paging.
PropTypeDefaultDescriptiondefaultFilterstring""Query to open with, where nothing declared one.defaultPagenumber1Page to open on, where nothing declared one.defaultPageSizenumber0Page size to open with, where nothing declared one.defaultSortstring""Order to open on, where nothing declared one.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.filterstringWhat the rows are narrowed to, as one query across every column.keystring""The field naming a row's stable identity.labelstring""Accessible name for the grid.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.mode"client"|"server""client"Whether this element does the work or asks the consumer to.pagenumberThe page on show, from 1.pageSizenumberHow many rows a page holds. Zero is every row, which is what "no paging" means.paginatedbooleanWhether to draw a pagination under the grid.rowsreadonlyDataRow[][]The whole result, in the order it arrived.sortstringThe order, as `field:direction`.totalnumber0How many rows the whole result has, where this element cannot count them.
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 columns, declared as `helix-table-column` children.footerBelow the grid, replacing the pagination this would otherwise draw.toolbarAbove the grid, for a search field or actions.
EventTypeDescriptionhelix-filterHelixFilterEventFired when the query changes, and cancelable.helix-navigateHelixNavigateEventFired when a reader asks for another page, and cancelable.helix-sortHelixSortEventFired when a reader asks for a different order, and cancelable.
MethodTypeDescriptionsearch(query: string) => booleanNarrows the rows, from a consumer's own search field.toggleSort(field: string) => booleanCycles the order by one column, which is what a click on its heading means.
PartDescriptioncellOne cell.emptyShown when no rows match.footerThe region below the grid.headThe row the column headings sit in. `display: contents`, so it takes no space.loadingShown while the rows are still on their way.paginationThe pagination, where this draws one.rowOne row of data.tableThe grid.toolbarThe region above the grid.
CSS PropertyDescription--data-table-colorInk in a cell.--data-table-columnsTrack list for the columns, which wins over the one the columns worked out.--data-table-heading-colorInk in a heading.--data-table-padding-blockSpace above and below a cell's content.--data-table-padding-inlineSpace either side of a cell's content.--data-table-ruleThe hairline between rows.--data-table-templateThe column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--data-table-columns` is the one to set.--data-table-textType size, headings and cells alike.
Roothelix-headless-data-tableA table that owns a result: rows as data, with sort, filter and paging.
PropTypeDefaultDescriptiondefaultFilterstring""Query to open with, where nothing declared one.defaultPagenumber1Page to open on, where nothing declared one.defaultPageSizenumber0Page size to open with, where nothing declared one.defaultSortstring""Order to open on, where nothing declared one.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.filterstringWhat the rows are narrowed to, as one query across every column.keystring""The field naming a row's stable identity.labelstring""Accessible name for the grid.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.mode"client"|"server""client"Whether this element does the work or asks the consumer to.pagenumberThe page on show, from 1.pageSizenumberHow many rows a page holds. Zero is every row, which is what "no paging" means.paginatedbooleanWhether to draw a pagination under the grid.rowsreadonlyDataRow[][]The whole result, in the order it arrived.sortstringThe order, as `field:direction`.totalnumber0How many rows the whole result has, where this element cannot count them.
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 columns, declared as `helix-table-column` children.footerBelow the grid, replacing the pagination this would otherwise draw.toolbarAbove the grid, for a search field or actions.
EventTypeDescriptionhelix-filterHelixFilterEventFired when the query changes, and cancelable.helix-navigateHelixNavigateEventFired when a reader asks for another page, and cancelable.helix-sortHelixSortEventFired when a reader asks for a different order, and cancelable.
MethodTypeDescriptionsearch(query: string) => booleanNarrows the rows, from a consumer's own search field.toggleSort(field: string) => booleanCycles the order by one column, which is what a click on its heading means.
PartDescriptioncellOne cell.emptyShown when no rows match.footerThe region below the grid.headThe row the column headings sit in. `display: contents`, so it takes no space.loadingShown while the rows are still on their way.paginationThe pagination, where this draws one.rowOne row of data.tableThe grid.toolbarThe region above the grid.
CSS PropertyDescription--data-table-templateThe column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--data-table-columns` is the one to set.
ExamplesNameDescriptionEventsThree questions about one result, and not one of them is a value changing.PreviewA result the table owns: sort by clicking a heading, and page through the rest.PreviewA result the table owns: sort by clicking a heading, and page through the rest.SearchingOne query across every column, from a search field the page owns.