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
➡️	Maxwell	Kuphal	36	complicated	41	82
➡️	Carol	Beatty	58	complicated	82	100
➡️	Norwood	Bernhard	21	relationship	55	99
➡️	Krystel	Greenholt	53	relationship	24	2
➡️	Gertrude	Hansen	56	complicated	91	67
➡️	Harold	Barrows	59	complicated	11	7
➡️	Sheila	Russel	24	relationship	82	76
➡️	Diego	Koepp	53	complicated	94	63
➡️	Marion	MacGyver	29	complicated	12	83
➡️	Milton	Leannon	52	relationship	37	51

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Leila	Mueller	27	complicated	17	69
Maegan	Parker	57	relationship	99	40
Quinten	Wolff	32	single	68	84
Mozelle	McDermott	26	relationship	37	89
Chandler	Reinger	22	single	39	95
Deangelo	Schuppe	18	single	15	22
Orie	Baumbach	44	complicated	21	64
Sierra	Hills	33	relationship	96	88
Gertrude	Barton	29	complicated	93	98
Modesto	Russel	64	relationship	58	33
Heath	Stiedemann	40	complicated	33	75
Davonte	Kertzmann	44	relationship	10	45
Annabel	Balistreri	60	complicated	48	62
Bobby	Bailey	42	single	80	41
Lia	Predovic-Kihn	24	complicated	29	49
Osbaldo	D'Amore	35	single	22	82
Kay	Hayes	62	relationship	9	65
Andy	Gorczany	55	single	52	15
Audra	Kemmer	62	relationship	93	81
Buck	Davis	65	single	89	22
Forest	Stoltenberg	50	relationship	92	47
Alta	Treutel	28	relationship	22	79
Dallas	Cormier	42	single	98	80
Angie	Schimmel	59	relationship	60	16
Ima	Hessel	28	single	27	51
Verner	Reynolds	50	complicated	92	70
Logan	Carroll	60	single	82	94
Raymond	Borer	56	relationship	51	70
Shirley	Toy	38	relationship	73	67
Sydney	Trantow	37	complicated	32	36