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
➡️	Ron	Mertz	43	complicated	42	33
➡️	Rebekah	Kling	30	single	62	58
➡️	Irma	Ruecker	53	single	42	13
➡️	Shanna	Grady	42	single	43	67
➡️	Elody	Ebert	40	relationship	20	94
➡️	Araceli	Prosacco	64	single	86	11
➡️	David	Reinger	36	complicated	45	70
➡️	Nayeli	Kemmer	41	single	20	98
➡️	Randy	Fay	64	complicated	95	51
➡️	Mathew	Medhurst	58	relationship	26	44

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Ignatius	Lind-Kuvalis	21	single	27	50
Arthur	Effertz	39	complicated	94	2
Julio	Ledner	54	relationship	67	47
Julie	Runte	33	complicated	57	27
Gabe	Jerde	61	complicated	18	74
Judd	Bosco	52	single	52	70
Elijah	Wintheiser	63	single	85	47
Joy	Collins	34	relationship	32	30
Patti	Koelpin	55	single	89	68
Shawn	Schinner	52	relationship	14	66
Hillary	Schuster	54	complicated	0	42
Lydia	Champlin	29	relationship	66	13
Raymond	Lemke	56	relationship	98	27
Cletus	Sporer	26	complicated	67	81
Elvira	Adams	35	relationship	6	15
Hildegard	McLaughlin	63	relationship	100	24
Jade	Monahan	59	relationship	2	27
Alejandrin	Hessel	38	complicated	18	52
Carleton	Hodkiewicz	27	relationship	92	83
Joanne	Walker	36	single	65	60
Ubaldo	Pacocha	52	single	66	14
Leo	Schuppe-Nienow	54	relationship	18	31
Steven	Braun	50	relationship	82	63
Roosevelt	Langworth	48	complicated	26	85
Augustus	Romaguera	44	relationship	46	90
Allen	Trantow	46	relationship	34	99
Gabriella	Hansen	60	relationship	65	33
Hailee	Tromp	25	single	78	13
Tom	Ledner	22	relationship	10	15
Tracey	Carter	28	complicated	77	94