undefined

addExpandedRows expands and collapses sub-rows of rows. Sub-rows are defined by plugins such as addSubRows or addGroupBy.

Options

Options passed into addExpandedRows.

const table = createTable(data, {
  expand: addExpandedRows({ ... }),
});

initialExpandedIds?: Record<string, boolean>

Sets the initial expanded row ids.

Expanded row ids are stored as an object of row ids to booleans. If expandedIds[rowId] is true, then rowId is expanded. Otherwise, rowId is not expanded.

The id of a sub-row is in the format {parentId}>{id}. A nested sub-row can be referred to by concatenating the ids of its parent rows to the top-level row.

Defaults to {}.

Column Options

Options passed into column definitions.

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      expand: { ... },
    },
  }),
]);

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.expand} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.expand} <!-- HeaderCell props -->
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

Nothing here so far.

Plugin State

State provided by addExpandedRows.

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

expandedIds: Writable<Record<string, boolean>>

The current expanded row ids. Expanded row ids are stored as an object of row ids to booleans. If expandedIds[rowId] is true, then rowId is expanded. If expandedIds[rowId] is undefined or false, then rowId is not expanded.

The id of a sub-row is in the format {parentId}>{id}. A nested sub-row can be referred to by concatenating the ids of its parent rows to the top-level row.

getRowState: (row) => ExpandedRowsRowState

getRowState takes a BodyRow and returns ExpandedRowsRowState for the row.

ExpandedRowsRowState#isExpanded: Writable<boolean>

Whether the row is expanded. Update the store to update the expanded state of the row.

ExpandedRowsRowState#canExpand: Readable<boolean>

Whether the row has sub-rows to expand.

ExpandedRowsRowState#isAllSubRowsExpanded: Readable<boolean>

Whether all sub-rows of the row are also expanded. If sub-rows are not expandable, defaults to true.

Examples

Simple row expanding

Simple grouping by column