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
➡️	Nellie	Pollich	48	single	76	5
➡️	Easton	Rath	25	relationship	3	60
➡️	Maurine	Davis	49	relationship	2	46
➡️	Samanta	White	38	single	41	43
➡️	Sylvan	Hills	19	single	3	75
➡️	Bernhard	Schimmel	39	single	55	19
➡️	Trisha	Rippin	60	relationship	33	75
➡️	Aric	Weimann	29	complicated	93	20
➡️	Sabrina	Shields	49	complicated	10	81
➡️	Jayne	Hagenes	44	complicated	71	78

Simple grouping by column

{
  "$groupByIds": []
}

Name (0 users)		Info
First Name	Last Name	Age	Status	Visits	Profile Progress
Jules	Wolff	21	relationship	21	83
Sienna	Kovacek	45	single	99	57
Velda	Grimes-Quigley	23	complicated	96	71
Anne	Krajcik	20	relationship	69	78
Walton	Runolfsson	26	relationship	24	24
Laurianne	Toy	44	single	40	85
Haley	Gerlach	56	relationship	23	44
Fredrick	Ernser	35	complicated	7	94
Aiyana	Stamm	44	single	13	65
Keegan	Bauch	65	single	20	47
Sydney	Erdman	18	single	54	59
Ansel	Huels	61	complicated	4	12
Jasmin	Rowe	44	complicated	56	61
Coby	Kuhlman	36	relationship	61	33
Domingo	Reilly	43	complicated	92	33
Mariano	Larson	21	relationship	64	58
Allan	Schuppe	21	complicated	80	58
Frances	Ankunding	63	relationship	94	78
Casimer	Hayes	23	complicated	59	56
Bennett	Schneider	60	complicated	64	34
Lelia	Kilback	21	complicated	46	87
Delphine	Hagenes	51	single	98	47
Andy	O'Reilly	42	complicated	79	23
Willow	Hirthe	58	complicated	24	4
Weston	Beahan	50	single	21	40
Llewellyn	Senger	20	relationship	24	56
Terrence	Yundt	19	relationship	93	15
Rachael	Mayer	45	relationship	19	98
Jessie	Jones	59	complicated	40	84
Vicenta	Langworth	59	complicated	37	12