undefined
Table#createColumns
creates and validates a set of columns for the table. It is called on the table instance, and returns an array of Column
s.
const table = createTable(data);
const column = table.createColumns(...);
Usage
Breaking change
v0.13 - header: (tableState) => RenderConfig
.
v0.14 - header: (headerCell, tableState) => RenderConfig
.
Table#createColumns: (columns) => Column[]
columns
is an array of columns created by Table#column
, Table#group
, or Table#display
.
const columns = table.createColumns([...])
Table#column: (columnDef) => DataColumn
columnDef
is the definition of the data column. DataColumn
s describe actual data to present in the table.
columnDef.accessor: string | ((item) => unknown)
Defines the property to present on the data column.
If accessor
is a string, the property must exist as a direct property on each data item. If a nested or computed property is needed, pass a function accessor.
columnDef.id?: string
The id
will be parsed with
svelte-keyed
, so make sure to format it without dot notation (object.prop
) or array notation (object[0]
).
Defines the id of the data column. Duplicate ids are not allowed on a single table.
Defaults to the value of accessor
if a string accessor is passed. If a function accessor is passed, defaults to the value of header
instead.
columnDef.header: RenderConfig | ((headerCell, state) => RenderConfig)
Defines the component to use for the header cell of the data column.
header
is either a
RenderConfig
, or a function that receives
HeaderCell
and
TableState
, and returns a
RenderConfig
.
columnDef.cell?: (dataCell, state) => RenderConfig
Defines the component to use for the body cells of the data column.
cell
is a function that receives
DataBodyCell
and
TableState
, and returns a
RenderConfig
.
Defaults to returning dataCell.value
.
columnDef.plugins?: ColumnOptions
Defines the plugin column options of the data column.
See also Plugin Column Options.
Table#group: (groupDef) => GroupColumn
groupDef
is the definition of the group column. GroupColumn
s group other columns together (including other nested GroupColumn
s) to create multiple levels of header rows.
groupDef.columns: Column[]
Defines the columns grouped by the group column.
groupDef.header: RenderConfig | ((headerCell, state) => RenderConfig)
Defines the component to use for the header cell of the group column.
header
is either a
RenderConfig
, or a function that receives
HeaderCell
and
TableState
, and returns a
RenderConfig
.
Table#display: (displayDef) => DisplayColumn
displayDef
is the definition of the display column. DisplayColumn
s allow for non data-related information to be displayed.
Useful for row selection and row expanding UI.
displayDef.id?: string
Defines the id of the display column. Duplicate ids are not allowed on a single table.
Defaults to the value of header
.
displayDef.header: RenderConfig | ((headerCell, state) => RenderConfig)
Defines the component to use for the header cell of the display column.
header
is either a
RenderConfig
, or a function that receives
HeaderCell
and
TableState
, and returns a
RenderConfig
.
displayDef.cell: (displayCell, state) => RenderConfig
Defines the component to use for the body cells of the display column.
cell
is a function that receives
DisplayBodyCell
and
TableState
, and returns a
RenderConfig
.
displayDef.data: (displayCell, state) => Readable<unknown> | unknown
An optional method to define the underlying data of the display column cell.
This is only useful when used with the
addDataExport
plugin.
Usually, display columns do not contain any data and are exported as null
values. However, it may be useful to export the plugin states of each row as part of the data export.
To do so, you can use data
to specify how the column should be exported.
data
is a function that receives
DisplayBodyCell
and a nullable
TableState
, and returns the data for that cell.