@cdx-ui/data-grid 0.3.10 → 0.3.12

package/src/DataGrid.tsx

@@ -1,7 +1,8 @@
-import { useMemo, type CSSProperties, type ReactNode } from 'react';
-import { Platform, View, type ViewStyle } from 'react-native';
+import { useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+import { I18nManager, Platform, View, type ViewStyle } from 'react-native';
 import {
   Checkbox,
+  Icon,
   IconButton,
   Input,
   Skeleton,
@@ -9,10 +10,35 @@ import {
   TablePagination,
   Text,
 } from '@cdx-ui/components';
-import { KeyboardArrowDown, KeyboardArrowUp, Search } from '@cdx-ui/icons';
+import {
+  Check,
+  Close,
+  FilterList,
+  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 {
+  normalizePinnedColumns,
+  resolveColumnAlign,
+  resolveColumnHeaderAlign,
+} from './adapter/columns';
+import {
+  DEFAULT_PINNED_COLUMN_WIDTH,
+  SELECT_COLUMN_WIDTH,
+  buildPinnedOffsets,
+  isColumnPinningActive,
+  pinnedCellStyle,
+  pinnedEdgeGuidesImage,
+  pinnedFieldSet,
+  warnPinnedFlexColumns,
+  type ColumnPinEdge,
+  type PinnedOffsetMaps,
+} from './adapter/pinning';
+import { getTypedCellText } from './adapter/columnTypes';
+import { DataGridFilterPanel } from './DataGridFilterPanel';
 import {
   dataGridBodyVariants,
   dataGridCellVariants,
@@ -27,6 +53,8 @@ import {
   dataGridOverlayVariants,
   dataGridPaginationRangeVariants,
   dataGridPaginationVariants,
+  dataGridPinnedEdgeVariants,
+  dataGridPinnedSurfaceVariants,
   dataGridRootVariants,
   dataGridSelectCellVariants,
   dataGridSelectHeadVariants,
@@ -49,8 +77,14 @@ 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' };
+// Same token as the pinned cells' `border-stroke-secondary` divider.
+const PINNED_EDGE_COLOR = 'var(--color-stroke-secondary)';
+
+interface PinRenderMeta {
+  edge: ColumnPinEdge | false;
+  isEdgeDivider: boolean;
+}
 
 function cellStyle<R extends GridValidRowModel>(
   col: GridColDef<R> | undefined,
@@ -78,16 +112,32 @@ function cellStyle<R extends GridValidRowModel>(
   return Object.keys(style).length > 0 ? style : undefined;
 }
 
+function effectiveFlex<R extends GridValidRowModel>(
+  column: GridColDef<R>,
+  pinned: ReadonlySet<string>,
+): number {
+  if (pinned.has(column.field)) {
+    return 0;
+  }
+  return Math.max(column.flex ?? 0, 0);
+}
+
 function webColumnWidths<R extends GridValidRowModel>(
   columns: readonly GridColDef<R>[],
   checkboxSelection: boolean,
+  pinned: ReadonlySet<string> = new Set(),
 ): Map<string, CSSProperties['width']> {
-  const totalFlex = columns.reduce((total, column) => total + Math.max(column.flex ?? 0, 0), 0);
+  const totalFlex = columns.reduce((total, column) => total + effectiveFlex(column, pinned), 0);
   const widths = new Map<string, CSSProperties['width']>();
 
   if (totalFlex === 0) {
     for (const column of columns) {
-      if (column.width !== undefined) {
+      if (pinned.has(column.field)) {
+        widths.set(
+          column.field,
+          Math.max(column.width ?? DEFAULT_PINNED_COLUMN_WIDTH, column.minWidth ?? 0),
+        );
+      } else if (column.width !== undefined) {
         widths.set(column.field, column.width);
       }
     }
@@ -97,15 +147,19 @@ function webColumnWidths<R extends GridValidRowModel>(
   const fixedWidth =
     (checkboxSelection ? SELECT_COLUMN_WIDTH : 0) +
     columns.reduce((total, column) => {
-      if ((column.flex ?? 0) > 0) {
+      if (effectiveFlex(column, pinned) > 0) {
         return total;
       }
-      return total + Math.max(column.width ?? DEFAULT_WEB_COLUMN_WIDTH, column.minWidth ?? 0);
+      const fallback = pinned.has(column.field)
+        ? DEFAULT_PINNED_COLUMN_WIDTH
+        : DEFAULT_WEB_COLUMN_WIDTH;
+      return total + Math.max(column.width ?? fallback, column.minWidth ?? 0);
     }, 0);
 
   for (const column of columns) {
-    if ((column.flex ?? 0) > 0) {
-      const share = (column.flex ?? 0) / totalFlex;
+    const flex = effectiveFlex(column, pinned);
+    if (flex > 0) {
+      const share = flex / totalFlex;
       const percentage = share * 100;
       const fixedShare = fixedWidth * share;
       const width = `calc(${percentage.toString()}% - ${fixedShare.toString()}px)`;
@@ -114,16 +168,65 @@ function webColumnWidths<R extends GridValidRowModel>(
         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),
-      );
+      const fallback = pinned.has(column.field)
+        ? DEFAULT_PINNED_COLUMN_WIDTH
+        : DEFAULT_WEB_COLUMN_WIDTH;
+      widths.set(column.field, Math.max(column.width ?? fallback, column.minWidth ?? 0));
     }
   }
 
   return widths;
 }
 
+function pinMetaFor(columnId: string, pinning: { start: string[]; end: string[] }): PinRenderMeta {
+  const startIndex = pinning.start.indexOf(columnId);
+  if (startIndex >= 0) {
+    return {
+      edge: 'start',
+      isEdgeDivider: startIndex === pinning.start.length - 1,
+    };
+  }
+  const endIndex = pinning.end.indexOf(columnId);
+  if (endIndex >= 0) {
+    return {
+      edge: 'end',
+      isEdgeDivider: endIndex === 0,
+    };
+  }
+  return { edge: false, isEdgeDivider: false };
+}
+
+function mergePinnedStyle(
+  base: ViewStyle | undefined,
+  pin: PinRenderMeta,
+  offsets: PinnedOffsetMaps | null,
+  columnId: string,
+  isHeader: boolean,
+): ViewStyle | undefined {
+  if (!pin.edge || offsets == null) {
+    return base;
+  }
+  const offset =
+    pin.edge === 'start' ? (offsets.start.get(columnId) ?? 0) : (offsets.end.get(columnId) ?? 0);
+  return { ...base, ...pinnedCellStyle(pin.edge, offset, isHeader) };
+}
+
+function pinnedClassName(pin: PinRenderMeta, isHeader: boolean): string | undefined {
+  if (!pin.edge) {
+    return undefined;
+  }
+  return cn(
+    dataGridPinnedSurfaceVariants({ header: isHeader }),
+    dataGridPinnedEdgeVariants({ edge: pin.isEdgeDivider ? pin.edge : 'none' }),
+  );
+}
+
+function BooleanCell({ value }: { value: boolean }) {
+  return (
+    <Icon as={value ? Check : Close} accessibilityLabel={value ? 'Yes' : 'No'} className="size-5" />
+  );
+}
+
 function defaultCellContent(value: unknown): ReactNode {
   if (value == null) {
     return '';
@@ -148,12 +251,25 @@ function DefaultLoadingRows<R extends GridValidRowModel>({
   checkboxSelection,
   rowCount,
   columnWidths,
+  orderedColumnIds,
+  pinning,
+  offsets,
 }: {
   columns: readonly GridColDef<R>[];
   checkboxSelection: boolean;
   rowCount: number;
   columnWidths: ReadonlyMap<string, CSSProperties['width']>;
+  orderedColumnIds?: readonly string[];
+  pinning: { start: string[]; end: string[] };
+  offsets: PinnedOffsetMaps | null;
 }) {
+  const colByField = new Map(columns.map((column) => [column.field, column]));
+  const ids =
+    orderedColumnIds ??
+    (checkboxSelection
+      ? [SELECT_COLUMN_ID, ...columns.map((column) => column.field)]
+      : columns.map((column) => column.field));
+
   return (
     <>
       {Array.from({ length: rowCount }, (_, rowIndex) => (
@@ -162,21 +278,41 @@ function DefaultLoadingRows<R extends GridValidRowModel>({
           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>
-          ))}
+          {ids.map((columnId) => {
+            const pin = pinMetaFor(columnId, pinning);
+            if (columnId === SELECT_COLUMN_ID) {
+              return (
+                <Table.Cell
+                  key={columnId}
+                  align="center"
+                  className={cn(dataGridSelectCellVariants(), pinnedClassName(pin, false))}
+                  style={mergePinnedStyle(undefined, pin, offsets, columnId, false)}
+                >
+                  <Skeleton className="size-5" />
+                </Table.Cell>
+              );
+            }
+            const column = colByField.get(columnId);
+            if (!column) {
+              return null;
+            }
+            return (
+              <Table.Cell
+                key={column.field}
+                align={resolveColumnAlign(column)}
+                className={cn(dataGridCellVariants(), pinnedClassName(pin, false))}
+                style={mergePinnedStyle(
+                  cellStyle(column, columnWidths.get(column.field)),
+                  pin,
+                  offsets,
+                  column.field,
+                  false,
+                )}
+              >
+                <Skeleton className="h-4 w-3/5" />
+              </Table.Cell>
+            );
+          })}
         </Table.Row>
       ))}
     </>
@@ -219,6 +355,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     rowCount,
     showToolbar = false,
     headerFilters = false,
+    pinnedColumns,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -245,6 +382,11 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     defaultProp: props.defaultFilterModel ?? [],
     onChange: props.onFilterModelChange,
   });
+  const [filterLogicOperator, setFilterLogicOperator] = useControllableState({
+    prop: props.filterLogicOperator,
+    defaultProp: props.defaultFilterLogicOperator ?? 'and',
+    onChange: props.onFilterLogicOperatorChange,
+  });
   const [quickFilter, setQuickFilter] = useControllableState({
     prop: props.quickFilter,
     defaultProp: props.defaultQuickFilter ?? '',
@@ -259,13 +401,23 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
   const resolvedSortModel = sortModel ?? [];
   const resolvedPagination = paginationModel ?? DEFAULT_PAGINATION_MODEL;
   const resolvedFilterModel = filterModel ?? [];
+  const resolvedFilterLogicOperator = filterLogicOperator ?? 'and';
   const resolvedQuickFilter = quickFilter ?? '';
   const resolvedSelection = rowSelectionModel ?? EMPTY_SELECTION;
 
+  const knownFields = useMemo(() => new Set(columns.map((column) => column.field)), [columns]);
+  const columnPinning = useMemo(
+    () => normalizePinnedColumns(pinnedColumns, knownFields, checkboxSelection),
+    [pinnedColumns, knownFields, checkboxSelection],
+  );
+  const pinningActive = isColumnPinningActive(columnPinning);
+  const pinnedFields = useMemo(() => pinnedFieldSet(columnPinning), [columnPinning]);
+
   const {
     table,
     setQuickFilter: setQuickFilterWithPageReset,
     setColumnFilter,
+    setFilterModel: setFilterModelWithPageReset,
   } = useDataGridTable({
     rows,
     columns,
@@ -282,10 +434,12 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     onPaginationModelChange: (model) => setPaginationModel(model),
     filterModel: resolvedFilterModel,
     onFilterModelChange: (model) => setFilterModel(model),
+    filterLogicOperator: resolvedFilterLogicOperator,
     quickFilter: resolvedQuickFilter,
     onQuickFilterChange: (value) => setQuickFilter(value),
     rowSelectionModel: resolvedSelection,
     onRowSelectionModelChange: (model) => setRowSelectionModel(model),
+    columnPinning,
   });
 
   const colByField = useMemo(() => {
@@ -295,11 +449,47 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     }
     return map;
   }, [columns]);
+
+  warnPinnedFlexColumns(columns, pinnedFields);
+
   const columnWidths = useMemo(
-    () => webColumnWidths(columns, checkboxSelection),
-    [checkboxSelection, columns],
+    () => webColumnWidths(columns, checkboxSelection, pinnedFields),
+    [checkboxSelection, columns, pinnedFields],
+  );
+  const hasFlexColumns = useMemo(
+    () => columns.some((column) => effectiveFlex(column, pinnedFields) > 0),
+    [columns, pinnedFields],
   );
-  const hasFlexColumns = useMemo(() => columns.some((column) => (column.flex ?? 0) > 0), [columns]);
+  const pinnedOffsets = useMemo(
+    () => (pinningActive ? buildPinnedOffsets(columnPinning, colByField) : null),
+    [pinningActive, columnPinning, colByField],
+  );
+  const orderedLeafColumnIds = useMemo(() => {
+    if (!pinningActive) {
+      return undefined;
+    }
+    return [
+      ...table.getStartVisibleLeafColumns().map((column) => column.id),
+      ...table.getCenterVisibleLeafColumns().map((column) => column.id),
+      ...table.getEndVisibleLeafColumns().map((column) => column.id),
+    ];
+  }, [pinningActive, table]);
+  const isEmpty = !loading && rows.length === 0;
+  const mainScrollStyle = useMemo((): ViewStyle | undefined => {
+    if (!pinningActive || pinnedOffsets == null) {
+      return undefined;
+    }
+    const guides =
+      Platform.OS === 'web' && !isEmpty
+        ? pinnedEdgeGuidesImage(pinnedOffsets, PINNED_EDGE_COLOR, I18nManager.isRTL)
+        : undefined;
+    // Logical scroll-padding keeps focused cells out from under pinned edges (web).
+    return {
+      scrollPaddingInlineStart: pinnedOffsets.startTotal,
+      scrollPaddingInlineEnd: pinnedOffsets.endTotal,
+      ...(guides ? { backgroundImage: guides, backgroundRepeat: 'no-repeat' } : {}),
+    } as ViewStyle;
+  }, [pinningActive, pinnedOffsets, isEmpty]);
 
   const visibleRows = table.getRowModel().rows;
   const pageCount = Math.max(table.getPageCount(), 1);
@@ -313,17 +503,29 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
         : { 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 filterValueFor = (field: string) => {
+    const value = resolvedFilterModel.find((item) => item.field === field)?.value;
+    return typeof value === 'string' ? value : '';
+  };
 
   const showToolbarBar = showToolbar || toolbarActions != null;
+  const filterPanelColumns = useMemo(
+    () => columns.filter((column) => column.filterable !== false),
+    [columns],
+  );
+  const [filterPanelOpen, setFilterPanelOpen] = useState(false);
+  const filterPanelButtonRef = useRef<View>(null);
+  const showFilterPanelButton = showToolbar && filterPanelColumns.length > 0;
 
   return (
     <View
-      className={cn(dataGridRootVariants({ autoHeight }), className)}
+      className={cn(
+        dataGridRootVariants({ autoHeight }),
+        className,
+        filterPanelOpen && 'overflow-visible',
+      )}
       style={style}
       {...mergeDataAttributes({}, dataAttributes({ slot: 'data-grid' }))}
     >
@@ -340,17 +542,46 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
               />
             </Input>
           ) : null}
+          {showFilterPanelButton ? (
+            <IconButton
+              ref={filterPanelButtonRef}
+              as={FilterList}
+              variant="ghost"
+              color="neutral"
+              size="small"
+              accessibilityLabel="Filters"
+              accessibilityState={{ expanded: filterPanelOpen }}
+              onPress={() => setFilterPanelOpen((open) => !open)}
+            />
+          ) : null}
           {toolbarActions ? (
             <View className={dataGridToolbarActionsVariants()}>{toolbarActions}</View>
           ) : null}
         </View>
       ) : null}
+      {showFilterPanelButton && filterPanelOpen ? (
+        <DataGridFilterPanel
+          columns={filterPanelColumns}
+          filterModel={resolvedFilterModel}
+          onFilterModelChange={setFilterModelWithPageReset}
+          logicOperator={resolvedFilterLogicOperator}
+          onLogicOperatorChange={(operator) => {
+            setFilterLogicOperator(operator);
+            if (resolvedPagination.page !== 0) {
+              setPaginationModel({ ...resolvedPagination, page: 0 });
+            }
+          }}
+          onClose={() => setFilterPanelOpen(false)}
+          triggerRef={filterPanelButtonRef}
+        />
+      ) : null}
 
       <View
         className={dataGridMainVariants({
           autoHeight,
           overlay: isEmpty || (loading && loadingOverlay != null),
         })}
+        style={mainScrollStyle}
       >
         <Table
           className={cn(
@@ -370,28 +601,50 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
           {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,
-                  }}
-                />
-              ))}
+              {(
+                orderedLeafColumnIds ??
+                (checkboxSelection
+                  ? [SELECT_COLUMN_ID, ...columns.map((column) => column.field)]
+                  : columns.map((column) => column.field))
+              ).map((columnId) =>
+                columnId === SELECT_COLUMN_ID ? (
+                  <col key={columnId} style={{ width: SELECT_COLUMN_WIDTH }} />
+                ) : (
+                  <col
+                    key={columnId}
+                    style={{
+                      width: columnWidths.get(columnId),
+                      minWidth: colByField.get(columnId)?.minWidth,
+                    }}
+                  />
+                ),
+              )}
             </colgroup>
           ) : null}
           <Table.Header className={dataGridHeaderVariants()}>
-            {table.getHeaderGroups().map((headerGroup) => (
+            {(pinningActive
+              ? [
+                  {
+                    id: 'pinned',
+                    headers: [
+                      ...table.getStartLeafHeaders(),
+                      ...table.getCenterLeafHeaders(),
+                      ...table.getEndLeafHeaders(),
+                    ],
+                  },
+                ]
+              : table.getHeaderGroups()
+            ).map((headerGroup) => (
               <Table.Row key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
+                  const pin = pinMetaFor(header.column.id, columnPinning);
                   if (header.id === SELECT_COLUMN_ID) {
                     return (
                       <Table.Head
                         key={header.id}
                         align="center"
-                        className={dataGridSelectHeadVariants()}
+                        className={cn(dataGridSelectHeadVariants(), pinnedClassName(pin, true))}
+                        style={mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true)}
                       >
                         <Checkbox
                           value="select-all"
@@ -408,7 +661,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                   const col = colByField.get(header.column.id);
                   const sorted = header.column.getIsSorted();
                   const canSort = !disableColumnSorting && header.column.getCanSort();
-                  const headerAlign = normalizeGridAlignment(col?.headerAlign ?? col?.align);
+                  const headerAlign = resolveColumnHeaderAlign(col);
                   const headerName = col?.headerName ?? header.column.id;
                   const SortIcon = sorted === 'asc' ? KeyboardArrowUp : KeyboardArrowDown;
                   const sortButton = canSort ? (
@@ -433,8 +686,14 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                     <Table.Head
                       key={header.id}
                       align={headerAlign}
-                      className={dataGridHeadVariants()}
-                      style={cellStyle(col, columnWidths.get(header.column.id))}
+                      className={cn(dataGridHeadVariants(), pinnedClassName(pin, true))}
+                      style={mergePinnedStyle(
+                        cellStyle(col, columnWidths.get(header.column.id)),
+                        pin,
+                        pinnedOffsets,
+                        header.column.id,
+                        true,
+                      )}
                       {...(Platform.OS === 'web'
                         ? {
                             title: col?.renderHeader ? undefined : headerName,
@@ -470,34 +729,54 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
             ))}
             {headerFilters ? (
               <Table.Row>
-                {table.getAllLeafColumns().map((column) => {
+                {(pinningActive
+                  ? [
+                      ...table.getStartVisibleLeafColumns(),
+                      ...table.getCenterVisibleLeafColumns(),
+                      ...table.getEndVisibleLeafColumns(),
+                    ]
+                  : table.getAllLeafColumns()
+                ).map((column) => {
+                  const pin = pinMetaFor(column.id, columnPinning);
                   if (column.id === SELECT_COLUMN_ID) {
                     return (
                       <Table.Cell
                         key={column.id}
                         align="center"
-                        className={dataGridSelectHeadVariants()}
+                        className={cn(dataGridSelectHeadVariants(), pinnedClassName(pin, true))}
+                        style={mergePinnedStyle(undefined, pin, pinnedOffsets, column.id, true)}
                       />
                     );
                   }
                   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))}
+                        align={resolveColumnHeaderAlign(col)}
+                        className={cn(dataGridHeadVariants(), pinnedClassName(pin, true))}
+                        style={mergePinnedStyle(
+                          cellStyle(col, columnWidths.get(column.id)),
+                          pin,
+                          pinnedOffsets,
+                          column.id,
+                          true,
+                        )}
                       />
                     );
                   }
                   return (
                     <Table.Head
                       key={column.id}
-                      align={normalizeGridAlignment(headerAlign)}
-                      className={dataGridHeadVariants()}
-                      style={cellStyle(col, columnWidths.get(column.id))}
+                      align={resolveColumnHeaderAlign(col)}
+                      className={cn(dataGridHeadVariants(), pinnedClassName(pin, true))}
+                      style={mergePinnedStyle(
+                        cellStyle(col, columnWidths.get(column.id)),
+                        pin,
+                        pinnedOffsets,
+                        column.id,
+                        true,
+                      )}
                     >
                       <Input size="small" className={dataGridFilterInputVariants()}>
                         <Input.Field
@@ -520,19 +799,40 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                 checkboxSelection={checkboxSelection}
                 rowCount={Math.min(resolvedPagination.pageSize, MAX_SKELETON_ROW_COUNT)}
                 columnWidths={columnWidths}
+                orderedColumnIds={orderedLeafColumnIds}
+                pinning={columnPinning}
+                offsets={pinnedOffsets}
               />
             ) : isEmpty ? null : (
               visibleRows.map((row) => {
                 const rowId = resolveRowId(row.original, getRowId);
+                const cells = pinningActive
+                  ? [
+                      ...row.getStartVisibleCells(),
+                      ...row.getCenterVisibleCells(),
+                      ...row.getEndVisibleCells(),
+                    ]
+                  : row.getAllCells();
                 return (
                   <Table.Row key={row.id}>
-                    {row.getAllCells().map((cell) => {
+                    {cells.map((cell) => {
+                      const pin = pinMetaFor(cell.column.id, columnPinning);
                       if (cell.column.id === SELECT_COLUMN_ID) {
                         return (
                           <Table.Cell
                             key={cell.id}
                             align="center"
-                            className={dataGridSelectCellVariants()}
+                            className={cn(
+                              dataGridSelectCellVariants(),
+                              pinnedClassName(pin, false),
+                            )}
+                            style={mergePinnedStyle(
+                              undefined,
+                              pin,
+                              pinnedOffsets,
+                              cell.column.id,
+                              false,
+                            )}
                           >
                             <Checkbox
                               value={String(rowId)}
@@ -554,19 +854,29 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                           row: row.original,
                           field: col.field,
                           id: rowId,
+                          col,
                         });
                       } else if (col?.valueFormatter) {
                         content = col.valueFormatter(value, row.original, col);
+                      } else if (col?.type === 'boolean' && typeof value === 'boolean') {
+                        content = <BooleanCell value={value} />;
                       } else {
-                        content = defaultCellContent(value);
+                        const typedText = getTypedCellText(col, value, row.original);
+                        content = typedText !== undefined ? typedText : defaultCellContent(value);
                       }
 
                       return (
                         <Table.Cell
                           key={cell.id}
-                          align={normalizeGridAlignment(col?.align)}
-                          className={dataGridCellVariants()}
-                          style={cellStyle(col, columnWidths.get(cell.column.id))}
+                          align={resolveColumnAlign(col)}
+                          className={cn(dataGridCellVariants(), pinnedClassName(pin, false))}
+                          style={mergePinnedStyle(
+                            cellStyle(col, columnWidths.get(cell.column.id)),
+                            pin,
+                            pinnedOffsets,
+                            cell.column.id,
+                            false,
+                          )}
                         >
                           {content}
                         </Table.Cell>