HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TableView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorTabular data laid out on a grid.ExperimentalSince 0.1.0DataUsageimport'@fusion.dev/helix/table'import'@fusion.dev/helix-headless/table'Preview
API ReferenceRoothelix-tableTabular data laid out on a grid.
PropTypeDefaultDescriptioncolumnsstring""Column track list, as CSS. Deprecated: declare columns instead.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring""Accessible name for the table.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.
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.
PartDescriptionemptyShown when there are no rows to show.headThe row the column headings sit in. `display: contents`, so it takes no space.loadingShown while the rows are still on their way.tableThe grid.
CSS PropertyDescription--table-columnsTrack list for the columns.--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. `--table-columns` is the one to set.
Cellhelix-table-cellOne cell of a table.
PropTypeDefaultDescriptionheaderbooleanfalseWhether the cell heads its column.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The cell's content.
Columnhelix-table-columnOne column of a table: its heading, and how wide it is.
PropTypeDefaultDescriptionalign"center"|"end"|"start"|""""Which edge the values line up against.cellCellReaderHow to read the cell, where the field alone will not do.compareCellReaderHow to read the value that gets sorted and filtered, where it is not the cell.fieldstring""The key this column reads out of a row.sortablebooleanfalseWhether a reader may reorder the set by this column.widthstring""The track this column takes, as CSS.
ReadTypeDescriptioncanSortbooleanWhether a reader can actually reorder by this column.trackstringThe track this column contributes, resolved.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The heading.
MethodTypeDescriptionorder(row: Readonly<Record<string, unknown>>) => unknownThe value this column sorts and filters by, which is not always what it shows.read(row: Readonly<Record<string, unknown>>) => unknownThe value this column shows for a row.
PartDescriptioncolumnThe heading cell.
Rowhelix-table-rowOne row of a table.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The row's cells.
Roothelix-headless-tableTabular data laid out on a grid.
PropTypeDefaultDescriptioncolumnsstring""Column track list, as CSS. Deprecated: declare columns instead.emptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring""Accessible name for the table.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.
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.
PartDescriptionemptyShown when there are no rows to show.headThe row the column headings sit in. `display: contents`, so it takes no space.loadingShown while the rows are still on their way.tableThe grid.
CSS PropertyDescription--table-columnsTrack list for the columns.--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. `--table-columns` is the one to set.
Cellhelix-headless-table-cellOne cell of a table.
PropTypeDefaultDescriptionheaderbooleanfalseWhether the cell heads its column.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The cell's content.
Columnhelix-headless-table-columnOne column of a table: its heading, how wide it is, and what it reads.
PropTypeDefaultDescriptionalign"center"|"end"|"start"|""""Which edge the values line up against.cellCellReaderHow to read the cell, where the field alone will not do.compareCellReaderHow to read the value that gets sorted and filtered, where it is not the cell.fieldstring""The key this column reads out of a row.sortablebooleanfalseWhether a reader may reorder the set by this column.widthstring""The track this column takes, as CSS.
ReadTypeDescriptioncanSortbooleanWhether a reader can actually reorder by this column.trackstringThe track this column contributes, resolved.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The heading.
MethodTypeDescriptionorder(row: Readonly<Record<string, unknown>>) => unknownThe value this column sorts and filters by, which is not always what it shows.read(row: Readonly<Record<string, unknown>>) => unknownThe value this column shows for a row.
PartDescriptioncolumnThe heading cell.
Rowhelix-headless-table-rowOne row of a table.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The row's cells.
ExamplesNameDescriptionColumnsThe track sizes written once on the table, rather than one width per column.PreviewRows and columns with a caption naming what they are.PreviewRows and columns with a caption naming what they are.