BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Data Table

Sortable, selectable table with column control.

Package
@solidiom/data-table
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

Bodycomponent

@solidiom/data-table — Headless sortable data table primitive. Parts: Root (table), Header (thead), HeaderCell (th), Body (tbody), Row (tr), Cell (td).

                        Body(props: DataTableBodyProps): Element

Props

class?
string

children: Element

View source

Cellcomponent

@solidiom/data-table — Headless sortable data table primitive. Parts: Root (table), Header (thead), HeaderCell (th), Body (tbody), Row (tr), Cell (td).

                        Cell(props: DataTableCellProps): Element

Props

class?
string

children: Element

View source

ColumnDefinterface

Column definition model.

Props

accessorKey
keyof T & string — Key to access the row data value.
header
string — Header label or render function.
id
string — Unique column identifier.
sortable?
boolean — Whether this column is sortable. Default: false.

View source

DataTableBodyPropsinterface

Props for the table body (tbody).

Props

class?
string

children: Element

View source

DataTableCellPropsinterface

Props for a table cell (td).

Props

class?
string

children: Element

View source

DataTableContextValueinterface

Shared reactive state and mutation requests for every DataTable part.

Props

baseId
string — Generated base ID.
columns
Accessor<ColumnDef<T>[]> — Column definitions.
modelPort
TableModelPort<T> | undefined — Table model port for sorting delegation.
requestSelectionChange
(ids: Set<string>, details: ChangeDetails<DataTableReason>) => void — Request row selection change.
requestSortChange
(state: SortState, details: ChangeDetails<DataTableReason>) => void — Request sort state change.
requestVisibilityChange
(ids: Set<string>, details: ChangeDetails<DataTableReason>) => void — Request column visibility change.
rowIdKey
string — Row ID accessor key.
rows
Accessor<T[]> — Sorted/processed rows.
selectedRowIds
Accessor<Set<string>> — Selected row IDs.
selectionMode
RowSelectionMode — Row selection mode.
sortState
Accessor<SortState> — Current sort state.
visibleColumnIds
Accessor<Set<string>> — Visible column IDs.

View source

DataTableHeaderCellPropsinterface

Props for a sortable table header cell (th).

Props

class?
string
columnId
string — Column ID this header cell corresponds to.

children: Element

View source

DataTableHeaderPropsinterface

Props for the table header (thead).

Props

class?
string

children: Element

View source

DataTableReasontype

Reason for a table state change.

View source

DataTableRootPropsinterface

Props for the data table root.

Props

class?
string
columns
ColumnDef<T>[] — Column definitions.
data
T[] — Row data.
defaultSelectedRowIds?
Set<string> — Default selected row IDs.
defaultSortState?
SortState — Default sort state for uncontrolled mode.
defaultVisibleColumnIds?
Set<string> — Default visible column IDs. Defaults to all columns.
modelPort?
TableModelPort<T> — Table model port for sort delegation.
onSelectionChange?
(ids: Set<string>, details: ChangeDetails<DataTableReason>) => void — Called when row selection changes.
onSortChange?
(state: SortState, details: ChangeDetails<DataTableReason>) => void — Called when sort state changes.
onVisibilityChange?
(ids: Set<string>, details: ChangeDetails<DataTableReason>) => void — Called when column visibility changes.
ref?
(el: HTMLTableElement) => void
rowIdKey?
string — Key in each row used as unique row ID.
selectedRowIds?
Accessor<Set<string>> — Controlled selected row IDs.
selectionMode?
RowSelectionMode — Row selection mode. Default: "none".
sortState?
Accessor<SortState> — Controlled sort state.
visibleColumnIds?
Accessor<Set<string>> — Controlled visible column IDs.

children: Element

View source

DataTableRowPropsinterface

Props for a table row (tr).

Props

class?
string
ref?
(el: HTMLTableRowElement) => void
rowId
string — Unique row ID. Used for selection tracking.

children: Element

View source

Headercomponent

@solidiom/data-table — Headless sortable data table primitive. Parts: Root (table), Header (thead), HeaderCell (th), Body (tbody), Row (tr), Cell (td).

                        Header(props: DataTableHeaderProps): Element

Props

class?
string

children: Element

View source

HeaderCellcomponent

@solidiom/data-table — Headless sortable data table primitive. Parts: Root (table), Header (thead), HeaderCell (th), Body (tbody), Row (tr), Cell (td).

                        HeaderCell(props: DataTableHeaderCellProps): Element

Props

class?
string
columnId
string — Column ID this header cell corresponds to.

children: Element

View source

Rootcomponent

@solidiom/data-table — Headless sortable data table primitive. Parts: Root (table), Header (thead), HeaderCell (th), Body (tbody), Row (tr), Cell (td).

                        Root(props: DataTableRootProps<T>): Element

Props

class?
string
columns
ColumnDef<T>[] — Column definitions.
data
T[] — Row data.
defaultSelectedRowIds?
Set<string> — Default selected row IDs.
defaultSortState?
SortState — Default sort state for uncontrolled mode.
defaultVisibleColumnIds?
Set<string> — Default visible column IDs. Defaults to all columns.
modelPort?
TableModelPort<T> — Table model port for sort delegation.
onSelectionChange?
(ids: Set<string>, details: ChangeDetails<DataTableReason>) => void — Called when row selection changes.
onSortChange?
(state: SortState, details: ChangeDetails<DataTableReason>) => void — Called when sort state changes.
onVisibilityChange?
(ids: Set<string>, details: ChangeDetails<DataTableReason>) => void — Called when column visibility changes.
ref?
(el: HTMLTableElement) => void
rowIdKey?
string — Key in each row used as unique row ID.
selectedRowIds?
Accessor<Set<string>> — Controlled selected row IDs.
selectionMode?
RowSelectionMode — Row selection mode. Default: "none".
sortState?
Accessor<SortState> — Controlled sort state.
visibleColumnIds?
Accessor<Set<string>> — Controlled visible column IDs.

children: Element

View source

Rowcomponent

@solidiom/data-table — Headless sortable data table primitive. Parts: Root (table), Header (thead), HeaderCell (th), Body (tbody), Row (tr), Cell (td).

                        Row(props: DataTableRowProps): Element

Props

class?
string
ref?
(el: HTMLTableRowElement) => void
rowId
string — Unique row ID. Used for selection tracking.

children: Element

View source

RowSelectionModetype

Selection mode for rows.

View source

SortDirectiontype

Sort direction for a column.

View source

SortStateinterface

Current sort state.

Props

columnId
string | null
direction
SortDirection

View source

TableModelPortinterface

Port interface for delegating sort computation to an adapter. Following the adapter pattern used by calendar/carousel.

View source