addExpandedRows

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

Options

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

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

initialExpandedIds?: Record<string, boolean>

Initial expanded row ids as an object mapping rowId => boolean. Nested sub-rows use {parentId}>{id}.

Column Options

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

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

Prop Set

{#each vm.current.headerRows as headerRow (headerRow.id)}
  {headerRow.current.props.expand}
  {#each headerRow.cells as cell (cell.id)}
    {cell.current.props.expand}
  {/each}
{/each}

{#each vm.current.headerRows as headerRow (headerRow.id)}
  {headerRow.current.props.expand}
  {#each headerRow.cells as cell (cell.id)}
    {cell.current.props.expand}
  {/each}
{/each}

Interactions

• Filters (addColumnFilters, addTableFilter) keep a sub-row when it or one of its descendants matches. Registering the filter plugin before expand filters the tree first; either order yields the same visible rows.
• With addPagination, expanded children count toward the page size, so expanding a row can push later rows onto the next page.

Plugin State

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { expandedIds, getRowState } = pluginStates.expand

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { expandedIds, getRowState } = pluginStates.expand

expandedIds: RecordSet

The expanded row ids. Read expandedIds.current (a Record<string, boolean> holding only true entries), or change it with add(id), remove(id), toggle(id), addAll(ids), removeAll(ids) and clear(). Assigning expandedIds.current replaces the whole set.

getRowState: (row) => ExpandedRowsRowState

Returns the expansion state of a BodyRow:

• isExpanded: Box<boolean>: writing adds or removes the row’s id in expandedIds
• canExpand: boolean: whether the row currently has sub-rows. Read it from the state object (getRowState(row).canExpand) when you render; a value you destructured earlier is a snapshot.
• isAllSubRowsExpanded: ReadonlyBox<boolean>

The state holds nothing of its own (it reads expandedIds), so it is safe to call anywhere, including in a template. The same row object always returns the same view.

<!-- ExpandIndicator.svelte, rendered with createRender(ExpandIndicator, getRowState(row)) -->
<script lang="ts">
    import type { Box } from '@humanspeak/svelte-headless-table'
    const { isExpanded, canExpand }: { isExpanded: Box<boolean>; canExpand: boolean } = $props()
</script>

{#if canExpand}
    <button onclick={() => (isExpanded.current = !isExpanded.current)}>
        {isExpanded.current ? 'Collapse' : 'Expand'}
    </button>
{/if}

<!-- ExpandIndicator.svelte, rendered with createRender(ExpandIndicator, getRowState(row)) -->
<script lang="ts">
    import type { Box } from '@humanspeak/svelte-headless-table'
    const { isExpanded, canExpand }: { isExpanded: Box<boolean>; canExpand: boolean } = $props()
</script>

{#if canExpand}
    <button onclick={() => (isExpanded.current = !isExpanded.current)}>
        {isExpanded.current ? 'Collapse' : 'Expand'}
    </button>
{/if}

Examples

Simple row expanding

Simple grouping by column

{
  "groupByIds": []
}