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
➡️	Ryann	Schuster	52	single	99	20
➡️	Yasmine	Pollich	50	relationship	52	25
➡️	Vickie	Kshlerin	61	complicated	84	78
➡️	Verlie	Wuckert	34	complicated	91	46
➡️	Hayley	Abernathy	47	relationship	30	57
➡️	Alena	Boehm	61	single	12	45
➡️	Bartholome	VonRueden	62	complicated	12	0
➡️	Camden	Hauck	26	complicated	2	82
➡️	Fred	Keeling	48	relationship	85	15
➡️	Tyshawn	Hessel	35	complicated	73	36

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Jessy	Hagenes	34	complicated	4	77
Ezra	Cremin	31	relationship	20	49
Simone	Kilback	51	relationship	63	10
Wilhelmine	Little-Morar	26	complicated	63	95
Thalia	Bahringer	18	single	88	87
Joannie	Schowalter	30	single	48	78
Mekhi	Bauch-Bayer	64	relationship	95	90
Bettye	Daugherty	46	relationship	89	5
Carolina	Weissnat-Hegmann	35	relationship	27	51
Frederick	Wunsch-Hagenes	33	relationship	63	93
Daniella	Johnson	18	complicated	43	33
Dorian	Balistreri	42	relationship	53	63
Tyson	Quigley	18	complicated	4	74
Montana	Anderson	64	single	19	39
Joana	Harvey	49	single	45	12
Delaney	Graham	53	complicated	83	8
Vincenzo	Renner	19	single	57	51
Sasha	O'Hara	25	single	91	63
Justyn	Wunsch	21	single	41	96
Carolyn	Jacobson	25	complicated	98	72
Arne	Ortiz	36	relationship	91	16
Louisa	Hintz	50	complicated	35	31
Jennyfer	Koss	18	single	28	88
Raphaelle	Will	39	single	37	18
Tito	Moore	41	relationship	41	9
Christine	White	59	complicated	19	24
Joannie	Ullrich	34	complicated	6	45
Vincenza	Kiehn	41	single	22	92
Lesley	Brekke	29	complicated	36	57
Nathanael	Heller	60	single	28	75