@himakarinv/nativex 1.0.0

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,822 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+import { ActionsMenu, type ActionMenuItem } from '../ActionsMenu';
+import { Badge, BadgeColor, BadgeSize } from '../Badge';
+import { Button, ButtonSize, ButtonVariant, IconPosition } from '../Button';
+import { Checkbox, CheckboxSize } from '../Checkbox';
+import { Icon, IconName, isIconName } from '../Icon';
+import { InputDropdown, InputDropdownSize, type InputDropdownItem } from '../InputDropdown';
+import { InputField } from '../InputField';
+import {
+  Pagination,
+  PaginationVariant,
+  SimpleLayout,
+  PageNumberShape,
+} from '../Pagination';
+import { Timepicker, TimepickerSize, type TimepickerTime } from '../Timepicker';
+
+export type DataTableRow = Record<string, unknown> & { id?: string };
+
+export type DataTableRowAction = {
+  id: string;
+  label: string;
+  icon?: string;
+  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+  dividerBefore?: boolean;
+};
+
+export type DataTableCellEditorKind = 'text' | 'dropdown' | 'time';
+
+export type DataTableColumnCellEditorMeta = {
+  showHeaderHelpIcon?: boolean;
+  headerHelpIconAlt?: string;
+  cellEditor?: DataTableCellEditorKind;
+  cellEditorField?: string;
+  cellEditorPlaceholder?: string;
+  cellEditorDropdownOptions?: InputDropdownItem[];
+  cellEditorDropdownLabel?: string;
+  cellEditorDropdownSuffix?: boolean;
+  cellEditorTimeLabel?: string;
+  cellEditorTimeMeridian?: boolean;
+  cellEditorTimeSize?: 'small' | 'medium' | 'large';
+};
+
+export type DataTableColumn = {
+  id: string;
+  header?: string;
+  accessor?: string;
+  enableSorting?: boolean;
+  meta?: DataTableColumnCellEditorMeta;
+};
+
+export type DataTableCellValueChangeEvent = {
+  columnId: string;
+  row: DataTableRow;
+  field: string;
+  value: unknown;
+};
+
+export type DataTableProps = {
+  data: DataTableRow[];
+  columns: DataTableColumn[];
+  searchPlaceholder?: string;
+  searchInputId?: string;
+  searchFieldLabel?: string;
+  filterToolbarLabel?: string;
+  statusFilterGroupAriaLabel?: string;
+  statusFilterPlaceholder?: string;
+  statusFilterOptions?: InputDropdownItem[];
+  statusFilterAllValue?: string;
+  maxTeamTagsVisible?: number;
+  showToolbar?: boolean;
+  showPagination?: boolean;
+  pageSize?: number;
+  paginationMaxPages?: number;
+  selectAllRowsAriaLabel?: string;
+  actionsColumnHeaderLabel?: string;
+  selectRowAriaLabelPattern?: string;
+  rowActionsTriggerAriaLabel?: string;
+  rowActionsMenuAriaLabel?: string;
+  rowActions?: DataTableRowAction[];
+  rowActionsDisabled?: (row: DataTableRow) => boolean;
+  rowActionsVisibleLimit?: number | null;
+  viewColumnId?: string;
+  viewColumnHeaderLabel?: string;
+  viewColumnIcon?: string;
+  viewColumnAriaLabel?: string;
+  viewColumnActionId?: string;
+  personColumnId?: string;
+  personAvatarUrlField?: string;
+  personAvatarColorField?: string;
+  personNameField?: string;
+  personHandleField?: string;
+  personInitialsField?: string;
+  statusColumnId?: string;
+  statusValueField?: string;
+  teamsColumnId?: string;
+  teamsValueField?: string;
+  emptyMessage?: string;
+  onRowAction?: (event: { action: string; row: DataTableRow }) => void;
+  onSelectionChange?: (rows: DataTableRow[]) => void;
+  onCellValueChange?: (event: DataTableCellValueChangeEvent) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+type SortDir = 'asc' | 'desc';
+
+const COL_WIDTH: Record<string, number> = {
+  select: spacing['7xl'],
+  name: spacing['7xl'] * 4,
+  status: spacing['7xl'] * 2,
+  role: spacing['7xl'] * 3 + spacing.lg,
+  email: spacing['7xl'] * 4 + spacing.lg,
+  teams: spacing['7xl'] * 3,
+  view: spacing['7xl'] + spacing.base,
+  shiftType: spacing['7xl'] * 3,
+  workStart: spacing['7xl'] * 4,
+  workEnd: spacing['7xl'] * 4,
+  extraHours: spacing['7xl'] * 2,
+  notes: spacing['7xl'] * 3,
+};
+
+function actionColumnWidth(count: number) {
+  const buttons = Math.max(1, count);
+  if (buttons === 1) {
+    return spacing['7xl'] + spacing.xl;
+  }
+  return buttons * spacing['5xl'] + (buttons - 1) * spacing.md + spacing.sm * 2;
+}
+
+function columnWidth(id: string, actionsWidth: number) {
+  if (id === 'actions') {
+    return actionsWidth;
+  }
+  return COL_WIDTH[id] ?? spacing['7xl'] * 3;
+}
+
+function rowId(row: DataTableRow, index: number) {
+  return String(row.id ?? index);
+}
+
+function fieldOf(row: DataTableRow, key: string) {
+  return row[key];
+}
+
+function cellValue(row: DataTableRow, column: DataTableColumn) {
+  return fieldOf(row, column.accessor ?? column.id);
+}
+
+function avatarIconName(value: unknown): string | null {
+  return typeof value === 'string' && isIconName(value) ? value : null;
+}
+
+function initials(row: DataTableRow, nameKey: string, initialsKey: string) {
+  const preset = fieldOf(row, initialsKey);
+  if (typeof preset === 'string' && preset.trim()) {
+    return preset.trim();
+  }
+  const parts = String(fieldOf(row, nameKey) ?? '')
+    .split(/\s+/)
+    .filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0]![0]}${parts[1]![0]}`.toUpperCase();
+  }
+  return (parts[0]?.slice(0, 2) ?? '?').toUpperCase();
+}
+
+function teamsLine(teams: unknown, max: number) {
+  const list = Array.isArray(teams) ? teams.map(String) : [];
+  if (list.length <= max) {
+    return list.join(', ');
+  }
+  return `${list.slice(0, max).join(', ')}, +${list.length - max}`;
+}
+
+function statusBadgeColor(status: unknown): BadgeColor {
+  const key = String(status ?? '')
+    .trim()
+    .toLowerCase();
+  if (key === 'active') {
+    return BadgeColor.Success;
+  }
+  if (key === 'inactive') {
+    return BadgeColor.Gray;
+  }
+  if (key === 'pending') {
+    return BadgeColor.Warning;
+  }
+  return BadgeColor.BlueGray;
+}
+
+function titleCase(value: unknown) {
+  const text = String(value ?? '');
+  return text ? text.charAt(0).toUpperCase() + text.slice(1) : '';
+}
+
+function matchesSearch(row: DataTableRow, query: string) {
+  const q = query.trim().toLowerCase();
+  if (!q) {
+    return true;
+  }
+  const parts: string[] = [];
+  const push = (value: unknown) => {
+    if (value == null) {
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach(push);
+    } else {
+      parts.push(String(value));
+    }
+  };
+  push(row.name);
+  push(row.handle);
+  push(row.email);
+  push(row.role);
+  push(row.status);
+  push(row.teams);
+  return parts.join(' ').toLowerCase().includes(q);
+}
+
+function parseTime(value: unknown): TimepickerTime | null {
+  if (value == null || typeof value !== 'object') {
+    return null;
+  }
+  const record = value as Record<string, unknown>;
+  const hour = Number(record.hour);
+  const minute = Number(record.minute);
+  if (!Number.isFinite(hour) || !Number.isFinite(minute)) {
+    return null;
+  }
+  const second = Number(record.second ?? 0);
+  return { hour, minute, second: Number.isFinite(second) ? second : 0 };
+}
+
+function visibleActions(actions: DataTableRowAction[], limit: number | null) {
+  if (limit != null) {
+    if (limit <= 0) {
+      return [];
+    }
+    const withIcons = actions.filter((action) => action.icon);
+    return (withIcons.length > 0 ? withIcons : actions).slice(0, limit);
+  }
+  const withIcons = actions.filter((action) => action.icon);
+  if (withIcons.length > 0) {
+    return withIcons.slice(0, actions.length > 3 ? 2 : 3);
+  }
+  return actions.slice(0, 1);
+}
+
+function overflowActions(actions: DataTableRowAction[], limit: number | null) {
+  const visibleIds = new Set(visibleActions(actions, limit).map((action) => action.id));
+  return actions.filter((action) => !visibleIds.has(action.id));
+}
+
+function editorField(column: DataTableColumn) {
+  return column.meta?.cellEditorField?.trim() || column.id;
+}
+
+export function DataTable({
+  data,
+  columns,
+  searchPlaceholder = '',
+  searchFieldLabel = '',
+  filterToolbarLabel = '',
+  statusFilterGroupAriaLabel = '',
+  statusFilterPlaceholder = '',
+  statusFilterOptions = [],
+  statusFilterAllValue = 'all',
+  maxTeamTagsVisible = 2,
+  showToolbar = true,
+  showPagination = true,
+  pageSize = 10,
+  paginationMaxPages = 5,
+  selectAllRowsAriaLabel = '',
+  actionsColumnHeaderLabel = '',
+  selectRowAriaLabelPattern = '',
+  rowActionsTriggerAriaLabel = '',
+  rowActionsMenuAriaLabel = '',
+  rowActions = [],
+  rowActionsDisabled,
+  rowActionsVisibleLimit = null,
+  viewColumnId = 'view',
+  viewColumnHeaderLabel = 'View',
+  viewColumnIcon = IconName.Eye,
+  viewColumnAriaLabel = 'View',
+  viewColumnActionId = 'view',
+  personColumnId = 'name',
+  personAvatarUrlField = 'avatarUrl',
+  personAvatarColorField = 'avatarColor',
+  personNameField = 'name',
+  personHandleField = 'handle',
+  personInitialsField = 'initials',
+  statusColumnId = 'status',
+  statusValueField = 'status',
+  teamsColumnId = 'teams',
+  teamsValueField = 'teams',
+  emptyMessage = 'No data available to display.',
+  onRowAction,
+  onSelectionChange,
+  onCellValueChange,
+  style,
+}: DataTableProps) {
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState(statusFilterAllValue);
+  const [sort, setSort] = useState<{ id: string; dir: SortDir } | null>(null);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    setPage(1);
+  }, [search, statusFilter, pageSize, data.length]);
+
+  const shownActions = visibleActions(rowActions, rowActionsVisibleLimit);
+  const menuActions = overflowActions(rowActions, rowActionsVisibleLimit);
+  const actionsWidth = actionColumnWidth(shownActions.length + (menuActions.length > 0 ? 1 : 0));
+
+  const filtered = useMemo(() => {
+    return data.filter((row) => {
+      if (!matchesSearch(row, search)) {
+        return false;
+      }
+      if (statusFilter && statusFilter !== statusFilterAllValue) {
+        return String(fieldOf(row, statusColumnId)) === statusFilter;
+      }
+      return true;
+    });
+  }, [data, search, statusFilter, statusFilterAllValue, statusColumnId]);
+
+  const sorted = useMemo(() => {
+    if (!sort) {
+      return filtered;
+    }
+    const column = columns.find((item) => item.id === sort.id);
+    const copy = [...filtered];
+    copy.sort((left, right) => {
+      const a = String(cellValue(left, column ?? { id: sort.id }) ?? '');
+      const b = String(cellValue(right, column ?? { id: sort.id }) ?? '');
+      const cmp = a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+      return sort.dir === 'asc' ? cmp : -cmp;
+    });
+    return copy;
+  }, [filtered, sort, columns]);
+
+  const size = Math.max(1, pageSize);
+  const pageCount = Math.max(1, Math.ceil(sorted.length / size));
+  const safePage = Math.min(page, pageCount);
+  const paged = sorted.slice((safePage - 1) * size, safePage * size);
+  const allFilteredSelected = filtered.length > 0 && filtered.every((row, index) => selected.includes(rowId(row, index)));
+
+  function emitSelection(next: string[]) {
+    setSelected(next);
+    onSelectionChange?.(data.filter((row, index) => next.includes(rowId(row, index))));
+  }
+
+  function toggleSort(column: DataTableColumn) {
+    if (column.enableSorting === false || column.id === 'select' || column.id === 'actions' || column.id === viewColumnId) {
+      return;
+    }
+    setSort((current) => {
+      if (current?.id !== column.id) {
+        return { id: column.id, dir: 'asc' };
+      }
+      if (current.dir === 'asc') {
+        return { id: column.id, dir: 'desc' };
+      }
+      return null;
+    });
+  }
+
+  function selectAria(id: string) {
+    return selectRowAriaLabelPattern.trim() ? selectRowAriaLabelPattern.replace(/\{\{\s*id\s*\}\}/g, id) : `Select row ${id}`;
+  }
+
+  function isDisabled(row: DataTableRow) {
+    return rowActionsDisabled ? Boolean(rowActionsDisabled(row)) : false;
+  }
+
+  function menuItems(row: DataTableRow): ActionMenuItem<DataTableRow>[] {
+    return menuActions.map((action) => ({
+      label: action.label,
+      icon: action.icon,
+      variant: action.variant,
+      dividerBefore: action.dividerBefore,
+      action: (target) => onRowAction?.({ action: action.id, row: target }),
+      disabled: () => isDisabled(row),
+    }));
+  }
+
+  return (
+    <View style={[styles.root, style]}>
+      {showToolbar ? (
+        <View style={styles.toolbar}>
+          <View style={styles.searchField}>
+            <InputField
+              fullWidth
+              label={searchFieldLabel || 'Search table'}
+              placeholder={searchPlaceholder}
+              leftIconName={IconName.Search}
+              accessibilityLabel={searchFieldLabel || searchPlaceholder || 'Search table'}
+              value={search}
+              onValueChange={setSearch}
+            />
+          </View>
+          {filterToolbarLabel || statusFilterOptions.length > 0 ? (
+            <View style={styles.filterRow} accessibilityLabel={statusFilterGroupAriaLabel || undefined}>
+              {filterToolbarLabel ? <Text style={styles.filterLabel}>{filterToolbarLabel}</Text> : null}
+              {statusFilterOptions.length > 0 ? (
+                <View style={styles.filterField}>
+                  <InputDropdown
+                    label=""
+                    suffix={false}
+                    size={InputDropdownSize.Small}
+                    options={statusFilterOptions}
+                    placeholder={statusFilterPlaceholder}
+                    selectedValue={statusFilter}
+                    onSelectionChange={(item) => setStatusFilter(item?.value ?? statusFilterAllValue)}
+                  />
+                </View>
+              ) : null}
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+
+      <ScrollView horizontal nestedScrollEnabled showsHorizontalScrollIndicator>
+        <View style={styles.grid}>
+          <View style={styles.headerRow}>
+            {columns.map((column) => {
+              const sortable = column.enableSorting !== false && column.id !== 'select' && column.id !== 'actions' && column.id !== viewColumnId;
+              const dir = sort?.id === column.id ? sort.dir : null;
+              return (
+                <Pressable
+                  key={column.id}
+                  disabled={!sortable && column.id !== 'select'}
+                  onPress={() => toggleSort(column)}
+                  style={[
+                    styles.th,
+                    { width: columnWidth(column.id, actionsWidth) },
+                    (column.id === 'actions' || column.id === viewColumnId) && styles.thCenter,
+                    column.id === 'actions' && styles.thActions,
+                  ]}>
+                  {column.id === 'select' ? (
+                    <Checkbox
+                      size={CheckboxSize.Small}
+                      checked={allFilteredSelected}
+                      accessibilityLabel={selectAllRowsAriaLabel || 'Select all rows'}
+                      onCheckedChange={(checked) =>
+                        emitSelection(checked ? filtered.map((row, index) => rowId(row, index)) : [])
+                      }
+                    />
+                  ) : (
+                    <View style={styles.thInner}>
+                      <Text style={styles.thLabel} numberOfLines={1}>
+                        {column.id === 'actions'
+                          ? actionsColumnHeaderLabel
+                          : column.id === viewColumnId
+                            ? viewColumnHeaderLabel
+                            : column.header ?? ''}
+                      </Text>
+                      {column.meta?.showHeaderHelpIcon ? (
+                        <Icon name={IconName.HelpCircle} size={spacing.base} color={colors.dataTable.muted} decorative />
+                      ) : null}
+                      {sortable ? (
+                        <View style={dir === 'asc' ? styles.sortAsc : undefined}>
+                          <Icon
+                            name={IconName.ChevronDown}
+                            size={14}
+                            color={dir ? colors.dataTable.text : colors.dataTable.muted}
+                            decorative
+                          />
+                        </View>
+                      ) : null}
+                    </View>
+                  )}
+                </Pressable>
+              );
+            })}
+          </View>
+
+          {paged.length === 0 ? (
+            <View style={[styles.empty, { width: columns.reduce((sum, column) => sum + columnWidth(column.id, actionsWidth), 0) }]}>
+              <Text style={styles.emptyText}>{emptyMessage}</Text>
+            </View>
+          ) : (
+            paged.map((row, index) => {
+              const id = rowId(row, data.indexOf(row) === -1 ? index : data.indexOf(row));
+              const checked = selected.includes(id);
+              const avatarName = avatarIconName(fieldOf(row, personAvatarUrlField));
+              return (
+                <View key={id} style={[styles.bodyRow, index % 2 === 1 && styles.bodyRowStripe, checked && styles.bodyRowSelected]}>
+                  {columns.map((column) => (
+                    <View
+                      key={`${id}-${column.id}`}
+                      style={[
+                        styles.td,
+                        { width: columnWidth(column.id, actionsWidth) },
+                        (column.id === 'actions' || column.id === viewColumnId) && styles.tdCenter,
+                        column.id === 'actions' && styles.tdActions,
+                      ]}>
+                      {column.id === 'select' ? (
+                        <Checkbox
+                          size={CheckboxSize.Small}
+                          checked={checked}
+                          accessibilityLabel={selectAria(id)}
+                          onCheckedChange={(next) =>
+                            emitSelection(next ? [...selected, id] : selected.filter((item) => item !== id))
+                          }
+                        />
+                      ) : column.meta?.cellEditor === 'text' ? (
+                        <InputField
+                          fullWidth
+                          label=""
+                          suppressLabel
+                          value={String(fieldOf(row, editorField(column)) ?? '')}
+                          placeholder={column.meta.cellEditorPlaceholder ?? ''}
+                          onValueChange={(value) =>
+                            onCellValueChange?.({ columnId: column.id, row, field: editorField(column), value })
+                          }
+                        />
+                      ) : column.meta?.cellEditor === 'dropdown' ? (
+                        <InputDropdown
+                          label={column.meta.cellEditorDropdownLabel ?? ''}
+                          suffix={column.meta.cellEditorDropdownSuffix ?? false}
+                          size={InputDropdownSize.Small}
+                          options={column.meta.cellEditorDropdownOptions ?? []}
+                          placeholder={column.meta.cellEditorPlaceholder ?? ''}
+                          selectedValue={String(fieldOf(row, editorField(column)) ?? '')}
+                          onSelectionChange={(item) =>
+                            onCellValueChange?.({
+                              columnId: column.id,
+                              row,
+                              field: editorField(column),
+                              value: item?.value ?? null,
+                            })
+                          }
+                        />
+                      ) : column.meta?.cellEditor === 'time' ? (
+                        <Timepicker
+                          label={column.meta.cellEditorTimeLabel ?? ''}
+                          time={parseTime(fieldOf(row, editorField(column)))}
+                          meridian={column.meta.cellEditorTimeMeridian ?? false}
+                          size={column.meta.cellEditorTimeSize ?? TimepickerSize.Small}
+                          onTimeChange={(value) =>
+                            onCellValueChange?.({ columnId: column.id, row, field: editorField(column), value })
+                          }
+                        />
+                      ) : column.id === personColumnId ? (
+                        <View style={styles.person}>
+                          {avatarName ? (
+                            <Icon
+                              name={avatarName}
+                              size={spacing['3xl']}
+                              accessibilityLabel={String(fieldOf(row, personNameField) ?? 'Avatar')}
+                            />
+                          ) : (
+                            <View
+                              style={[
+                                styles.avatar,
+                                { backgroundColor: String(fieldOf(row, personAvatarColorField) || colors.gray.medium) },
+                              ]}>
+                              <Text style={styles.avatarText}>{initials(row, personNameField, personInitialsField)}</Text>
+                            </View>
+                          )}
+                          <View style={styles.personText}>
+                            <Text style={styles.name} numberOfLines={1}>
+                              {String(fieldOf(row, personNameField) ?? '')}
+                            </Text>
+                            <Text style={styles.handle} numberOfLines={1}>
+                              {String(fieldOf(row, personHandleField) ?? '')}
+                            </Text>
+                          </View>
+                        </View>
+                      ) : column.id === statusColumnId ? (
+                        <Badge
+                          label={titleCase(fieldOf(row, statusValueField))}
+                          color={statusBadgeColor(fieldOf(row, statusValueField))}
+                          size={BadgeSize.Small}
+                        />
+                      ) : column.id === teamsColumnId ? (
+                        <Text style={styles.cellText} numberOfLines={2}>
+                          {teamsLine(fieldOf(row, teamsValueField), maxTeamTagsVisible)}
+                        </Text>
+                      ) : column.id === viewColumnId ? (
+                        <Button
+                          label=""
+                          variant={ButtonVariant.TertiaryGray}
+                          size={ButtonSize.Small}
+                          iconPosition={IconPosition.Only}
+                          iconName={viewColumnIcon}
+                          iconDecorative
+                          accessibilityLabel={viewColumnAriaLabel}
+                          onPress={() => onRowAction?.({ action: viewColumnActionId, row })}
+                        />
+                      ) : column.id === 'actions' ? (
+                        <View style={styles.actions}>
+                          {shownActions.map((action) => (
+                            <View key={action.id} style={styles.actionSlot}>
+                              <Button
+                                label={action.icon ? '' : action.label}
+                                variant={ButtonVariant.TertiaryGray}
+                                size={ButtonSize.Small}
+                                iconPosition={action.icon ? IconPosition.Only : IconPosition.None}
+                                iconName={action.icon}
+                                iconDecorative
+                                disabled={isDisabled(row)}
+                                accessibilityLabel={action.label}
+                                onPress={() => onRowAction?.({ action: action.id, row })}
+                              />
+                            </View>
+                          ))}
+                          {menuActions.length > 0 ? (
+                            <View style={styles.actionSlot}>
+                              <ActionsMenu
+                                rowData={row}
+                                actions={menuItems(row)}
+                                disabled={isDisabled(row)}
+                                menuAriaLabel={rowActionsTriggerAriaLabel}
+                                menuPanelAriaLabel={rowActionsMenuAriaLabel}
+                              />
+                            </View>
+                          ) : null}
+                        </View>
+                      ) : (
+                        <Text style={styles.cellText} numberOfLines={2}>
+                          {String(cellValue(row, column) ?? '')}
+                        </Text>
+                      )}
+                    </View>
+                  ))}
+                </View>
+              );
+            })
+          )}
+        </View>
+      </ScrollView>
+
+      {showPagination && pageCount > 1 ? (
+        <View style={styles.pager}>
+          <Pagination
+            page={safePage}
+            pageSize={size}
+            collectionSize={sorted.length}
+            maxPages={paginationMaxPages}
+            variant={PaginationVariant.NumberedLink}
+            simpleLayout={SimpleLayout.InfoCenter}
+            pageNumberShape={PageNumberShape.Square}
+            onPageChange={setPage}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: '100%',
+    gap: spacing.md,
+  },
+  toolbar: {
+    width: '100%',
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    paddingTop: spacing.base,
+  },
+  searchField: {
+    flex: 1,
+    minWidth: spacing.none,
+  },
+  filterRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+    gap: spacing.sm,
+    paddingBottom: spacing.xs,
+  },
+  filterLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.text.muted,
+  },
+  filterField: {
+    width: spacing['7xl'] * 3,
+  },
+  grid: {
+    borderWidth: borders.width.thin,
+    borderColor: colors.dataTable.border,
+    borderRadius: radius.lg,
+    overflow: 'hidden',
+    backgroundColor: colors.white,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.dataTable.border,
+    backgroundColor: colors.white,
+  },
+  th: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    justifyContent: 'center',
+  },
+  thCenter: {
+    alignItems: 'center',
+  },
+  thActions: {
+    paddingHorizontal: spacing.sm,
+  },
+  thInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  thLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.dataTable.text,
+  },
+  sortAsc: {
+    transform: [{ rotate: '180deg' }],
+  },
+  bodyRow: {
+    flexDirection: 'row',
+    backgroundColor: colors.dataTable.rowBg,
+    borderBottomWidth: borders.width.thin,
+    borderBottomColor: colors.dataTable.border,
+  },
+  bodyRowStripe: {
+    backgroundColor: colors.dataTable.rowStripeBg,
+  },
+  bodyRowSelected: {
+    backgroundColor: colors.dataTable.inactiveBg,
+  },
+  td: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    justifyContent: 'center',
+  },
+  tdCenter: {
+    alignItems: 'center',
+  },
+  tdActions: {
+    paddingHorizontal: spacing.sm,
+  },
+  cellText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.dataTable.text,
+  },
+  person: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    minWidth: spacing.none,
+  },
+  avatar: {
+    width: spacing['3xl'],
+    height: spacing['3xl'],
+    borderRadius: radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.white,
+    fontWeight: typography.fontWeight.medium,
+  },
+  personText: {
+    flex: 1,
+    minWidth: spacing.none,
+  },
+  name: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.dataTable.namePrimary,
+  },
+  handle: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.dataTable.muted,
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing.md,
+  },
+  actionSlot: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  empty: {
+    paddingVertical: spacing['3xl'],
+    paddingHorizontal: spacing.xl,
+    alignItems: 'center',
+    backgroundColor: colors.dataTable.rowBg,
+  },
+  emptyText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    color: colors.text.muted,
+    textAlign: 'center',
+  },
+  pager: {
+    width: '100%',
+  },
+});