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
➡️	Chyna	Hudson	26	single	98	93
➡️	Wyman	Kiehn	64	single	60	59
➡️	Leda	Ryan	48	relationship	48	44
➡️	Dale	Ward	30	relationship	91	7
➡️	Aric	Schuppe	50	complicated	81	5
➡️	Tamia	Murphy	47	complicated	56	68
➡️	Felicita	Upton	62	single	44	66
➡️	Breanne	Bartoletti	31	complicated	18	75
➡️	Tressie	Schamberger	57	single	51	71
➡️	Tavares	Okuneva	52	complicated	8	71

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Augustus	Pagac	63	complicated	9	49
Myrtice	Rodriguez	55	complicated	4	58
Betty	Schulist	55	complicated	12	87
Vidal	Cremin	25	relationship	78	50
Bert	Funk	53	single	31	64
Percy	Stanton	27	single	11	91
Kristy	Rutherford	55	complicated	9	31
Hillard	Kuhn	51	single	97	20
Effie	Weissnat	55	complicated	90	74
Tyson	Schmitt	53	relationship	84	85
Treva	Kunze	27	relationship	10	19
Dasia	Botsford	43	complicated	70	7
Sammy	Effertz	61	complicated	43	30
Joanny	Langosh	21	relationship	45	18
Manuela	McGlynn	21	relationship	41	67
Willy	Tremblay	22	complicated	65	95
Bret	Connelly	23	complicated	92	85
Dylan	Kris	65	single	79	66
Nikki	Feil	58	complicated	48	14
Destin	Herman	39	complicated	76	76
Cicero	Kertzmann	48	complicated	7	7
Santos	Glover	26	complicated	7	37
Ewell	Kovacek	19	single	21	45
Alex	Hartmann	20	complicated	58	65
Skye	Herzog	44	complicated	1	87
Madisen	Hahn	22	complicated	12	39
Anabelle	Smitham	33	single	91	11
Kamille	Cormier	31	complicated	19	100
Fannie	Krajcik	32	single	81	23
Jewell	Wisoky	26	single	16	63