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
➡️	Sister	Schuster	20	complicated	10	60
➡️	Heaven	Spinka	23	complicated	29	21
➡️	Luisa	Schmitt	37	relationship	25	0
➡️	Jett	Lynch	23	complicated	35	93
➡️	Wilfred	Johns	41	single	20	38
➡️	Felix	Braun	52	complicated	50	66
➡️	Marcelle	Quitzon	29	single	95	33
➡️	Danyka	Bayer	65	single	45	64
➡️	Eryn	Schimmel	58	relationship	95	99
➡️	Angelica	Nitzsche	63	relationship	22	51

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Arden	Kessler	52	complicated	98	54
Antonietta	Kutch	50	relationship	81	38
Edward	Effertz	39	complicated	94	2
Valentina	Lowe	61	single	13	52
Marcelle	Doyle	41	complicated	37	48
Rodrick	Haley	45	complicated	27	45
Madyson	Koelpin	52	relationship	41	91
Naomi	Kautzer	48	relationship	52	41
Audrey	Leffler	51	relationship	96	68
Elroy	Feil	64	complicated	95	85
Ron	Hagenes	40	relationship	74	49
Everett	Gutkowski	25	single	41	45
Peyton	Koelpin	55	single	89	68
Trey	Terry	31	single	48	80
Caitlyn	Bernhard	35	complicated	82	43
Monserrat	Rowe	18	relationship	42	46
Kareem	Shields	63	complicated	12	23
Brennan	Marvin	26	relationship	79	86
Kacey	Wolf	31	single	17	88
Clint	Reichel	58	single	16	67
Katheryn	Barton	31	relationship	81	4
Frances	Cormier	19	complicated	52	70
Brian	McLaughlin	63	relationship	100	24
Rickey	Koch	55	single	87	61
Alberta	Gottlieb	23	single	91	3
Antonette	Johnson	26	relationship	52	54
Myra	Dickinson	35	single	38	20
Rhianna	Hills	29	complicated	45	27
Theresa	O'Hara	46	single	75	6
Tyson	Green	50	relationship	71	66