@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7

package/src/Table/index.ts

@@ -28,10 +28,12 @@ export {useTableColumnResize} from './plugins/columnResize';
 export {useTableStickyColumns} from './plugins/stickyColumns';
 export {useTableGroupedRows} from './plugins/groupedRows';
 export {useTableRowIndex} from './plugins/rowIndex';
+export {useTableRowStatus} from './plugins/rowStatus';
 export {
   useTableRowExpansion,
   useTableRowExpansionState,
 } from './plugins/rowExpansion';
+export {useTableTreeData, useTableTreeState} from './plugins/tree';
 export {resolveContextActions} from './tableContextMenu';
 export {
   useTableFiltering,
@@ -109,6 +111,16 @@ export type {
   UseTableGroupedRowsConfig,
   UseTableGroupedRowsResult,
 } from './plugins/groupedRows';
+export type {
+  UseTableRowStatusConfig,
+  TableRowStatus,
+} from './plugins/rowStatus';
+export type {
+  TableTreeRowMeta,
+  UseTableTreeDataConfig,
+  UseTableTreeStateConfig,
+  UseTableTreeStateResult,
+} from './plugins/tree';
 export type {
   UseTableFilteringConfig,
   TableFilterState,

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -325,8 +325,12 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
                   }}
                   aria-label={
                     collapsed
-                      ? t('@astryx.tableGroupedRows.expandGroup', {groupKey: header.groupKey})
-                      : t('@astryx.tableGroupedRows.collapseGroup', {groupKey: header.groupKey})
+                      ? t('@astryx.tableGroupedRows.expandGroup', {
+                          groupKey: header.groupKey,
+                        })
+                      : t('@astryx.tableGroupedRows.collapseGroup', {
+                          groupKey: header.groupKey,
+                        })
                   }
                   aria-expanded={!collapsed}>
                   <span

package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {render, renderHook, screen, fireEvent} from '@testing-library/react';
 import {useState} from 'react';
 import {Table} from '../../Table';
 import type {TableColumn} from '../../types';
@@ -153,3 +153,92 @@ describe('useTableRowExpansion', () => {
     expect(screen.queryByText('File B1')).not.toBeInTheDocument();
   });
 });
