addExpandedRows

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({ ... }),
});

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

Options passed into column definitions.

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

Extensions to the view model. Subscribe to .props().

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.expand}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.expand}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.expand}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.expand}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

Plugin State

State provided by addExpandedRows.

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

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

`expandedIds: Writable<Record<string, boolean>>`

Active expanded rows mapping.

`getRowState: (row) => ExpandedRowsRowState`

Returns state for a given BodyRow with:

isExpanded: Writable<boolean>
canExpand: Readable<boolean>
isAllSubRowsExpanded: Readable<boolean>

Examples

Simple row expanding

	Name (0 users)		Info
	First Name	Last Name	Age	Status	Visits	Profile Progress
➡️	Ricky	Mertz	43	complicated	42	33
➡️	Roberto	Kling	30	single	62	58
➡️	Helene	Ruecker	53	single	42	13
➡️	Sharon	Grady	42	single	43	67
➡️	Emerald	Ebert	40	relationship	20	94
➡️	Anjali	Prosacco	64	single	86	11
➡️	Dean	Reinger	36	complicated	45	70
➡️	Myrtice	Kemmer	41	single	20	98
➡️	Pasquale	Fay	64	complicated	95	51
➡️	Major	Medhurst	58	relationship	26	44

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Janae	Lind-Kuvalis	21	single	27	50
Arthur	Effertz	39	complicated	94	2
Jonas	Ledner	54	relationship	67	47
Josefina	Runte	33	complicated	57	27
Gillian	Jerde	61	complicated	18	74
Kaycee	Bosco	52	single	52	70
Elliot	Wintheiser	63	single	85	47
Jessyca	Collins	34	relationship	32	30
Nona	Koelpin	55	single	89	68
Sherman	Schinner	52	relationship	14	66
Ivy	Schuster	54	complicated	0	42
Lisa	Champlin	29	relationship	66	13
Phillip	Lemke	56	relationship	98	27
Claudie	Sporer	26	complicated	67	81
Elena	Adams	35	relationship	6	15
Guy	McLaughlin	63	relationship	100	24
Jessie	Monahan	59	relationship	2	27
Ali	Hessel	38	complicated	18	52
Candida	Hodkiewicz	27	relationship	92	83
Jazmin	Walker	36	single	65	60
Trycia	Pacocha	52	single	66	14
Kent	Schuppe-Nienow	54	relationship	18	31
Sylvan	Braun	50	relationship	82	63
Roderick	Langworth	48	complicated	26	85
Bradly	Romaguera	44	relationship	46	90
Allan	Trantow	46	relationship	34	99
Gina	Hansen	60	relationship	65	33
Jalyn	Tromp	25	single	78	13
Trevion	Ledner	22	relationship	10	15
Una	Carter	28	complicated	77	94