1. Plugins
  2. addFlatten



addFlatten flattens the table by removing parent rows and bringing subrows up.


Options passed into addFlatten.

const table = createTable(data, {
  flatten: addFlatten({ ... }),

initialDepth?: number

How many levels to flatten.

Defaults to 0.

Column Options

Options passed into column definitions.

const columns = table.createColumns([
    header: 'Name',
    accessor: 'name',
    plugins: {
      flatten: { ... },

Nothing here so far.

Prop Set

Extensions to the view model.

Subscribe to .props() on the respective table components.

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.flatten} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.flatten} <!-- HeaderCell props -->


flatten: (depth: number) => void

Flattens the table up to a certain depth.

unflatten: () => void

Unflattens the table.

Plugin State

State provided by addFlatten.

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.flatten;

depth: Writable<number>

The current depth to flatten to.