@astryxdesign/core 0.4.7 → 0.5.0-canary.055e75f

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -20,6 +20,9 @@ import {
   useMemo,
   useState,
   useCallback,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -29,6 +32,10 @@ import {Button} from '../../../Button';
 import {Popover} from '../../../Popover';
 import {TextInput} from '../../../TextInput';
 import {NumberInput} from '../../../NumberInput';
+import {
+  parseNumberInput,
+  resolveNumberInputCommit,
+} from '../../../NumberInput/numberInputCommit';
 import {DateInput} from '../../../DateInput';
 import type {ISODateString} from '../../../utils/dateTypes';
 import {TimeInput} from '../../../TimeInput';
@@ -42,7 +49,7 @@ import type {
   HeaderCellRenderProps,
 } from '../../types';
 import {proportional} from '../../columnUtils';
-import {useTranslator} from '../../../i18n';
+import {useLocale, useTranslator} from '../../../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchField,
@@ -445,6 +452,80 @@ function TextFilterControl({
   );
 }
 
+function useLiveNumberFilter({
+  value,
+  min,
+  max,
+  hasClear,
+  onChange,
+}: {
+  value: number | null;
+  min?: number | null;
+  max?: number | null;
+  hasClear: boolean;
+  onChange: (value: number | null) => void;
+}) {
+  const locale = useLocale();
+  const editStartValueRef = useRef(value);
+
+  const handleChange = useCallback(
+    (nextValue: number | null) => {
+      editStartValueRef.current = nextValue;
+      onChange(nextValue);
+    },
+    [onChange],
+  );
+  const handleFocus = useCallback(() => {
+    editStartValueRef.current = value;
+  }, [value]);
+  const handleInput = useCallback(
+    (event: FormEvent<HTMLElement>) => {
+      const nextValue = parseNumberInput(
+        (event.currentTarget as HTMLInputElement).value,
+        {
+          min,
+          max,
+          locale,
+        },
+      );
+      if (nextValue !== null && nextValue !== value) {
+        onChange(nextValue);
+      }
+    },
+    [locale, max, min, onChange, value],
+  );
+  const restoreRejectedDraft = useCallback(
+    (input: HTMLInputElement) => {
+      const decision = resolveNumberInputCommit(input.value, {
+        min,
+        max,
+        locale,
+        hasClear,
+      });
+      if (decision.type === 'revert' && value !== editStartValueRef.current) {
+        onChange(editStartValueRef.current);
+      }
+    },
+    [hasClear, locale, max, min, onChange, value],
+  );
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      restoreRejectedDraft(event.currentTarget);
+    },
+    [restoreRejectedDraft],
+  );
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        restoreRejectedDraft(event.currentTarget);
+      }
+    },
+    [restoreRejectedDraft],
+  );
+
+  return {handleBlur, handleChange, handleFocus, handleInput, handleKeyDown};
+}
+
 function NumberFilterControl({
   columnKey,
   header,
@@ -466,12 +547,19 @@ function NumberFilterControl({
 
   const step = operatorValue.type === 'integer' ? 1 : null;
 
-  const handleChange = useCallback(
+  const updateFilter = useCallback(
     (newValue: number | null) => {
       store.getConfig().onFilterChange(columnKey, newValue);
     },
     [store, columnKey],
   );
+  const liveFilter = useLiveNumberFilter({
+    value: numValue,
+    min: operatorValue.minValue,
+    max: operatorValue.maxValue,
+    hasClear: !!hasClear,
+    onChange: updateFilter,
+  });
 
   if (hasClear) {
     return (
@@ -479,7 +567,11 @@ function NumberFilterControl({
         label={t('@astryx.tableFiltering.filterByColumn', {header})}
         isLabelHidden
         value={numValue}
-        onChange={handleChange}
+        onChange={liveFilter.handleChange}
+        onFocus={liveFilter.handleFocus}
+        onInput={liveFilter.handleInput}
+        onBlur={liveFilter.handleBlur}
+        onKeyDown={liveFilter.handleKeyDown}
         placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
         min={operatorValue.minValue ?? null}
         max={operatorValue.maxValue ?? null}
@@ -495,7 +587,11 @@ function NumberFilterControl({
       label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={numValue}
-      onChange={handleChange}
+      onChange={liveFilter.handleChange}
+      onFocus={liveFilter.handleFocus}
+      onInput={liveFilter.handleInput}
+      onBlur={liveFilter.handleBlur}
+      onKeyDown={liveFilter.handleKeyDown}
       placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
       min={operatorValue.minValue ?? null}
       max={operatorValue.maxValue ?? null}

package/src/Table/plugins/groupedRows/useTableGroupedRows-perf.test.tsx

@@ -0,0 +1,112 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTableGroupedRows-perf.test.tsx
+ * @input Table, useTableGroupedRows, React testing utilities
+ * @output Performance tests for grouped-rows render behavior
+ * @position Test file; validates that grouping costs no extra row renders
+ *
+ * The plugin keeps group headers out of cell renderers per cell, at render
+ * time. Doing it by rewriting the columns instead would hand BaseTable a new
+ * column object on every render, and its element-by-element check on the
+ * resolved column array is what stops every row re-rendering.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {useCallback, useMemo, useState} from 'react';
+import userEvent from '@testing-library/user-event';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableGroupedRows} from './useTableGroupedRows';
+
+interface Person extends Record<string, unknown> {
+  id: string;
+  name: string;
+  team: string;
+}
+
+const people: Person[] = [
+  {id: 'a', name: 'Alice', team: 'Core'},
+  {id: 'b', name: 'Bob', team: 'Core'},
+  {id: 'c', name: 'Carol', team: 'Infra'},
+];
+
+const EMPTY = new Set<string>();
+
+function GroupedRenderCountTable({
+  renderCounts,
+}: {
+  renderCounts: Record<string, number>;
+}) {
+  const [tick, setTick] = useState(0);
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(EMPTY);
+
+  const columns = useMemo<TableColumn<Person>[]>(
+    () => [
+      {
+        key: 'name',
+        header: 'Name',
+        renderCell: (item: Person) => {
+          renderCounts[item.id] = (renderCounts[item.id] ?? 0) + 1;
+          return item.name;
+        },
+      },
+    ],
+    [renderCounts],
+  );
+
+  const grouped = useTableGroupedRows<Person>({
+    data: people,
+    groupBy: useCallback((p: Person) => p.team, []),
+    collapsedGroups,
+    onToggleGroup: useCallback(
+      (key: string) =>
+        setCollapsedGroups(prev => {
+          const next = new Set(prev);
+          if (!next.delete(key)) {
+            next.add(key);
+          }
+          return next;
+        }),
+      [],
+    ),
+    getRowKey: useCallback((p: Person) => p.id, []),
+  });
+
+  return (
+    <>
+      <button type="button" onClick={() => setTick(t => t + 1)}>
+        bump {tick}
+      </button>
+      <Table
+        data={grouped.data}
+        columns={columns}
+        idKey={grouped.idKey}
+        plugins={{grouped: grouped.plugin}}
+      />
+    </>
+  );
+}
+
+describe('Grouped rows render performance', () => {
+  it('renders each real row once and no group header at all', () => {
+    const renderCounts: Record<string, number> = {};
+    render(<GroupedRenderCountTable renderCounts={renderCounts} />);
+    expect(renderCounts).toEqual({a: 1, b: 1, c: 1});
+  });
+
+  it('a re-render of the surrounding component re-renders no rows', async () => {
+    const user = userEvent.setup();
+    const renderCounts: Record<string, number> = {};
+    render(<GroupedRenderCountTable renderCounts={renderCounts} />);
+    const before = {...renderCounts};
+
+    await act(async () => {
+      await user.click(screen.getByRole('button', {name: /bump/}));
+    });
+
+    expect(screen.getByRole('button', {name: 'bump 1'})).toBeInTheDocument();
+    expect(renderCounts).toEqual(before);
+  });
+});

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

@@ -5,6 +5,7 @@ import {render, screen, fireEvent, within} from '@testing-library/react';
 import {useState, useCallback} from 'react';
 import {Table} from '../../Table';
 import type {TableColumn} from '../../types';
+import {useTableRowStatus, type TableRowStatus} from '../rowStatus';
 import {useTableGroupedRows} from './useTableGroupedRows';
 
 interface Person extends Record<string, unknown> {
@@ -175,6 +176,105 @@ describe('useTableGroupedRows', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('never runs a column renderCell against a group header row', () => {
+    // The renderer that breaks: it keys a lookup off a field rather than
+    // printing it, so the header Proxy answering `''` is no better than
+    // `undefined`.
+    const TEAM_META: Record<string, {dot: string}> = {
+      Core: {dot: 'green'},
+      Infra: {dot: 'blue'},
+    };
+    const seen: Person[] = [];
+    const lookupColumns: TableColumn<Person>[] = [
+      {
+        key: 'team',
+        header: 'Team',
+        renderCell: item => {
+          seen.push(item);
+          return <span>{TEAM_META[item.team].dot}</span>;
+        },
+      },
+    ];
+
+    function LookupHarness() {
+      const [collapsed, setCollapsed] = useState<Set<string>>(EMPTY);
+      const grouped = useTableGroupedRows<Person>({
+        data: people,
+        groupBy: p => p.team,
+        collapsedGroups: collapsed,
+        onToggleGroup: k => setCollapsed(new Set([k])),
+        getRowKey: p => p.id,
+      });
+      return (
+        <Table
+          data={grouped.data}
+          columns={lookupColumns}
+          idKey={grouped.idKey}
+          plugins={{grouped: grouped.plugin}}
+        />
+      );
+    }
+
+    expect(() => render(<LookupHarness />)).not.toThrow();
+    expect(seen.map(p => p.name)).toEqual(['Alice', 'Bob', 'Carol']);
+    expect(screen.getByText('Core')).toBeInTheDocument();
+    expect(screen.getByText('Infra')).toBeInTheDocument();
+  });
+
+  describe.each([
+    ['grouped first', true],
+    ['rowStatus first', false],
+  ])(
+    'with a column contributed by another plugin (%s)',
+    (_label, groupedFirst) => {
+      // `grouped` and `rowStatus` are both absent from PLUGIN_ORDER, so the
+      // record's insertion order is the pipeline order. Whichever way round
+      // the consumer types it, the status column's renderCell must not see a
+      // header row.
+      const STATUS_BY_TEAM: Record<string, TableRowStatus> = {
+        Core: {color: 'success', label: 'Healthy'},
+        Infra: {color: 'error', label: 'Paging'},
+      };
+
+      function StatusHarness() {
+        const [collapsed, setCollapsed] = useState<Set<string>>(EMPTY);
+        const grouped = useTableGroupedRows<Person>({
+          data: people,
+          groupBy: p => p.team,
+          collapsedGroups: collapsed,
+          onToggleGroup: k => setCollapsed(new Set([k])),
+          getRowKey: p => p.id,
+        });
+        const rowStatus = useTableRowStatus<Person>({
+          getStatus: useCallback((item: Person) => {
+            const {color, label} = STATUS_BY_TEAM[item.team];
+            return {color, label};
+          }, []),
+        });
+        return (
+          <Table
+            data={grouped.data}
+            columns={columns}
+            idKey={grouped.idKey}
+            plugins={
+              groupedFirst
+                ? {grouped: grouped.plugin, rowStatus}
+                : {rowStatus, grouped: grouped.plugin}
+            }
+          />
+        );
+      }
+
+      it('renders the group headers without throwing', () => {
+        expect(() => render(<StatusHarness />)).not.toThrow();
+        expect(screen.getByText('Core')).toBeInTheDocument();
+        expect(screen.getByText('Infra')).toBeInTheDocument();
+        // One indicator per real row, none on the two headers.
+        expect(screen.getAllByRole('img')).toHaveLength(3);
+      });
+    },
+  );
+
   it('keeps a group collapsed across a data change (state keyed by group)', () => {
     function ChangingHarness() {
       const [collapsed, setCollapsed] = useState<Set<string>>(

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

@@ -41,8 +41,11 @@ function isGroupHeader(item: unknown): item is GroupHeader {
   );
 }
 
-// Proxy handler: any field access beyond the marker fields resolves to `''`
-// so user cell renderers (`item.name.toUpperCase()`) never throw on a header.
+// Proxy handler: any field access beyond the marker fields resolves to `''`,
+// which keeps anything that reads a header's data — the sortable and filtering
+// plugins, a consumer's own row handler — off `undefined`. Cell renderers are
+// handled at render time instead (see `transformBodyCell` below); the Proxy
+// never protected them, because `''` fails a lookup exactly as `undefined` does.
 const HEADER_PROXY_HANDLER: ProxyHandler<Record<string | symbol, unknown>> = {
   // eslint-disable-next-line @typescript-eslint/promise-function-async -- Proxy get trap, not a promise-returning fn
   get(t: Record<string | symbol, unknown>, prop: string | symbol): unknown {
@@ -54,12 +57,9 @@ const HEADER_PROXY_HANDLER: ProxyHandler<Record<string | symbol, unknown>> = {
 };
 
 /**
- * Build a synthetic header row wrapped in a Proxy so arbitrary field access
- * from user cell renderers (e.g. `item.name.toUpperCase()`) resolves to `''`
- * instead of throwing — BaseTable evaluates `col.renderCell(item)` on every
- * row (including synthetic headers) before `transformBodyRow` can replace the
- * row's cells. `transformBodyRow` then discards those cells and renders a
- * single full-width header cell.
+ * Build a synthetic header row wrapped in a Proxy so field access resolves to
+ * `''` instead of `undefined`. `transformBodyRow` then discards the row's
+ * cells and renders a single full-width header cell.
  */
 function makeHeader<T extends Record<string, unknown>>(
   groupKey: string,
@@ -301,6 +301,15 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
 
   const plugin = useMemo(
     (): TablePlugin<T> => ({
+      // A header row is not one of the caller's rows, so running a cell
+      // renderer against it can only misread it or throw — and the cells are
+      // discarded by `transformBodyRow` below regardless.
+      transformBodyCell(props, _column, item) {
+        if (!isGroupHeader(item)) {
+          return props;
+        }
+        return {...props, isContentSuppressed: true};
+      },
       // Replace a header row's pre-rendered cells with one full-width cell.
       transformBodyRow(props, item) {
         if (!isGroupHeader(item)) {

package/src/Table/plugins/pagination/useTablePagination.test.tsx

@@ -229,7 +229,7 @@ describe('useTablePagination', () => {
       ).toBeTruthy();
     });
 
-    it('transformTableContext renders Pagination above and below', () => {
+    it('transformTableContext renders distinctly named Pagination above and below', () => {
       render(
         <PaginatedTable
           data={generateItems(30)}
@@ -237,10 +237,40 @@ describe('useTablePagination', () => {
           position="both"
         />,
       );
-      const navs = screen.getAllByRole('navigation', {
-        name: 'Table pagination',
+      const table = screen.getByRole('table');
+      // Each nav landmark gets a unique accessible name (axe landmark-unique)
+      const topNav = screen.getByRole('navigation', {
+        name: 'Table pagination (top)',
+      });
+      const bottomNav = screen.getByRole('navigation', {
+        name: 'Table pagination (bottom)',
       });
-      expect(navs).toHaveLength(2);
+      // Top nav comes before the table, bottom nav after it in DOM order
+      expect(
+        table.compareDocumentPosition(topNav) &
+          Node.DOCUMENT_POSITION_PRECEDING,
+      ).toBeTruthy();
+      expect(
+        table.compareDocumentPosition(bottomNav) &
+          Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+    });
+
+    it('position="both" interpolates a consumer label into distinct nav names', () => {
+      render(
+        <PaginatedTable
+          data={generateItems(30)}
+          pageSize={10}
+          position="both"
+          label="Users table"
+        />,
+      );
+      expect(
+        screen.getByRole('navigation', {name: 'Users table (top)'}),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('navigation', {name: 'Users table (bottom)'}),
+      ).toBeInTheDocument();
     });
 
     it('transformTableContext does not render Pagination when position is none', () => {

package/src/Table/plugins/pagination/useTablePagination.tsx

@@ -164,6 +164,9 @@ export interface UseTablePaginationConfig {
 
   /**
    * Accessible label for the pagination nav landmark.
+   * When `position` is 'both', the two navs get distinct names by suffixing
+   * this label — "{label} (top)" above and "{label} (bottom)" below — so
+   * same-type landmarks stay distinguishable to assistive technology.
    * @default 'Table pagination'
    */
   label?: string;
@@ -211,6 +214,10 @@ export function useTablePagination<T extends Record<string, unknown>>(
     label: labelFromProps,
   } = config;
   const label = labelFromProps ?? t('@astryx.table.pagination.label');
+  // position='both' renders two nav landmarks; suffix the base label so each
+  // gets a unique accessible name (axe landmark-unique).
+  const labelAbove = t('@astryx.table.pagination.labelAbove', {label});
+  const labelBelow = t('@astryx.table.pagination.labelBelow', {label});
 
   // Same guard as Pagination itself: 0/NaN/negative pageSize would produce an
   // Infinity/NaN totalPages here, which bypasses Pagination's own coercion
@@ -240,8 +247,20 @@ export function useTablePagination<T extends Record<string, unknown>>(
 
   // Keep current config in a ref so the plugin can read the latest values
   // without needing to recreate the plugin object on every change.
-  const configRef = useRef({paginationProps, position, align});
-  configRef.current = {paginationProps, position, align};
+  const configRef = useRef({
+    paginationProps,
+    position,
+    align,
+    labelAbove,
+    labelBelow,
+  });
+  configRef.current = {
+    paginationProps,
+    position,
+    align,
+    labelAbove,
+    labelBelow,
+  };
 
   // Stable plugin object \u2014 created once, reads config via ref.
   return useMemo(
@@ -251,6 +270,8 @@ export function useTablePagination<T extends Record<string, unknown>>(
           position: pos,
           paginationProps: props,
           align: a,
+          labelAbove: above,
+          labelBelow: below,
         } = configRef.current;
         if (pos === 'none') {
           return children;
@@ -277,7 +298,18 @@ export function useTablePagination<T extends Record<string, unknown>>(
               a === 'end' && styles.alignEnd,
               a === 'start' && styles.alignStart,
             )}>
-            <Pagination {...props} />
+            <Pagination
+              {...props}
+              // Two navs with the same name are indistinguishable landmarks;
+              // give each side a unique name when both render.
+              label={
+                pos === 'both'
+                  ? side === 'above'
+                    ? above
+                    : below
+                  : props.label
+              }
+            />
           </div>
         );
 

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

@@ -21,6 +21,7 @@ import {useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars, colorVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
+import {VisuallyHidden} from '../../../VisuallyHidden';
 import {resolveContextActions} from '../../tableContextMenu';
 import {useTranslator} from '../../../i18n';
 import {rtlStyles} from '../../../utils';
@@ -207,7 +208,13 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
   const expansionColumn = useMemo(
     (): TableColumn<T> => ({
       key: '__expansion',
-      header: '',
+      // A `<th>` with no discernible text is announced as an unlabelled
+      // column; the label is hidden because the column shows only chevrons.
+      header: (
+        <VisuallyHidden>
+          {t('@astryx.tableRowExpansion.columnHeader')}
+        </VisuallyHidden>
+      ),
       width: EXPANSION_COLUMN_WIDTH,
       resizable: false,
       renderCell: (item: T) => {
@@ -226,7 +233,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
         );
       },
     }),
-    [expandedKeys, onToggle, getRowKey, getIsItemExpandable],
+    [expandedKeys, onToggle, getRowKey, getIsItemExpandable, t],
   );
 
   return useMemo(

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

@@ -44,12 +44,18 @@ function Harness({
 }
 
 describe('useTableRowStatus', () => {
-  it('prepends a narrow status column with an empty header', () => {
+  it('names the status column header for assistive technology', () => {
     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('');
+    // The gutter looks blank but its th carries a visually hidden name.
+    const header = screen.getByRole('columnheader', {name: 'Row status'});
+    expect(header).toHaveAttribute('data-column-key', '__rowStatus');
+    // Status column is first.
+    expect(screen.getAllByRole('columnheader')[0]).toBe(header);
+    // The name must come from the clipped VisuallyHidden span — bare th text
+    // would be a visible header on what should stay a blank gutter.
+    const hiddenText = within(header).getByText('Row status');
+    expect(hiddenText.tagName).toBe('SPAN');
+    expect(hiddenText.className).not.toBe('');
   });
 
   it('renders a labeled dot for rows with a status', () => {
@@ -131,8 +137,8 @@ describe('useTableRowStatus', () => {
 
   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');
+    const header = screen.getByRole('columnheader', {name: 'Row status'});
+    expect(header).toHaveAttribute('data-column-key', '__rowStatus');
     expect(screen.queryByRole('img')).not.toBeInTheDocument();
   });
 });

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

@@ -4,7 +4,7 @@
 
 /**
  * @file useTableRowStatus.tsx
- * @input React, StyleX, Icon, Table types
+ * @input React, StyleX, Icon, i18n, VisuallyHidden, Table types
  * @output Exports useTableRowStatus hook + config type
  * @position Row-status plugin; consumed by Table via plugins prop
  *
@@ -16,6 +16,8 @@ import {useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon, type IconColor, type IconName} from '../../../Icon';
 import {Tooltip} from '../../../Tooltip';
+import {useTranslator} from '../../../i18n';
+import {VisuallyHidden} from '../../../VisuallyHidden';
 import type {TableColumn, TablePlugin} from '../../types';
 
 /**
@@ -142,6 +144,7 @@ const styles = stylex.create({
 export function useTableRowStatus<T extends Record<string, unknown>>(
   config: UseTableRowStatusConfig<T>,
 ): TablePlugin<T> {
+  const t = useTranslator();
   const {getStatus} = config;
 
   return useMemo(
@@ -149,7 +152,13 @@ export function useTableRowStatus<T extends Record<string, unknown>>(
       transformColumns(columns) {
         const statusColumn: TableColumn<T> = {
           key: '__rowStatus',
-          header: '',
+          // The gutter stays visually blank, but the th needs a discernible
+          // name for assistive technology (axe: empty-table-header).
+          header: (
+            <VisuallyHidden>
+              {t('@astryx.table.rowStatus.columnHeader')}
+            </VisuallyHidden>
+          ),
           width: STATUS_COLUMN_WIDTH,
           resizable: false,
           renderCell: (item: T) => {
@@ -184,6 +193,6 @@ export function useTableRowStatus<T extends Record<string, unknown>>(
         return [statusColumn, ...columns];
       },
     }),
-    [getStatus],
+    [getStatus, t],
   );
 }