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
➡️	Roman	Mertz	43	complicated	42	33
➡️	Reuben	Kling	30	single	62	58
➡️	Jaime	Ruecker	53	single	42	13
➡️	Shayna	Grady	42	single	43	67
➡️	Elmore	Ebert	40	relationship	20	94
➡️	Ariane	Prosacco	64	single	86	11
➡️	Delbert	Reinger	36	complicated	45	70
➡️	Nichole	Kemmer	41	single	20	98
➡️	Randolph	Fay	64	complicated	95	51
➡️	Martin	Medhurst	58	relationship	26	44

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Ibrahim	Lind-Kuvalis	21	single	27	50
Arthur	Effertz	39	complicated	94	2
Julius	Ledner	54	relationship	67	47
Julia	Runte	33	complicated	57	27
Fritz	Jerde	61	complicated	18	74
Juanita	Bosco	52	single	52	70
Emilio	Wintheiser	63	single	85	47
Josephine	Collins	34	relationship	32	30
Patsy	Koelpin	55	single	89	68
Shaun	Schinner	52	relationship	14	66
Hilario	Schuster	54	complicated	0	42
Lucy	Champlin	29	relationship	66	13
Raymond	Lemke	56	relationship	98	27
Clint	Sporer	26	complicated	67	81
Erica	Adams	35	relationship	6	15
Hester	McLaughlin	63	relationship	100	24
Jadon	Monahan	59	relationship	2	27
Alexander	Hessel	38	complicated	18	52
Carolanne	Hodkiewicz	27	relationship	92	83
Joanne	Walker	36	single	65	60
Tyson	Pacocha	52	single	66	14
Lee	Schuppe-Nienow	54	relationship	18	31
Steven	Braun	50	relationship	82	63
Ronnie	Langworth	48	complicated	26	85
Baby	Romaguera	44	relationship	46	90
Alonzo	Trantow	46	relationship	34	99
Gabe	Hansen	60	relationship	65	33
Gus	Tromp	25	single	78	13
Tom	Ledner	22	relationship	10	15
Traci	Carter	28	complicated	77	94