@cdx-ui/data-grid 0.0.1-beta.185

package/src/DataGrid.tsx

@@ -0,0 +1,622 @@
+import { useMemo, type CSSProperties, type ReactNode } from 'react';
+import { Platform, View, type ViewStyle } from 'react-native';
+import {
+  Checkbox,
+  IconButton,
+  Input,
+  Skeleton,
+  Table,
+  TablePagination,
+  Text,
+} from '@cdx-ui/components';
+import { KeyboardArrowDown, KeyboardArrowUp, Search } from '@cdx-ui/icons';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, useControllableState } from '@cdx-ui/utils';
+import { normalizeGridAlignment } from './adapter/columns';
+import {
+  dataGridBodyVariants,
+  dataGridCellVariants,
+  dataGridEmptyOverlayVariants,
+  dataGridFilterInputVariants,
+  dataGridFooterVariants,
+  dataGridHeadVariants,
+  dataGridHeaderCellInnerVariants,
+  dataGridHeaderVariants,
+  dataGridMainVariants,
+  dataGridOverlayVariants,
+  dataGridPaginationRangeVariants,
+  dataGridPaginationVariants,
+  dataGridRootVariants,
+  dataGridSelectCellVariants,
+  dataGridSelectHeadVariants,
+  dataGridTableVariants,
+  dataGridToolbarActionsVariants,
+  dataGridToolbarSearchVariants,
+  dataGridToolbarVariants,
+} from './styles';
+import {
+  DEFAULT_PAGE_SIZE_OPTIONS,
+  DEFAULT_PAGINATION_MODEL,
+  EMPTY_SELECTION,
+  SELECT_COLUMN_ID,
+  type DataGridProps,
+  type GridColDef,
+  type GridValidRowModel,
+} from './types';
+import { resolveRowId, useDataGridTable } from './useDataGridTable';
+
+const MAX_SKELETON_ROW_COUNT = 10;
+const DEFAULT_WEB_COLUMN_WIDTH = 100;
+const SELECT_COLUMN_WIDTH = 56;
+const WEB_TABLE_CONTAINER_STYLE: ViewStyle = { overflow: 'visible' };
+
+function cellStyle<R extends GridValidRowModel>(
+  col: GridColDef<R> | undefined,
+  webWidth?: CSSProperties['width'],
+): ViewStyle | undefined {
+  if (!col) {
+    return undefined;
+  }
+  const style: ViewStyle = {};
+  if (Platform.OS === 'web' && webWidth !== undefined) {
+    style.width = webWidth as ViewStyle['width'];
+  } else if (col.width !== undefined) {
+    style.width = col.width;
+  }
+  if (col.minWidth !== undefined) {
+    style.minWidth = col.minWidth;
+  }
+  if (Platform.OS !== 'web' && col.flex !== undefined) {
+    style.flex = col.flex;
+  }
+  return Object.keys(style).length > 0 ? style : undefined;
+}
+
+function webColumnWidths<R extends GridValidRowModel>(
+  columns: readonly GridColDef<R>[],
+  checkboxSelection: boolean,
+): Map<string, CSSProperties['width']> {
+  const totalFlex = columns.reduce((total, column) => total + Math.max(column.flex ?? 0, 0), 0);
+  const widths = new Map<string, CSSProperties['width']>();
+
+  if (totalFlex === 0) {
+    for (const column of columns) {
+      if (column.width !== undefined) {
+        widths.set(column.field, column.width);
+      }
+    }
+    return widths;
+  }
+
+  const fixedWidth =
+    (checkboxSelection ? SELECT_COLUMN_WIDTH : 0) +
+    columns.reduce((total, column) => {
+      if ((column.flex ?? 0) > 0) {
+        return total;
+      }
+      return total + Math.max(column.width ?? DEFAULT_WEB_COLUMN_WIDTH, column.minWidth ?? 0);
+    }, 0);
+
+  for (const column of columns) {
+    if ((column.flex ?? 0) > 0) {
+      const share = (column.flex ?? 0) / totalFlex;
+      const percentage = share * 100;
+      const fixedShare = fixedWidth * share;
+      const width = `calc(${percentage.toString()}% - ${fixedShare.toString()}px)`;
+      widths.set(
+        column.field,
+        column.minWidth === undefined ? width : `max(${column.minWidth.toString()}px, ${width})`,
+      );
+    } else {
+      widths.set(
+        column.field,
+        Math.max(column.width ?? DEFAULT_WEB_COLUMN_WIDTH, column.minWidth ?? 0),
+      );
+    }
+  }
+
+  return widths;
+}
+
+function defaultCellContent(value: unknown): ReactNode {
+  if (value == null) {
+    return '';
+  }
+  if (typeof value === 'string' || typeof value === 'number') {
+    return value;
+  }
+
+  try {
+    if (typeof value === 'bigint' || typeof value === 'boolean' || typeof value === 'symbol') {
+      return String(value);
+    }
+    const serialized: unknown = JSON.stringify(value, null, 2);
+    return typeof serialized === 'string' ? serialized : '[Unserializable value]';
+  } catch {
+    return '[Unserializable value]';
+  }
+}
+
+function DefaultLoadingRows<R extends GridValidRowModel>({
+  columns,
+  checkboxSelection,
+  rowCount,
+  columnWidths,
+}: {
+  columns: readonly GridColDef<R>[];
+  checkboxSelection: boolean;
+  rowCount: number;
+  columnWidths: ReadonlyMap<string, CSSProperties['width']>;
+}) {
+  return (
+    <>
+      {Array.from({ length: rowCount }, (_, rowIndex) => (
+        <Table.Row
+          key={rowIndex}
+          className="pointer-events-none web:hover:bg-surface-primary"
+          testID={rowIndex === 0 ? 'data-grid-default-loading-rows' : undefined}
+        >
+          {checkboxSelection ? (
+            <Table.Cell align="center" className={dataGridSelectCellVariants()}>
+              <Skeleton className="size-5" />
+            </Table.Cell>
+          ) : null}
+          {columns.map((column) => (
+            <Table.Cell
+              key={column.field}
+              align={normalizeGridAlignment(column.align)}
+              className={dataGridCellVariants()}
+              style={cellStyle(column, columnWidths.get(column.field))}
+            >
+              <Skeleton className="h-4 w-3/5" />
+            </Table.Cell>
+          ))}
+        </Table.Row>
+      ))}
+    </>
+  );
+}
+
+function paginationRangeLabel(page: number, pageSize: number, total: number): string {
+  if (total <= 0) {
+    return `0\u20130 of 0`;
+  }
+  const start = page * pageSize + 1;
+  const end = Math.min((page + 1) * pageSize, total);
+  return `${start.toString()}\u2013${end.toString()} of ${total.toString()}`;
+}
+
+function withCurrentPageSize(
+  options: readonly (number | { value: number; label: string })[],
+  pageSize: number,
+): (number | { value: number; label: string })[] {
+  const exists = options.some((option) =>
+    typeof option === 'number' ? option === pageSize : option.value === pageSize,
+  );
+  return exists ? [...options] : [pageSize, ...options];
+}
+
+function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
+  const {
+    rows,
+    columns,
+    getRowId,
+    loading = false,
+    checkboxSelection = false,
+    hideFooter = false,
+    hideFooterPagination = false,
+    disableColumnSorting = false,
+    paginationMode = 'client',
+    sortingMode = 'client',
+    rowCount,
+    showToolbar = false,
+    headerFilters = false,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+    noRowsOverlay,
+    loadingOverlay,
+    toolbarActions,
+    className,
+    style,
+    label,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+  } = props;
+
+  const [sortModel, setSortModel] = useControllableState({
+    prop: props.sortModel,
+    defaultProp: props.defaultSortModel ?? [],
+    onChange: props.onSortModelChange,
+  });
+  const [paginationModel, setPaginationModel] = useControllableState({
+    prop: props.paginationModel,
+    defaultProp: props.defaultPaginationModel ?? DEFAULT_PAGINATION_MODEL,
+    onChange: props.onPaginationModelChange,
+  });
+  const [filterModel, setFilterModel] = useControllableState({
+    prop: props.filterModel,
+    defaultProp: props.defaultFilterModel ?? [],
+    onChange: props.onFilterModelChange,
+  });
+  const [quickFilter, setQuickFilter] = useControllableState({
+    prop: props.quickFilter,
+    defaultProp: props.defaultQuickFilter ?? '',
+    onChange: props.onQuickFilterChange,
+  });
+  const [rowSelectionModel, setRowSelectionModel] = useControllableState({
+    prop: props.rowSelectionModel,
+    defaultProp: props.defaultRowSelectionModel ?? EMPTY_SELECTION,
+    onChange: props.onRowSelectionModelChange,
+  });
+
+  const resolvedSortModel = sortModel ?? [];
+  const resolvedPagination = paginationModel ?? DEFAULT_PAGINATION_MODEL;
+  const resolvedFilterModel = filterModel ?? [];
+  const resolvedQuickFilter = quickFilter ?? '';
+  const resolvedSelection = rowSelectionModel ?? EMPTY_SELECTION;
+
+  const {
+    table,
+    setQuickFilter: setQuickFilterWithPageReset,
+    setColumnFilter,
+  } = useDataGridTable({
+    rows,
+    columns,
+    getRowId,
+    checkboxSelection,
+    disableColumnSorting,
+    paginationMode,
+    sortingMode,
+    rowCount,
+    sortModel: resolvedSortModel,
+    onSortModelChange: (model) => setSortModel(model),
+    paginationModel: resolvedPagination,
+    onPaginationModelChange: (model) => setPaginationModel(model),
+    filterModel: resolvedFilterModel,
+    onFilterModelChange: (model) => setFilterModel(model),
+    quickFilter: resolvedQuickFilter,
+    onQuickFilterChange: (value) => setQuickFilter(value),
+    rowSelectionModel: resolvedSelection,
+    onRowSelectionModelChange: (model) => setRowSelectionModel(model),
+  });
+
+  const colByField = useMemo(() => {
+    const map = new Map<string, GridColDef<R>>();
+    for (const col of columns) {
+      map.set(col.field, col);
+    }
+    return map;
+  }, [columns]);
+  const columnWidths = useMemo(
+    () => webColumnWidths(columns, checkboxSelection),
+    [checkboxSelection, columns],
+  );
+  const hasFlexColumns = useMemo(() => columns.some((column) => (column.flex ?? 0) > 0), [columns]);
+
+  const visibleRows = table.getRowModel().rows;
+  const pageCount = Math.max(table.getPageCount(), 1);
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const filterableCount = table.getFilteredRowModel().rows.length;
+  const headerSelectState =
+    selectedCount === 0
+      ? { checked: false, indeterminate: false }
+      : selectedCount === filterableCount
+        ? { checked: true, indeterminate: false }
+        : { checked: false, indeterminate: true };
+
+  const accessibleName = ariaLabel ?? label;
+  const isEmpty = !loading && rows.length === 0;
+  const totalCount = paginationMode === 'server' ? (rowCount ?? rows.length) : filterableCount;
+
+  const filterValueFor = (field: string) =>
+    resolvedFilterModel.find((item) => item.field === field)?.value ?? '';
+
+  const showToolbarBar = showToolbar || toolbarActions != null;
+
+  return (
+    <View
+      className={cn(dataGridRootVariants(), className)}
+      style={style}
+      {...mergeDataAttributes({}, dataAttributes({ slot: 'data-grid' }))}
+    >
+      {showToolbarBar ? (
+        <View className={dataGridToolbarVariants()}>
+          {showToolbar ? (
+            <Input size="small" className={dataGridToolbarSearchVariants()}>
+              <Input.Icon as={Search} />
+              <Input.Field
+                value={resolvedQuickFilter}
+                onChangeText={setQuickFilterWithPageReset}
+                placeholder="Search"
+                accessibilityLabel="Search"
+              />
+            </Input>
+          ) : null}
+          {toolbarActions ? (
+            <View className={dataGridToolbarActionsVariants()}>{toolbarActions}</View>
+          ) : null}
+        </View>
+      ) : null}
+
+      <View className={dataGridMainVariants()}>
+        <Table
+          className={cn(
+            dataGridTableVariants(),
+            Platform.OS === 'web' && hasFlexColumns ? 'table-fixed' : undefined,
+          )}
+          containerStyle={Platform.OS === 'web' ? WEB_TABLE_CONTAINER_STYLE : undefined}
+          accessibilityLabel={accessibleName}
+          {...(Platform.OS === 'web'
+            ? {
+                'aria-label': accessibleName,
+                'aria-labelledby': ariaLabelledBy,
+                'aria-busy': loading,
+              }
+            : {})}
+        >
+          {label ? <Table.Caption>{label}</Table.Caption> : null}
+          {Platform.OS === 'web' && hasFlexColumns ? (
+            <colgroup>
+              {checkboxSelection ? <col style={{ width: SELECT_COLUMN_WIDTH }} /> : null}
+              {columns.map((column) => (
+                <col
+                  key={column.field}
+                  style={{
+                    width: columnWidths.get(column.field),
+                    minWidth: column.minWidth,
+                  }}
+                />
+              ))}
+            </colgroup>
+          ) : null}
+          <Table.Header className={dataGridHeaderVariants()}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <Table.Row key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  if (header.id === SELECT_COLUMN_ID) {
+                    return (
+                      <Table.Head
+                        key={header.id}
+                        align="center"
+                        className={dataGridSelectHeadVariants()}
+                      >
+                        <Checkbox
+                          value="select-all"
+                          isChecked={headerSelectState.checked}
+                          isIndeterminate={headerSelectState.indeterminate}
+                          onChange={() => table.toggleAllRowsSelected()}
+                          accessibilityLabel="Select all"
+                          aria-label="Select all"
+                        />
+                      </Table.Head>
+                    );
+                  }
+
+                  const col = colByField.get(header.column.id);
+                  const sorted = header.column.getIsSorted();
+                  const canSort = !disableColumnSorting && header.column.getCanSort();
+                  const headerAlign = col?.headerAlign ?? col?.align;
+                  const SortIcon =
+                    sorted === 'asc'
+                      ? KeyboardArrowUp
+                      : sorted === 'desc'
+                        ? KeyboardArrowDown
+                        : KeyboardArrowDown;
+
+                  return (
+                    <Table.Head
+                      key={header.id}
+                      align={normalizeGridAlignment(headerAlign)}
+                      className={dataGridHeadVariants()}
+                      style={cellStyle(col, columnWidths.get(header.column.id))}
+                      {...(Platform.OS === 'web' && canSort
+                        ? {
+                            'aria-sort':
+                              sorted === 'asc'
+                                ? 'ascending'
+                                : sorted === 'desc'
+                                  ? 'descending'
+                                  : 'none',
+                          }
+                        : {})}
+                    >
+                      <View className={dataGridHeaderCellInnerVariants()}>
+                        <Text className="font-medium text-content-primary">
+                          {col?.renderHeader ? col.renderHeader() : (col?.headerName ?? col?.field)}
+                        </Text>
+                        {canSort ? (
+                          <IconButton
+                            as={SortIcon}
+                            variant="ghost"
+                            color="neutral"
+                            size="small"
+                            iconClassName="size-4"
+                            accessibilityLabel={`Sort by ${col?.headerName ?? header.column.id}`}
+                            onPress={() => {
+                              header.column.toggleSorting();
+                            }}
+                            className={sorted ? undefined : 'opacity-40'}
+                          />
+                        ) : null}
+                      </View>
+                    </Table.Head>
+                  );
+                })}
+              </Table.Row>
+            ))}
+            {headerFilters ? (
+              <Table.Row>
+                {table.getAllLeafColumns().map((column) => {
+                  if (column.id === SELECT_COLUMN_ID) {
+                    return (
+                      <Table.Cell
+                        key={column.id}
+                        align="center"
+                        className={dataGridSelectHeadVariants()}
+                      />
+                    );
+                  }
+                  const col = colByField.get(column.id);
+                  const headerAlign = col?.headerAlign ?? col?.align;
+                  if (col?.filterable === false) {
+                    return (
+                      <Table.Head
+                        key={column.id}
+                        align={normalizeGridAlignment(headerAlign)}
+                        className={dataGridHeadVariants()}
+                        style={cellStyle(col, columnWidths.get(column.id))}
+                      />
+                    );
+                  }
+                  return (
+                    <Table.Head
+                      key={column.id}
+                      align={normalizeGridAlignment(headerAlign)}
+                      className={dataGridHeadVariants()}
+                      style={cellStyle(col, columnWidths.get(column.id))}
+                    >
+                      <Input size="small" className={dataGridFilterInputVariants()}>
+                        <Input.Field
+                          value={filterValueFor(column.id)}
+                          onChangeText={(value) => setColumnFilter(column.id, value)}
+                          placeholder="Filter"
+                          accessibilityLabel={`Filter ${col?.headerName ?? column.id}`}
+                        />
+                      </Input>
+                    </Table.Head>
+                  );
+                })}
+              </Table.Row>
+            ) : null}
+          </Table.Header>
+          <Table.Body className={dataGridBodyVariants()}>
+            {loading && loadingOverlay == null ? (
+              <DefaultLoadingRows
+                columns={columns}
+                checkboxSelection={checkboxSelection}
+                rowCount={Math.min(resolvedPagination.pageSize, MAX_SKELETON_ROW_COUNT)}
+                columnWidths={columnWidths}
+              />
+            ) : isEmpty ? null : (
+              visibleRows.map((row) => {
+                const rowId = resolveRowId(row.original, getRowId);
+                return (
+                  <Table.Row key={row.id}>
+                    {row.getAllCells().map((cell) => {
+                      if (cell.column.id === SELECT_COLUMN_ID) {
+                        return (
+                          <Table.Cell
+                            key={cell.id}
+                            align="center"
+                            className={dataGridSelectCellVariants()}
+                          >
+                            <Checkbox
+                              value={String(rowId)}
+                              isChecked={row.getIsSelected()}
+                              onChange={() => row.toggleSelected()}
+                              accessibilityLabel={`Select row ${String(rowId)}`}
+                              aria-label={`Select row ${String(rowId)}`}
+                            />
+                          </Table.Cell>
+                        );
+                      }
+
+                      const col = colByField.get(cell.column.id);
+                      const value = cell.getValue();
+                      let content: ReactNode;
+                      if (col?.renderCell) {
+                        content = col.renderCell({
+                          value,
+                          row: row.original,
+                          field: col.field,
+                          id: rowId,
+                        });
+                      } else if (col?.valueFormatter) {
+                        content = col.valueFormatter(value, row.original, col);
+                      } else {
+                        content = defaultCellContent(value);
+                      }
+
+                      return (
+                        <Table.Cell
+                          key={cell.id}
+                          align={normalizeGridAlignment(col?.align)}
+                          className={dataGridCellVariants()}
+                          style={cellStyle(col, columnWidths.get(cell.column.id))}
+                        >
+                          {content}
+                        </Table.Cell>
+                      );
+                    })}
+                  </Table.Row>
+                );
+              })
+            )}
+          </Table.Body>
+        </Table>
+
+        {isEmpty ? (
+          <View className={dataGridEmptyOverlayVariants()} accessibilityLabel="No rows">
+            {noRowsOverlay ?? <Text className="text-center text-content-secondary">No rows</Text>}
+          </View>
+        ) : null}
+
+        {loading ? (
+          <Text
+            className="pointer-events-none absolute h-px w-px overflow-hidden opacity-0"
+            accessibilityLiveRegion="polite"
+          >
+            Loading
+          </Text>
+        ) : null}
+
+        {loading && loadingOverlay != null ? (
+          <View className={dataGridOverlayVariants({ headerFilters })}>{loadingOverlay}</View>
+        ) : null}
+      </View>
+
+      {!hideFooter &&
+      !hideFooterPagination &&
+      (paginationMode === 'server' ? totalCount > 0 : rows.length > 0) ? (
+        <View className={dataGridFooterVariants()}>
+          <TablePagination
+            page={resolvedPagination.page + 1}
+            count={pageCount}
+            pageSize={resolvedPagination.pageSize}
+            pageSizeOptions={withCurrentPageSize(pageSizeOptions, resolvedPagination.pageSize)}
+            onPageChange={(page: number) =>
+              setPaginationModel({ ...resolvedPagination, page: page - 1 })
+            }
+            onPageSizeChange={(pageSize: number) => setPaginationModel({ page: 0, pageSize })}
+            disabled={loading}
+            accessibilityLabel="Grid pagination"
+            className={dataGridPaginationVariants()}
+          >
+            <Text size="md" className="text-content-primary">
+              Rows per page:
+            </Text>
+            <TablePagination.PageSize />
+            <TablePagination.Status className={dataGridPaginationRangeVariants()}>
+              <Text size="md" className="text-content-primary">
+                {paginationRangeLabel(
+                  resolvedPagination.page,
+                  resolvedPagination.pageSize,
+                  totalCount,
+                )}
+              </Text>
+            </TablePagination.Status>
+            <TablePagination.Previous className="h-11 w-11 min-w-11" />
+            <TablePagination.Next className="h-11 w-11 min-w-11" />
+          </TablePagination>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export function DataGrid<R extends GridValidRowModel>(props: DataGridProps<R>) {
+  return <DataGridInner {...props} />;
+}
+
+DataGrid.displayName = 'DataGrid';
+
+export type { DataGridProps };

package/src/adapter/columns.test.ts

@@ -0,0 +1,47 @@
+import { applyUpdater, gridColDefToColumnDef, normalizeGridAlignment } from './columns';
+
+describe('gridColDefToColumnDef', () => {
+  it('maps field, header, and sort/filter flags', () => {
+    const def = gridColDefToColumnDef({
+      field: 'name',
+      headerName: 'Name',
+      sortable: false,
+      filterable: false,
+    });
+
+    expect(def.id).toBe('name');
+    expect(def.header).toBe('Name');
+    expect(def.enableSorting).toBe(false);
+    expect(def.enableColumnFilter).toBe(false);
+  });
+
+  it('uses valueGetter when provided', () => {
+    const def = gridColDefToColumnDef({
+      field: 'name',
+      valueGetter: (_value, row) => String(row.name).toUpperCase(),
+    });
+
+    expect(def.accessorFn?.({ name: 'operating' }, 0)).toBe('OPERATING');
+  });
+});
+
+describe('applyUpdater', () => {
+  it('returns the next value or applies a function', () => {
+    expect(applyUpdater(2, 1)).toBe(2);
+    expect(applyUpdater((prev: number) => prev + 1, 1)).toBe(2);
+  });
+});
+
+describe('normalizeGridAlignment', () => {
+  it('passes through logical alignment and defaults to start', () => {
+    expect(normalizeGridAlignment('start')).toBe('start');
+    expect(normalizeGridAlignment('center')).toBe('center');
+    expect(normalizeGridAlignment('end')).toBe('end');
+    expect(normalizeGridAlignment(undefined)).toBe('start');
+  });
+
+  it('normalizes deprecated physical aliases', () => {
+    expect(normalizeGridAlignment('left')).toBe('start');
+    expect(normalizeGridAlignment('right')).toBe('end');
+  });
+});

package/src/adapter/columns.ts

@@ -0,0 +1,32 @@
+import type { TableAlignment } from '@cdx-ui/components';
+import type { GridAlignment, GridColDef, GridValidRowModel } from '../types';
+
+export function gridColDefToColumnDef<R extends GridValidRowModel>(col: GridColDef<R>) {
+  return {
+    id: col.field,
+    accessorFn: (row: R) => {
+      const raw = row[col.field];
+      return col.valueGetter ? col.valueGetter(raw, row, col) : raw;
+    },
+    header: col.headerName ?? col.field,
+    enableSorting: col.sortable !== false,
+    enableColumnFilter: col.filterable !== false,
+    enableGlobalFilter: col.filterable !== false,
+    filterFn: 'includesString' as const,
+    meta: { colDef: col },
+  };
+}
+
+export function applyUpdater<T>(updater: T | ((old: T) => T), previous: T): T {
+  return typeof updater === 'function' ? (updater as (old: T) => T)(previous) : updater;
+}
+
+export function normalizeGridAlignment(align?: GridAlignment): TableAlignment {
+  if (align === 'left') {
+    return 'start';
+  }
+  if (align === 'right') {
+    return 'end';
+  }
+  return align ?? 'start';
+}