API Reference

createColumns

Table#createColumns creates and validates a set of columns for the table. It is called on the table instance, and returns an array of Columns.

const table = createTable(data);
const column = table.createColumns(...);

# Usage

# 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. DataColumns 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

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.

# Table#group: (groupDef) => GroupColumn

groupDef is the definition of the group column. GroupColumns group other columns together (including other nested GroupColumns) 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. DisplayColumns 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.