addSelectedRows

addSelectedRows keeps track of selected items in the table. Works with sub-rows.

Options

const table = createTable(data, {
  select: addSelectedRows({ ... }),
});

const table = createTable(data, {
  select: addSelectedRows({ ... }),
});

initialSelectedDataIds?: Record<string, boolean>

Initial selected row data ids (by row.dataId). Default {}.

linkDataSubRows?: boolean

Link parent/sub-row selection when updating. Default true.

Column Options

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      select: { ... },
    },
  }),
]);

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      select: { ... },
    },
  }),
]);

Prop Set

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.select}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.select}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.select}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.select}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

BodyRow props

• selected: boolean
• someSubRowsSelected: boolean
• allSubRowsSelected: boolean

Plugin State

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.select;

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.select;

selectedDataIds: Writable<Record<string, boolean>>

allRowsSelected: Writable<boolean>

someRowsSelected: Readable<boolean>

allPageRowsSelected: Writable<boolean>

somePageRowsSelected: Readable<boolean>

getRowState: (row) => SelectedRowsRowState

Examples

{
  "$selectedDataIds": {}
}