@gntik-ai/blocks 0.5.0 → 0.7.0

package/src/tables/DataTable/DataTable.tsx

@@ -48,6 +48,7 @@ import { useControllable, useTableViews } from './use-table-views';
 import { useVirtualRows } from './use-virtual-rows';
 import { ViewSwitcher, type DataTableViewState } from './views';
 
+export type { DataTableLabels } from './labels';
 export type { DataTableProps } from './data-table-props';
 
 const defaultRowId = (row: unknown): string => {
@@ -92,6 +93,12 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
   onSortChange,
   manualSorting = false,
   paginated: paginatedProp,
+  paginationMode = 'client',
+  rowCount,
+  page: controlledPage,
+  pageSize: controlledPageSize,
+  onPageChange,
+  onPageSizeChange,
   defaultPageSize = 10,
   pageSizeOptions = [10, 25, 50],
   density: densityProp,
@@ -135,9 +142,11 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
   onFiltersChange,
   toolbar,
   className,
+  labels,
 }: DataTableProps<T>) {
   const { t } = useI18n();
   const singleMode = selectionMode === 'single';
+  const serverMode = paginationMode === 'server';
   const selectable = selectionMode === undefined ? selectableProp : selectionMode === 'multiple';
   const selectionColumn = selectable || singleMode;
   const paginated = !singleMode && (paginatedProp ?? true);
@@ -196,10 +205,10 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
   const [innerCollapsed, setInnerCollapsed] = useState<ReadonlySet<string>>(() => new Set(defaultCollapsedGroups));
   const collapsed: ReadonlySet<string> = collapsedProp ? new Set(collapsedProp) : innerCollapsed;
 
-  const sortedRows = manualSorting ? [...rows] : sortRows(rows, columns, sort);
+  const sortedRows = serverMode ? rows : manualSorting ? [...rows] : sortRows(rows, columns, sort);
   const allGroups = effectiveGroupBy ? groupRows(sortedRows, effectiveGroupBy, rows) : null;
   const sorted = allGroups ? allGroups.flatMap((g) => g.rows) : sortedRows;
-  const pageRows = paginated ? paginate(sorted, page, pageSize) : sorted;
+  const pageRows = serverMode ? rows : paginated ? paginate(sorted, page, pageSize) : sorted;
   // Rows in collapsed groups are hidden, so select-all leaves them alone.
   const pageIds = (
     effectiveGroupBy ? pageRows.filter((row) => !collapsed.has(groupKeyOf(row, effectiveGroupBy))) : pageRows
@@ -212,6 +221,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
     onSelectionChange?.(rows.map(getRowId).filter((id) => next.has(id)));
   };
   const changeSort = (columnId: string, direction: SortState['direction']) => {
+    if (serverMode) return;
     const next: SortState = { columnId, direction: sort?.columnId === columnId ? direction : 'ascending' };
     setInnerSort(next);
     onSortChange?.(next);
@@ -224,7 +234,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
     setInnerCollapsed(next);
     onCollapsedGroupsChange?.([...next]);
   };
-  const nameOf = (key: string) => key || 'No group';
+  const nameOf = (key: string) => key || (labels?.noGroup ?? 'No group');
   const bodyGroups: Array<DataTableBodyGroup<T>> | undefined =
     effectiveGroupBy && allGroups
       ? allGroups
@@ -291,7 +301,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
   const applyState = (state: DataTableViewState) => {
     const nextSort = state.sort ?? null;
     setInnerSort(nextSort);
-    if (nextSort) onSortChange?.(nextSort);
+    if (nextSort && !serverMode) onSortChange?.(nextSort);
     setHiddenList(state.hiddenColumns ?? defaultHidden);
     setWidths(state.columnWidths ?? defaultColumnWidths);
     setPinned(state.pinnedColumns ?? defaultPinnedColumns);
@@ -299,7 +309,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
     setGroupOverride(nextGroup === groupName(groupBy) && typeof groupBy !== 'function' ? undefined : nextGroup);
     if (nextGroup !== currentState.groupBy) onGroupByChange?.(nextGroup);
     if (state.filters !== filters) onFiltersChange?.(state.filters);
-    setPage(1);
+    if (!serverMode) setPage(1);
   };
   const viewsApi = useTableViews({
     views: viewsProp,
@@ -349,7 +359,11 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
               <>
                 {selectionSummary && (
                   <span className="text-[12.5px] font-semibold text-foreground" aria-live="polite">
-                    {selectedList.length} selected
+                    {labels?.selectionCount ? (
+                      labels.selectionCount(selectedList.length)
+                    ) : (
+                      <>{selectedList.length} selected</>
+                    )}
                   </span>
                 )}
                 {selectionSummary && bulkActions && <span aria-hidden className="h-4 w-px bg-border" />}
@@ -362,6 +376,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
           <div className="flex items-center gap-2">
             {showViews && (
               <ViewSwitcher
+                labels={labels}
                 views={viewsApi.views}
                 activeId={viewsApi.activeId}
                 dirty={viewsApi.dirty}
@@ -373,9 +388,10 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                 onReset={viewsApi.reset}
               />
             )}
-            {showDensityToggle && <DensityToggle value={density} onChange={changeDensity} />}
+            {showDensityToggle && <DensityToggle labels={labels} value={density} onChange={changeDensity} />}
             {showColumnMenu && (
               <ColumnVisibilityMenu
+                labels={labels}
                 columns={columns}
                 hidden={hidden}
                 onToggle={toggleColumn}
@@ -388,7 +404,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
       )}
       {anyEditable && (
         <span id={editHintId} className="sr-only">
-          Press Enter or F2 to edit.
+          {labels?.editHint ?? 'Press Enter or F2 to edit.'}
         </span>
       )}
       {/* The toggle drives a density context for the table: its rows and the controls inside them. */}
@@ -400,7 +416,7 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
             aria-rowcount={virtual ? items + 1 : undefined}
             stickyHeader={virtualOn}
             containerClassName={virtualOn ? virtualContainerClassName : undefined}
-            containerLabel={virtualOn ? caption : undefined}
+            containerLabel={virtualOn ? caption : labels?.scrollRegion}
             // Keep single-mode resize handles inside their cells. Overflow at the
             // final column would add a scroll-container stop before the header.
             className={cn(
@@ -423,10 +439,10 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                     )}
                     style={layout.lead.style}
                   >
-                    {singleMode && <span className="sr-only">{t('table.selection')}</span>}
+                    {singleMode && <span className="sr-only">{labels?.selection ?? t('table.selection')}</span>}
                     {selectable && (
                       <Checkbox
-                        aria-label={t('table.selectAllPage')}
+                        aria-label={labels?.selectAll ?? t('table.selectAllPage')}
                         checked={header.checked}
                         indeterminate={header.indeterminate}
                         disabled={loading || pageIds.length === 0}
@@ -439,10 +455,11 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                   const bounds = widthBounds(c);
                   return (
                     <DataTableHeadCell
+                      labels={labels}
                       key={c.id}
-                      column={c}
+                      column={serverMode ? { ...c, sortable: false } : c}
                       layout={layout.columns.get(c.id)}
-                      sortDirection={sort?.columnId === c.id ? sort.direction : 'none'}
+                      sortDirection={!serverMode && sort?.columnId === c.id ? sort.direction : 'none'}
                       onSortChange={(dir) => changeSort(c.id, dir)}
                       resize={
                         resizable && c.resizable !== false
@@ -467,12 +484,13 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
                     )}
                     style={layout.trail.style}
                   >
-                    <span className="sr-only">{t('table.actions')}</span>
+                    <span className="sr-only">{labels?.actions ?? t('table.actions')}</span>
                   </TableHead>
                 )}
               </TableRow>
             </TableHeader>
             <DataTableBody
+              labels={labels}
               rows={pageRows}
               columns={visibleColumns}
               getRowId={getRowId}
@@ -500,17 +518,18 @@ export function DataTable<T = (typeof DEPLOYMENT_ROWS)[number]>({
       </SelectionGroup>
       {loading && (
         <p role="status" className="sr-only">
-          Loading {caption.toLowerCase()}…
+          {labels?.loading ? labels.loading(caption) : <>Loading {caption.toLowerCase()}…</>}
         </p>
       )}
-      {paginated && !loading && rows.length > 0 && (
+      {paginated && !loading && (serverMode || rows.length > 0) && (
         <PaginationFooter
+          labels={labels}
           className="border-t border-border px-4 py-3"
-          total={rows.length}
-          page={page}
-          onPageChange={setPage}
-          pageSize={pageSize}
-          onPageSizeChange={setPageSize}
+          total={serverMode ? rowCount : rows.length}
+          page={serverMode ? controlledPage : page}
+          onPageChange={serverMode ? onPageChange : setPage}
+          pageSize={serverMode ? controlledPageSize : pageSize}
+          onPageSizeChange={serverMode ? onPageSizeChange : setPageSize}
           pageSizeOptions={pageSizeOptions}
           noun={caption}
         />

package/src/tables/DataTable/block.meta.ts

@@ -1,4 +1,5 @@
 import type { BlockMeta } from '../../meta';
+import type { DataTableLabels } from './labels';
 
 export const meta: BlockMeta = {
   name: 'Data table',
@@ -7,8 +8,110 @@ export const meta: BlockMeta = {
   description:
     'Generic typed table: sortable headers with aria-sort, row selection with select-all and indeterminate by default (selectionMode="multiple"), selectionMode="none" to hide selection, column visibility menu, density toggle, row actions, loading and empty states, client-side sort and pagination, optional row groups (groupBy) with rowgroup header rows, counts, keyboard-accessible collapse buttons and group selection; column resize (pointer drag or a focusable role="separator" handle with arrow keys, min/max widths, controlled columnWidths), column pinning to either edge with sticky cells (column menu or pinnedColumns), row virtualization for large datasets (aria-rowcount/aria-rowindex, works with selection and grouping), inline cell editing (text, number and select editors; Enter/F2 to edit, Enter/Tab to commit, Escape to cancel, onCellEdit can reject with an inline error) and saved views (filters, sort, visible columns, widths, pinning and grouping) with a view switcher to save as, rename, delete and reset. ' +
     'Opt-in selectionMode="single" uses native radios in a labelled fieldset (never paginated or virtualized; paginated defaults to false and paginated=true is a type error). Single mode uses selectedId/onSelectedIdChange or defaultSelectedId; isRowDisabled skips unavailable rows and preserves a checked disabled choice without callbacks. Supply legend, aria-label or aria-labelledby for the group and getRowLabel for each radio (otherwise the first column labels it). selectionName is used verbatim and must be unique per page; omitted names use an instance-unique useId name, and duplicate supplied names or missing group labels warn in development. Tab enters once on the checked enabled row or first enabled row; arrows wrap and skip disabled rows, Space selects, Shift+Tab exits, and all-disabled groups have no tab stop. No select-all, group checkboxes, bulk actions or selection summary appear in single mode. ' +
-    'Examples in examples/single-selection.tsx: an uncontrolled non-paginated list with legend="Available items" and a controlled versions table with legend="Available versions", selectedId="v2" and a checked disabled version.',
+    'Examples in examples/single-selection.tsx: an uncontrolled non-paginated list with legend="Available items" and a controlled versions table with legend="Available versions", selectedId="v2" and a checked disabled version. ' +
+    'Opt-in paginationMode="server" accepts a controlled 1-based page, pageSize and required rowCount (known total), with onPageChange/onPageSizeChange requests. Supplied rows render in order without client sorting or slicing, and headers have no sort affordance. Single selection cannot use server mode. The footer stays visible for empty results, clamps stale pages for display without callbacks, and hides during loading. Page-size changes may also request a page to keep the first visible row on screen. The consumer owns fetching and reconciles stale pages. See examples/server-pagination.tsx for an items/total/page/pageSize envelope consumer that handles both callbacks.',
 
+  labels: [
+    {
+      key: 'scrollRegion',
+      type: 'string',
+      state: 'Non-virtual table overflow: focusable scroll region name; virtualized regions use the caller caption',
+    },
+    {
+      key: 'selectionCount',
+      type: '(count: number) => string',
+      state: 'Multiple selection: toolbar count and polite live region',
+    },
+    { key: 'columns', type: 'string', state: 'Column visibility trigger text and name' },
+    { key: 'visibleColumns', type: 'string', state: 'Open column menu: visibility heading' },
+    { key: 'pinColumns', type: 'string', state: 'Open column menu with pinning: pin heading' },
+    { key: 'pinnedLeft', type: 'string', state: 'Open pin submenu trigger: left side suffix' },
+    { key: 'pinnedRight', type: 'string', state: 'Open pin submenu trigger: right side suffix' },
+    { key: 'pinLeft', type: 'string', state: 'Open pin submenu: left option' },
+    { key: 'pinRight', type: 'string', state: 'Open pin submenu: right option' },
+    { key: 'unpinned', type: 'string', state: 'Open pin submenu: unpinned option' },
+    { key: 'density', type: 'string', state: 'Density group accessible name' },
+    { key: 'comfortable', type: 'string', state: 'Comfortable density button name' },
+    { key: 'compact', type: 'string', state: 'Compact density button name' },
+    {
+      key: 'resizeColumn',
+      type: '(label: string) => string',
+      state: 'Resizable header: separator name; label is caller column header',
+    },
+    {
+      key: 'columnWidth',
+      type: '(width: number) => string',
+      state: 'Resizable header: separator aria-valuetext in pixels',
+    },
+    { key: 'defaultView', type: 'string', state: 'View trigger when no active view' },
+    { key: 'defaultViewOption', type: 'string', state: 'Open views menu: default option' },
+    { key: 'modified', type: 'string', state: 'Dirty view trigger: screen reader suffix' },
+    { key: 'views', type: 'string', state: 'Open views menu: heading' },
+    { key: 'saveChanges', type: 'string', state: 'Open views menu: save current view action' },
+    { key: 'saveAs', type: 'string', state: 'Open views menu: save as action' },
+    { key: 'renameView', type: 'string', state: 'Open views menu: rename action' },
+    { key: 'deleteView', type: 'string', state: 'Open views menu: immediate delete action; no confirmation dialog' },
+    { key: 'resetChanges', type: 'string', state: 'Open views menu: reset action' },
+    { key: 'saveViewTitle', type: 'string', state: 'Save as dialog: title and accessible name' },
+    { key: 'renameViewTitle', type: 'string', state: 'Rename dialog: title and accessible name' },
+    { key: 'viewName', type: 'string', state: 'Save as and Rename dialogs: input label' },
+    { key: 'cancel', type: 'string', state: 'Save as and Rename dialogs: cancel button' },
+    { key: 'saveView', type: 'string', state: 'Save as dialog: submit button' },
+    { key: 'rename', type: 'string', state: 'Rename dialog: submit button' },
+    { key: 'closeDialog', type: 'string', state: 'Save as and Rename dialogs: close button name' },
+    { key: 'selection', type: 'string', state: 'Single selection: screen reader column heading' },
+    { key: 'selectAll', type: 'string', state: 'Multiple selection: header checkbox name' },
+    {
+      key: 'selectRow',
+      type: '(label: string) => string',
+      state: 'Multiple selection: row checkbox name; label is caller row name',
+    },
+    { key: 'selectGroup', type: '(group: string) => string', state: 'Grouped multiple selection: group checkbox name' },
+    {
+      key: 'groupRows',
+      type: '(count: number) => string',
+      state: 'Grouped header: screen reader row-count unit; numeric count stays unchanged',
+    },
+    { key: 'noGroup', type: 'string', state: 'Grouped header: fallback when group key is empty' },
+    { key: 'actions', type: 'string', state: 'Row actions present: screen reader column heading' },
+    {
+      key: 'rowActions',
+      type: '(label: string) => string',
+      state: 'Row action menu trigger name; label is caller row name',
+    },
+    { key: 'emptyTitle', type: 'string', state: 'Empty rows: default empty-state title' },
+    { key: 'emptyDescription', type: 'string', state: 'Empty rows: default empty-state description' },
+    {
+      key: 'loading',
+      type: '(caption: string) => string',
+      state: 'Loading: status announcement; receives original caller caption',
+    },
+    { key: 'editHint', type: 'string', state: 'Editable table: shared keyboard instruction description' },
+    { key: 'editLabel', type: '(column: string, row: string) => string', state: 'Editing cell: input accessible name' },
+    { key: 'editError', type: 'string', state: 'Rejected cell edit without caller error message: alert' },
+    { key: 'enterNumber', type: 'string', state: 'Editing number: invalid numeric value alert' },
+    { key: 'minimumValue', type: '(min: number) => string', state: 'Editing number below minimum: alert' },
+    { key: 'maximumValue', type: '(max: number) => string', state: 'Editing number above maximum: alert' },
+    { key: 'rowsPerPage', type: 'string', state: 'Always: visible page-size text' },
+    { key: 'rowsPerPageLabel', type: 'string', state: 'Always: page-size Select accessible name' },
+    {
+      key: 'rangeSummary',
+      type: '(from: number, to: number, total: number) => string',
+      state: 'Every page and page-size change: visible summary and polite live region',
+    },
+    {
+      key: 'paginationNav',
+      type: '(noun: string) => string',
+      state: 'Always: navigation accessible name; noun is the caller caption',
+    },
+    { key: 'previous', type: 'string', state: 'Always: previous-page button name' },
+    { key: 'next', type: 'string', state: 'Always: next-page button name' },
+    {
+      key: 'page',
+      type: '(page: number) => string',
+      state: 'Always: numbered-page button name; number stays caller content',
+    },
+  ] satisfies Array<{ key: keyof DataTableLabels; type: string; state: string }>,
   uses: [
     'Table',
     'Checkbox',

package/src/tables/DataTable/column-menu.tsx

@@ -15,6 +15,7 @@ import {
   MenuTrigger,
   useI18n,
 } from '@gntik-ai/ui';
+import type { DataTableLabels } from './labels';
 import type { PinSide } from './column-sizing';
 import type { DataTableColumn } from './data-table-utils';
 
@@ -23,6 +24,7 @@ export interface ColumnVisibilityMenuProps<T> {
   hidden: ReadonlySet<string>;
   onToggle: (columnId: string, visible: boolean) => void;
   label?: string;
+  labels?: Partial<DataTableLabels>;
   /** Pin side of a column; with `onPin`, the menu gets a "Pin columns" section. */
   pinOf?: (columnId: string) => PinSide | null;
   onPin?: (columnId: string, side: PinSide | null) => void;
@@ -39,11 +41,12 @@ export function ColumnVisibilityMenu<T>({
   hidden,
   onToggle,
   label: labelProp,
+  labels,
   pinOf,
   onPin,
 }: ColumnVisibilityMenuProps<T>) {
   const { t } = useI18n();
-  const label = labelProp ?? t('table.columns');
+  const label = labels?.columns ?? labelProp ?? t('table.columns');
   const visibleCount = columns.filter((c) => !hidden.has(c.id)).length;
   const pinnable = onPin && pinOf ? columns.filter((c) => c.pinnable !== false && !hidden.has(c.id)) : [];
   return (
@@ -53,7 +56,7 @@ export function ColumnVisibilityMenu<T>({
       </MenuTrigger>
       <MenuContent align="end" className="min-w-[200px]">
         <MenuGroup>
-          <MenuGroupLabel>{t('table.visibleColumns')}</MenuGroupLabel>
+          <MenuGroupLabel>{labels?.visibleColumns ?? t('table.visibleColumns')}</MenuGroupLabel>
           {columns
             .filter((c) => c.hideable !== false)
             .map((c) => {
@@ -74,7 +77,7 @@ export function ColumnVisibilityMenu<T>({
           <>
             <MenuSeparator />
             <MenuGroup>
-              <MenuGroupLabel>Pin columns</MenuGroupLabel>
+              <MenuGroupLabel>{labels?.pinColumns ?? 'Pin columns'}</MenuGroupLabel>
               {pinnable.map((c) => {
                 const side = pinOf(c.id);
                 return (
@@ -83,7 +86,7 @@ export function ColumnVisibilityMenu<T>({
                       {c.header}
                       {side && (
                         <span className="ms-auto ps-3 text-[11.5px] text-muted-foreground">
-                          {side === 'left' ? 'Left' : 'Right'}
+                          {side === 'left' ? (labels?.pinnedLeft ?? 'Left') : (labels?.pinnedRight ?? 'Right')}
                         </span>
                       )}
                     </MenuSubTrigger>
@@ -92,9 +95,9 @@ export function ColumnVisibilityMenu<T>({
                         value={side ?? PIN_NONE}
                         onValueChange={(v: unknown) => onPin(c.id, v === 'left' || v === 'right' ? v : null)}
                       >
-                        <MenuRadioItem value="left">Pin left</MenuRadioItem>
-                        <MenuRadioItem value="right">Pin right</MenuRadioItem>
-                        <MenuRadioItem value={PIN_NONE}>Unpinned</MenuRadioItem>
+                        <MenuRadioItem value="left">{labels?.pinLeft ?? 'Pin left'}</MenuRadioItem>
+                        <MenuRadioItem value="right">{labels?.pinRight ?? 'Pin right'}</MenuRadioItem>
+                        <MenuRadioItem value={PIN_NONE}>{labels?.unpinned ?? 'Unpinned'}</MenuRadioItem>
                       </MenuRadioGroup>
                     </MenuSubContent>
                   </MenuSub>

package/src/tables/DataTable/data-table-body.tsx

@@ -108,8 +108,8 @@ export function DataTableBody<T>(props: DataTableBodyProps<T>) {
               <EmptyState
                 icon={Inbox}
                 size="sm"
-                title={t('common.noResults')}
-                description={t('table.emptyDescription')}
+                title={props.labels?.emptyTitle ?? t('common.noResults')}
+                description={props.labels?.emptyDescription ?? t('table.emptyDescription')}
               />
             )}
           </TableCell>
@@ -130,6 +130,7 @@ export function DataTableBody<T>(props: DataTableBodyProps<T>) {
     <GroupHeaderRow
       key={`group-${group.key}`}
       group={group}
+      labels={props.labels}
       open={open}
       selectable={selectable}
       selected={selected}

package/src/tables/DataTable/data-table-props.ts

@@ -3,9 +3,12 @@ import type { ReactNode } from 'react';
 import type { ColumnWidths, PinnedColumns } from './column-sizing';
 import type { DataTableColumn, DataTableGroupBy, SortState } from './data-table-utils';
 import type { DataTableCellEditHandler } from './editable-cell';
+import type { DataTableLabels } from './labels';
 import type { DataTableView } from './views';
 
 interface DataTableCommonProps<T> {
+  /** Per-key overrides; omitted keys keep existing defaults and provider translations. */
+  labels?: Partial<DataTableLabels>;
   rows?: readonly T[];
   columns?: ReadonlyArray<DataTableColumn<T>>;
   /** Stable row id (defaults to `row.id`). */
@@ -136,21 +139,44 @@ interface DataTableCommonProps<T> {
   className?: string;
 }
 
+interface ClientPaginationProps {
+  paginationMode?: 'client';
+  rowCount?: never;
+  page?: never;
+  pageSize?: never;
+  onPageChange?: never;
+  onPageSizeChange?: never;
+}
+
+interface ServerPaginationProps {
+  /** Rows arrive as one server page: no client sorting or slicing, and no sortable headers. */
+  paginationMode: 'server';
+  /** Total number of rows across all pages; required even for an empty result. */
+  rowCount: number;
+  /** Current page, 1-based. Out-of-range pages are clamped for display without callbacks. */
+  page: number;
+  pageSize: number;
+  onPageChange?: (page: number) => void;
+  /** The footer may also request a page change to keep the first visible row on screen. */
+  onPageSizeChange?: (size: number) => void;
+}
+
 export type DataTableProps<T> = DataTableCommonProps<T> &
   (
-    | {
+    | ({
         selectionMode: 'single';
         paginated?: false;
         /** Consumer-supplied accessible group label; the kit adds no default. */
         legend?: ReactNode;
         'aria-label'?: string;
         'aria-labelledby'?: string;
-      }
-    | {
+        paginationMode?: never;
+      } & ClientPaginationProps)
+    | ({
         selectionMode?: 'none' | 'multiple';
         paginated?: boolean;
         legend?: never;
         'aria-label'?: never;
         'aria-labelledby'?: never;
-      }
+      } & (ClientPaginationProps | ServerPaginationProps))
   );

package/src/tables/DataTable/data-table-row.tsx

@@ -10,6 +10,7 @@ import {
   type DataTableColumn,
 } from './data-table-utils';
 import { EditableCell, isCellEditable, type DataTableCellEditHandler } from './editable-cell';
+import type { DataTableLabels } from './labels';
 import type { SingleSelection } from './single-selection';
 
 /** A group as the body renders it: its rows on the current page plus header data. */
@@ -27,6 +28,7 @@ export interface DataTableBodyGroup<T> {
 
 /** Row rendering shared by the plain, grouped and virtualized bodies. */
 export interface RowContext<T> {
+  labels?: Partial<DataTableLabels>;
   columns: ReadonlyArray<DataTableColumn<T>>;
   getRowId: (row: T) => string;
   getRowLabel: (row: T) => string;
@@ -49,6 +51,7 @@ export interface DataTableRowProps<T> extends RowContext<T> {
 }
 
 export function DataTableRow<T>({
+  labels,
   row,
   columns,
   getRowId,
@@ -83,7 +86,7 @@ export function DataTableRow<T>({
             </span>
           ) : (
             <Checkbox
-              aria-label={t('table.selectRow', { label })}
+              aria-label={labels?.selectRow?.(label) ?? t('table.selectRow', { label })}
               checked={isSelected}
               onCheckedChange={() => onToggleRow(id)}
             />
@@ -110,6 +113,7 @@ export function DataTableRow<T>({
           >
             {editable ? (
               <EditableCell
+                labels={labels}
                 row={row}
                 rowId={id}
                 rowLabel={label}
@@ -131,7 +135,12 @@ export function DataTableRow<T>({
           className={cn('w-12 py-0', layout?.trail.className, tint(layout?.trail))}
           style={layout?.trail.style}
         >
-          <MoreMenu items={rowActions(row)} label={t('table.rowActions', { label })} variant="ghost" size="sm" />
+          <MoreMenu
+            items={rowActions(row)}
+            label={labels?.rowActions?.(label) ?? t('table.rowActions', { label })}
+            variant="ghost"
+            size="sm"
+          />
         </TableCell>
       )}
     </TableRow>
@@ -142,6 +151,7 @@ export const groupHeadClass =
   'h-9 bg-secondary/50 text-[12.5px] font-semibold tracking-normal normal-case text-foreground';
 
 export interface GroupHeaderRowProps<T> {
+  labels?: Partial<DataTableLabels>;
   group: DataTableBodyGroup<T>;
   open: boolean;
   selectable: boolean;
@@ -157,6 +167,7 @@ export interface GroupHeaderRowProps<T> {
 
 /** The header row of a group: group checkbox, collapse button, label and count. */
 export function GroupHeaderRow<T>({
+  labels,
   group,
   open,
   selectable,
@@ -177,7 +188,7 @@ export function GroupHeaderRow<T>({
       <span className="rounded-full bg-secondary px-1.5 font-mono text-[11px] font-medium text-muted-foreground tabular-nums">
         {count}
       </span>{' '}
-      <span className="sr-only">{count === 1 ? 'row' : 'rows'}</span>
+      <span className="sr-only">{labels?.groupRows?.(count) ?? (count === 1 ? 'row' : 'rows')}</span>
     </>
   );
   return (
@@ -185,7 +196,7 @@ export function GroupHeaderRow<T>({
       {selectable && (
         <TableCell className={cn('w-10 pe-0', groupHeadClass)}>
           <Checkbox
-            aria-label={t('table.selectRow', { label: `all in ${group.name}` })}
+            aria-label={labels?.selectGroup?.(group.name) ?? t('table.selectRow', { label: `all in ${group.name}` })}
             checked={state.checked}
             indeterminate={state.indeterminate}
             disabled={count === 0}

package/src/tables/DataTable/density-toggle.tsx

@@ -1,17 +1,20 @@
 import { Rows2, Rows3 } from '@gntik-ai/icons';
 import { Toggle, ToggleGroup, type TableDensity, useI18n } from '@gntik-ai/ui';
 
+import type { DataTableLabels } from './labels';
+
 export interface DensityToggleProps {
+  labels?: Partial<DataTableLabels>;
   value: TableDensity;
   onChange: (density: TableDensity) => void;
 }
 
 /** Two-icon segmented control: comfortable or compact rows. */
-export function DensityToggle({ value, onChange }: DensityToggleProps) {
+export function DensityToggle({ value, onChange, labels }: DensityToggleProps) {
   const { t } = useI18n();
   return (
     <ToggleGroup
-      aria-label={t('table.density')}
+      aria-label={labels?.density ?? t('table.density')}
       size="sm"
       value={[value]}
       onValueChange={(v) => {
@@ -19,10 +22,10 @@ export function DensityToggle({ value, onChange }: DensityToggleProps) {
         if (next === 'compact' || next === 'comfortable') onChange(next);
       }}
     >
-      <Toggle value="comfortable" iconOnly aria-label={t('table.comfortable')}>
+      <Toggle value="comfortable" iconOnly aria-label={labels?.comfortable ?? t('table.comfortable')}>
         <Rows2 size={15} aria-hidden />
       </Toggle>
-      <Toggle value="compact" iconOnly aria-label={t('table.compact')}>
+      <Toggle value="compact" iconOnly aria-label={labels?.compact ?? t('table.compact')}>
         <Rows3 size={15} aria-hidden />
       </Toggle>
     </ToggleGroup>