Table·hook·@astryxdesign/core

useTableSelectionState

State management companion for useTableSelection. Returns selectionConfig for the behaviour plugin plus selectionState for selection-aware UI such as TableSelectionToolbar. Handles disabled/selectable row filtering for select-all automatically: disabled rows are frozen (preserved across select-all/deselect-all), non-selectable rows are excluded.

Open in Playground @astryxdesign/core/Table

Signature

Call shape

useTableSelectionState()

Showcases and examples

1 documented example

Table — Row Selection

Table with row selection checkboxes and a select-all header checkbox.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · table-selectable-table

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {useState} from 'react';
import {
  Table,
  useTableSelection,
  useTableSelectionState,
  proportional,
} from '@astryxdesign/core/Table';
import type {TableColumn} from '@astryxdesign/core/Table';

interface User extends Record<string, unknown> {
  id: string;
  name: string;
  email: string;
  role: string;
}

const users: User[] = [
  {id: '1', name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
  {id: '2', name: 'Bob', email: 'bob@example.com', role: 'Designer'},
  {id: '3', name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
  {id: '4', name: 'Diana', email: 'diana@example.com', role: 'Engineer'},
  {id: '5', name: 'Eve', email: 'eve@example.com', role: 'Admin'},
];

const columns: TableColumn<User>[] = [
  {key: 'name', header: 'Name', width: proportional(1)},
  {key: 'email', header: 'Email', width: proportional(2)},
  {key: 'role', header: 'Role', width: proportional(1)},
];

export default function TableSelectableTable() {
  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());

  const {selectionConfig} = useTableSelectionState<User>({
    data: users,
    idKey: 'id',
    selectedKeys,
    setSelectedKeys,
  });
  const selectionPlugin = useTableSelection<User>(selectionConfig);

  return (
    <Table
      data={users}
      columns={columns}
      idKey="id"
      plugins={{selection: selectionPlugin}}
    />
  );
}

Usage

Typed props

Prop	Type and behavior
`data`	`T[]` · required The full data array rendered in the table.
`idKey`	`(keyof T & string) \| ((item: T) => string)` · required Key extractor: property name or function returning a unique string ID.
`selectedKeys`	`Set<string>` · required Controlled set of selected item IDs.
`setSelectedKeys`	`Dispatch<SetStateAction<Set<string>>>` · required Setter for the controlled selected keys.
`getIsItemSelectable`	`(item: T) => boolean` · default () => true Should this row show a checkbox? Non-selectable rows are excluded from select-all.
`getIsItemEnabled`	`(item: T) => boolean` · default () => true Is this row checkbox interactive? Disabled rows are frozen: select-all preserves their state.