+
+describe('useTableRowExpansionState cycle guard', () => {
+  /** A row whose children array contains the row itself (plus a real child). */
+  function makeSelfReferential(): TreeItem[] {
+    const x: TreeItem = {id: 'x', name: 'Self', children: []};
+    const y: TreeItem = {id: 'y', name: 'Leaf Y', children: []};
+    x.children.push(x, y);
+    return [x];
+  }
+
+  /** root -> child -> grand, where grand's children point back at root. */
+  function makeDeepCycle(): TreeItem[] {
+    const root: TreeItem = {id: 'root', name: 'Root', children: []};
+    const child: TreeItem = {id: 'child', name: 'Child', children: []};
+    const grand: TreeItem = {id: 'grand', name: 'Grand', children: []};
+    root.children.push(child);
+    child.children.push(grand);
+    grand.children.push(root);
+    return [root];
+  }
+
+  function renderState(baseData: TreeItem[], expandedKeys: Set<string>) {
+    const setExpandedKeys = vi.fn();
+    const hook = renderHook(() =>
+      useTableRowExpansionState<TreeItem>({
+        baseData,
+        getChildren: item => item.children,
+        getRowKey: item => item.id,
+        expandedKeys,
+        setExpandedKeys,
+      }),
+    );
+    return {hook, setExpandedKeys};
+  }
+
+  it('terminates on a self-referential expanded row and flattens each key once', () => {
+    const {hook} = renderState(makeSelfReferential(), new Set(['x']));
+    const {data, expansionConfig} = hook.result.current;
+    expect(data.map(item => item.id)).toEqual(['x', 'y']);
+    expect(expansionConfig.getDepth?.(data[0])).toBe(0);
+    expect(expansionConfig.getDepth?.(data[1])).toBe(1);
+  });
+
+  it('terminates on a deeper cycle back to the root and flattens each key once', () => {
+    const {hook} = renderState(
+      makeDeepCycle(),
+      new Set(['root', 'child', 'grand']),
+    );
+    const {data, expansionConfig} = hook.result.current;
+    expect(data.map(item => item.id)).toEqual(['root', 'child', 'grand']);
+    expect(expansionConfig.getDepth?.(data[0])).toBe(0);
+    expect(expansionConfig.getDepth?.(data[1])).toBe(1);
+    expect(expansionConfig.getDepth?.(data[2])).toBe(2);
+    // The cycle guard keeps isAllExpanded computable — true, not a crash.
+    expect(expansionConfig.isAllExpanded).toBe(true);
+  });
+
+  it('terminates when collecting allExpandableKeys on cyclic data with nothing expanded', () => {
+    const {hook, setExpandedKeys} = renderState(
+      makeDeepCycle(),
+      new Set<string>(),
+    );
+    const {data, expansionConfig} = hook.result.current;
+    expect(data.map(item => item.id)).toEqual(['root']);
+    expansionConfig.onToggleExpandAll?.(true);
+    const nextKeys = setExpandedKeys.mock.calls[0][0] as Set<string>;
+    expect(Array.from(nextKeys)).toEqual(['root', 'child', 'grand']);
+  });
+
+  it('re-walks a shared child under each expanded parent (ancestor-path, not visited-set, semantics)', () => {
+    const leaf: TreeItem = {id: 'leaf', name: 'Leaf', children: []};
+    const shared: TreeItem = {id: 's', name: 'Shared', children: [leaf]};
+    const p1: TreeItem = {id: 'p1', name: 'Parent 1', children: [shared]};
+    const p2: TreeItem = {id: 'p2', name: 'Parent 2', children: [shared]};
+    const {hook} = renderState([p1, p2], new Set(['p1', 'p2', 's']));
+    // 's' is on neither parent's ancestor path, so it must flatten under
+    // both — the guard only skips true cycles, matching pre-guard behavior
+    // for acyclic (DAG-shaped) data.
+    const {data} = hook.result.current;
+    expect(data.map(item => item.id)).toEqual([
+      'p1',
+      's',
+      'leaf',
+      'p2',
+      's',
+      'leaf',
+    ]);
+  });
+});

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -141,12 +141,19 @@ export function useTableRowExpansionState<T extends Record<string, unknown>>({
 
   const depthMap = useMemo(() => {
     const map = new Map<string, number>();
+    // Ancestor keys on the current walk path — guards against cyclic data.
+    const path = new Set<string>();
     function walk(items: T[], depth: number) {
       for (const item of items) {
         const key = getRowKey(item);
+        if (path.has(key)) {
+          continue; // cyclic edge — skip
+        }
         map.set(key, depth);
         if (expandedKeys.has(key)) {
+          path.add(key);
           walk(getChildren(item), depth + 1);
+          path.delete(key);
         }
       }
     }
@@ -156,12 +163,19 @@ export function useTableRowExpansionState<T extends Record<string, unknown>>({
 
   const data = useMemo(() => {
     const result: T[] = [];
+    // Ancestor keys on the current walk path — guards against cyclic data.
+    const path = new Set<string>();
     function walk(items: T[]) {
       for (const item of items) {
-        result.push(item);
         const key = getRowKey(item);
+        if (path.has(key)) {
+          continue; // cyclic edge — skip
+        }
+        result.push(item);
         if (expandedKeys.has(key)) {
+          path.add(key);
           walk(getChildren(item));
+          path.delete(key);
         }
       }
     }
@@ -172,11 +186,19 @@ export function useTableRowExpansionState<T extends Record<string, unknown>>({
   // Every expandable key across the whole tree (drives expand-all).
   const allExpandableKeys = useMemo(() => {
     const keys: string[] = [];
+    // Ancestor keys on the current walk path — guards against cyclic data.
+    const path = new Set<string>();
     function walk(items: T[]) {
       for (const item of items) {
+        const key = getRowKey(item);
+        if (path.has(key)) {
+          continue; // cyclic edge — skip
+        }
         if (isExpandable(item)) {
-          keys.push(getRowKey(item));
+          keys.push(key);
+          path.add(key);
           walk(getChildren(item));
+          path.delete(key);
         }
       }
     }
@@ -399,7 +421,11 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
           <ExpansionChevron
             isExpanded={isExpanded}
             onToggle={() => onToggle(key)}
-            ariaLabel={isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')}
+            ariaLabel={
+              isExpanded
+                ? t('@astryx.tableRowExpansion.collapseRow')
+                : t('@astryx.tableRowExpansion.expandRow')
+            }
           />
         );
       },
@@ -457,7 +483,11 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 <ExpansionChevron
                   isExpanded={isExpanded}
                   onToggle={() => onToggle(key)}
-                  ariaLabel={isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')}
+                  ariaLabel={
+                    isExpanded
+                      ? t('@astryx.tableRowExpansion.collapseRow')
+                      : t('@astryx.tableRowExpansion.expandRow')
+                  }
                 />
               ) : (
                 <span {...stylex.props(expansionStyles.placeholder)} />
@@ -499,7 +529,9 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 {...stylex.props(expansionStyles.chevronButton)}
                 onClick={() => onToggleExpandAll(!allExpanded)}
                 aria-label={
-                  allExpanded ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows')
+                  allExpanded
+                    ? t('@astryx.tableRowExpansion.collapseAllRows')
+                    : t('@astryx.tableRowExpansion.expandAllRows')
                 }>
                 <span
                   {...stylex.props(

package/src/Table/plugins/rowStatus/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {useTableRowStatus} from './useTableRowStatus';
+export type {
+  UseTableRowStatusConfig,
+  TableRowStatus,
+} from './useTableRowStatus';

package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx

@@ -0,0 +1,138 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, within} from '@testing-library/react';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableRowStatus, type TableRowStatus} from './useTableRowStatus';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  state: 'error' | 'warning' | 'ok' | 'done';
+}
+
+const data: Row[] = [
+  {id: 'a', name: 'Alice', state: 'error'},
+  {id: 'b', name: 'Bob', state: 'ok'},
+  {id: 'c', name: 'Carol', state: 'warning'},
+];
+
+const columns: TableColumn<Row>[] = [{key: 'name', header: 'Name'}];
+
+function getStatus(item: Row): TableRowStatus | null {
+  if (item.state === 'error') {
+    return {color: 'red', label: 'Error'};
+  }
+  if (item.state === 'warning') {
+    return {color: 'orange', label: 'Warning'};
+  }
+  return null;
+}
+
+function Harness({
+  rows = data,
+  statusFn = getStatus,
+}: {
+  rows?: Row[];
+  statusFn?: (item: Row) => TableRowStatus | null;
+}) {
+  const rowStatus = useTableRowStatus<Row>({getStatus: statusFn});
+  return (
+    <Table data={rows} columns={columns} idKey="id" plugins={{rowStatus}} />
+  );
+}
+
+describe('useTableRowStatus', () => {
+  it('prepends a narrow status column with an empty header', () => {
+    render(<Harness />);
+    const headers = screen.getAllByRole('columnheader');
+    // Status column is first; its header is empty.
+    expect(headers[0]).toHaveAttribute('data-column-key', '__rowStatus');
+    expect(headers[0].textContent).toBe('');
+  });
+
+  it('renders a labeled dot for rows with a status', () => {
+    render(<Harness />);
+    expect(screen.getByRole('img', {name: 'Error'})).toBeInTheDocument();
+    expect(screen.getByRole('img', {name: 'Warning'})).toBeInTheDocument();
+  });
+
+  it('renders a dot (not an icon) by default', () => {
+    render(<Harness />);
+    // Default (no icon) renders a plain colored dot: no svg in the indicator.
+    const dot = screen.getByRole('img', {name: 'Error'});
+    expect(dot.querySelector('svg')).toBeNull();
+  });
+
+  it('renders no indicator for rows returning null', () => {
+    render(<Harness />);
+    const rows = screen.getAllByRole('row');
+    // rows[2] is Bob (state ok): no status indicator in his status cell.
+    const bob = rows[2];
+    expect(within(bob).getByText('Bob')).toBeInTheDocument();
+    expect(within(bob).queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('maps a semantic color name to its icon color token', () => {
+    render(<Harness />);
+    const errorDot = screen.getByRole('img', {name: 'Error'});
+    // 'red' resolves to var(--color-icon-red); StyleX emits it on the inline
+    // style of the inner dot element.
+    const dot = errorDot.querySelector('span');
+    expect(dot?.getAttribute('style')).toContain('--color-icon-red');
+  });
+
+  it('passes through a raw CSS color as an escape hatch', () => {
+    render(
+      <Harness
+        statusFn={item =>
+          item.state === 'error' ? {color: 'rgb(1, 2, 3)', label: 'Raw'} : null
+        }
+      />,
+    );
+    const indicator = screen.getByRole('img', {name: 'Raw'});
+    const dot = indicator.querySelector('span');
+    expect(dot?.getAttribute('style')).toContain('rgb(1, 2, 3)');
+  });
+
+  it('renders an icon as the status signifier when icon is provided', () => {
+    render(
+      <Harness
+        statusFn={item =>
+          item.state === 'error'
+            ? {color: 'red', icon: 'error', label: 'Error'}
+            : null
+        }
+      />,
+    );
+    // Icon-mode still exposes the accessible label via role=img.
+    const indicator = screen.getByRole('img', {name: 'Error'});
+    expect(indicator).toBeInTheDocument();
+    // An SVG icon is rendered inside the indicator (dot mode has no svg).
+    expect(indicator.querySelector('svg')).not.toBeNull();
+  });
+
+  it('exposes the required label as the accessible name in dot mode', () => {
+    render(
+      <Harness
+        statusFn={item =>
+          item.state === 'error' ? {color: 'red', label: 'Error'} : null
+        }
+      />,
+    );
+    // Label is required, so every dot is announced via role=img with its name.
+    const indicator = screen.getByRole('img', {name: 'Error'});
+    expect(indicator).toBeInTheDocument();
+    // Dot mode renders no svg (that is icon mode).
+    expect(indicator.querySelector('svg')).toBeNull();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  it('renders the status header with empty data and no indicators', () => {
+    render(<Harness rows={[]} />);
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers[0]).toHaveAttribute('data-column-key', '__rowStatus');
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+});

package/src/Table/plugins/rowStatus/useTableRowStatus.tsx

@@ -0,0 +1,189 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableRowStatus.tsx
+ * @input React, StyleX, Icon, Table types
+ * @output Exports useTableRowStatus hook + config type
+ * @position Row-status plugin; consumed by Table via plugins prop
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/index.ts (exports)
+ */
+
+import {useMemo} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Icon, type IconColor, type IconName} from '../../../Icon';
+import {Tooltip} from '../../../Tooltip';
+import type {TableColumn, TablePlugin} from '../../types';
+
+/**
+ * Semantic status colors, resolved to the design system's icon color tokens.
+ * Prefer these over raw CSS so status colors stay consistent with the theme.
+ */
+export type TableRowStatusColor =
+  | 'accent'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'red'
+  | 'orange'
+  | 'green'
+  | 'yellow'
+  | 'blue'
+  | 'gray';
+
+const SEMANTIC_COLORS: Record<TableRowStatusColor, string> = {
+  accent: 'var(--color-icon-accent)',
+  success: 'var(--color-icon-green)',
+  error: 'var(--color-icon-red)',
+  warning: 'var(--color-icon-orange)',
+  red: 'var(--color-icon-red)',
+  orange: 'var(--color-icon-orange)',
+  green: 'var(--color-icon-green)',
+  yellow: 'var(--color-icon-yellow)',
+  blue: 'var(--color-icon-blue)',
+  gray: 'var(--color-icon-gray)',
+};
+
+/** Icon colors that map cleanly from a semantic status color. */
+const ICON_COLOR_BY_STATUS: Record<TableRowStatusColor, IconColor> = {
+  accent: 'accent',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  red: 'red',
+  orange: 'warning',
+  green: 'green',
+  yellow: 'warning',
+  blue: 'blue',
+  gray: 'gray',
+};
+
+/**
+ * A row's status indicator. `color` accepts a semantic status color
+ * (mapped to a theme token) or any raw CSS color string as an escape hatch.
+ * By default the plugin renders a colored status dot. Provide `icon` to signal
+ * status by shape as well as color, which is more accessible when several
+ * statuses coexist. `label` is required so the status is never conveyed by
+ * color alone — it names the indicator for assistive technology and shows on
+ * hover. Return `null` for rows with no status.
+ */
+export interface TableRowStatus {
+  /** Semantic status color (preferred) or a raw CSS color string. */
+  color: TableRowStatusColor | (string & {});
+  /** Optional icon rendered as the signifier instead of the dot (shape as an a11y differentiator). */
+  icon?: IconName;
+  /**
+   * Accessible name for the status, announced to assistive technology and
+   * shown in a tooltip on hover. Required: a status must never be conveyed by
+   * color alone.
+   */
+  label: string;
+}
+
+/** Configuration for {@link useTableRowStatus}. */
+export interface UseTableRowStatusConfig<T extends Record<string, unknown>> {
+  /**
+   * Derive the status indicator for a row. Return `null` for no indicator.
+   * Memoize with `useCallback` for a stable plugin identity across renders.
+   *
+   * @example
+   * ```
+   * getStatus: row =>
+   *   row.hasError ? {color: 'error', icon: 'error', label: 'Error'} : null
+   * ```
+   */
+  getStatus: (item: T) => TableRowStatus | null;
+}
+
+// The status column holds a small centered dot (or an icon when provided).
+// A fixed narrow width keeps every row's indicator aligned in one gutter.
+const STATUS_COLUMN_WIDTH = {type: 'pixel' as const, value: 28};
+
+/** Resolve a semantic color name to a token, or pass a raw CSS color through. */
+function resolveColor(color: string): string {
+  return (SEMANTIC_COLORS as Record<string, string>)[color] ?? color;
+}
+
+const styles = stylex.create({
+  // Centers the dot or icon within the narrow status column.
+  wrap: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: (color: string) => ({
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: color,
+    flexShrink: 0,
+  }),
+});
+
+/**
+ * Returns a {@link TablePlugin} that prepends a narrow column signaling per-row
+ * status: a colored status dot by default, or an icon when `icon` is provided
+ * (shape + color is more accessible than color alone).
+ *
+ * @example
+ * ```
+ * const rowStatus = useTableRowStatus<Row>({
+ *   getStatus: row =>
+ *     row.state === 'error'
+ *       ? {color: 'error', icon: 'error', label: 'Error'}
+ *       : null,
+ * });
+ * <Table data={data} columns={columns} idKey="id" plugins={{rowStatus}} />;
+ * ```
+ */
+export function useTableRowStatus<T extends Record<string, unknown>>(
+  config: UseTableRowStatusConfig<T>,
+): TablePlugin<T> {
+  const {getStatus} = config;
+
+  return useMemo(
+    (): TablePlugin<T> => ({
+      transformColumns(columns) {
+        const statusColumn: TableColumn<T> = {
+          key: '__rowStatus',
+          header: '',
+          width: STATUS_COLUMN_WIDTH,
+          resizable: false,
+          renderCell: (item: T) => {
+            const status = getStatus(item);
+            if (!status) {
+              return null;
+            }
+            const signifier = status.icon ? (
+              <Icon
+                icon={status.icon}
+                size="xsm"
+                color={
+                  ICON_COLOR_BY_STATUS[status.color as TableRowStatusColor] ??
+                  'primary'
+                }
+              />
+            ) : (
+              <span {...stylex.props(styles.dot(resolveColor(status.color)))} />
+            );
+            return (
+              <Tooltip content={status.label}>
+                <span
+                  {...stylex.props(styles.wrap)}
+                  role="img"
+                  aria-label={status.label}>
+                  {signifier}
+                </span>
+              </Tooltip>
+            );
+          },
+        };
+        return [statusColumn, ...columns];
+      },
+    }),
+    [getStatus],
+  );
+}

package/src/Table/plugins/selection/useTableSelection.test.tsx

@@ -40,9 +40,11 @@ const selectableColumns: TableColumn<SelectableUser>[] = [
 function SelectionTable({
   getIsItemSelectable,
   getIsItemEnabled,
+  getRowLabel,
 }: {
   getIsItemSelectable?: (item: SelectableUser) => boolean;
   getIsItemEnabled?: (item: SelectableUser) => boolean;
+  getRowLabel?: (item: SelectableUser) => string;
 }) {
   const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
 
@@ -75,6 +77,7 @@ function SelectionTable({
     },
     getIsItemSelectable,
     getIsItemEnabled,
+    getRowLabel,
   });
 
   return (
@@ -109,6 +112,19 @@ describe('useTableSelection', () => {
     expect(rowCheckboxes).toHaveLength(3);
   });
 
+  it('derives per-row accessible names from getRowLabel', () => {
+    render(<SelectionTable getRowLabel={item => item.name} />);
+    expect(screen.getByLabelText('Select Alice')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select Bob')).toBeInTheDocument();
+    expect(screen.getByLabelText('Select Charlie')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Select row')).not.toBeInTheDocument();
+  });
+
+  it('keeps the "Select all rows" header label when getRowLabel is provided', () => {
+    render(<SelectionTable getRowLabel={item => item.name} />);
+    expect(screen.getByLabelText('Select all rows')).toBeInTheDocument();
+  });
+
   it('toggles individual row selection on click', async () => {
     const user = userEvent.setup();
     render(<SelectionTable />);

package/src/Table/plugins/selection/useTableSelection.tsx

@@ -68,6 +68,18 @@ export interface UseTableSelectionConfig<T extends Record<string, unknown>> {
   getIsItemSelectable?: (item: T) => boolean;
   /** Is this row's checkbox interactive? Disabled rows show disabled checkbox. @default () => true */
   getIsItemEnabled?: (item: T) => boolean;
+  /**
+   * Derive a human-readable identity for a row, used in the row checkbox's
+   * hidden label as `Select ${getRowLabel(item)}`. Without it, every row
+   * checkbox announces an undifferentiated "Select row" to screen readers.
+   *
+   * @example
+   * ```
+   * getRowLabel: item => item.name
+   * // Checkbox accessible names: "Select Alice", "Select Bob", ...
+   * ```
+   */
+  getRowLabel?: (item: T) => string;
 }
 
 // =============================================================================
@@ -235,6 +247,7 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
   const isSelected = useIsItemSelected(store, item);
   const selectable = config.getIsItemSelectable?.(item) ?? true;
   const enabled = config.getIsItemEnabled?.(item) ?? true;
+  const rowLabel = config.getRowLabel?.(item);
 
   if (!selectable) {
     return null;
@@ -242,7 +255,11 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
 
   return (
     <CheckboxInput
-      label={t('@astryx.table.selection.selectRow')}
+      label={
+        rowLabel != null
+          ? t('@astryx.table.selection.selectRowNamed', {label: rowLabel})
+          : t('@astryx.table.selection.selectRow')
+      }
       isLabelHidden
       value={isSelected}
       onChange={() =>