@cdx-ui/data-grid 0.3.10 → 0.3.12

package/README.md

@@ -1,6 +1,6 @@
 # @cdx-ui/data-grid
 
-Web DataGrid with a MUI Community–shaped `rows` / `columns` API. TanStack Table is an internal engine — do not import it from consumer code.
+Web DataGrid with an MUI X–shaped `rows` / `columns` API. TanStack Table is an internal engine — do not import it from consumer code. `gridPolarityNumberColDef` and `gridDeltaNumberColDef` are spreadable `number` column presets for signed numbers and changes.
 
 ```tsx
 import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';
@@ -16,3 +16,5 @@ Add the grid's stylesheet to your Tailwind CSS entry, after the components style
 ```
 
 The grid uses a **300px** viewport by default (MUI Data Grid Community). Headers stay visible while rows scroll; pagination stays at the bottom. Override with `className` or `style`, or set `autoHeight` to size the grid to its rows.
+
+Pin columns with `pinnedColumns={{ start, end }}`. Deprecated `left` / `right` keys alias `start` / `end`. See the [Data Grid docs](https://design.candescent.com/docs/components/data-grid).

package/coverage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 91.5%"><title>coverage: 91.5%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">91.5%</text><text x="835" y="150" fill-opacity=".3" textLength="370">91.5%</text></g><text x="835" y="140" textLength="370">91.5%</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 87.1%"><title>coverage: 87.1%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">87.1%</text><text x="835" y="150" fill-opacity=".3" textLength="370">87.1%</text></g><text x="835" y="140" textLength="370">87.1%</text></g></g></svg>

package/lib/commonjs/DataGrid.js

@@ -11,16 +11,20 @@ var _icons = require("@cdx-ui/icons");
 var _primitives = require("@cdx-ui/primitives");
 var _utils = require("@cdx-ui/utils");
 var _columns = require("./adapter/columns");
+var _pinning = require("./adapter/pinning");
+var _columnTypes = require("./adapter/columnTypes");
+var _DataGridFilterPanel = require("./DataGridFilterPanel");
 var _styles = require("./styles");
 var _types = require("./types");
 var _useDataGridTable = require("./useDataGridTable");
 var _jsxRuntime = require("react/jsx-runtime");
 const MAX_SKELETON_ROW_COUNT = 10;
 const DEFAULT_WEB_COLUMN_WIDTH = 100;
-const SELECT_COLUMN_WIDTH = 56;
 const WEB_TABLE_CONTAINER_STYLE = {
   overflow: 'visible'
 };
+// Same token as the pinned cells' `border-stroke-secondary` divider.
+const PINNED_EDGE_COLOR = 'var(--color-stroke-secondary)';
 function cellStyle(col, webWidth) {
   if (!col) {
     return undefined;
@@ -43,36 +47,96 @@ function cellStyle(col, webWidth) {
   }
   return Object.keys(style).length > 0 ? style : undefined;
 }
-function webColumnWidths(columns, checkboxSelection) {
-  const totalFlex = columns.reduce((total, column) => total + Math.max(column.flex ?? 0, 0), 0);
+function effectiveFlex(column, pinned) {
+  if (pinned.has(column.field)) {
+    return 0;
+  }
+  return Math.max(column.flex ?? 0, 0);
+}
+function webColumnWidths(columns, checkboxSelection, pinned = new Set()) {
+  const totalFlex = columns.reduce((total, column) => total + effectiveFlex(column, pinned), 0);
   const widths = new Map();
   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 ?? _pinning.DEFAULT_PINNED_COLUMN_WIDTH, column.minWidth ?? 0));
+      } else 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) {
+  const fixedWidth = (checkboxSelection ? _pinning.SELECT_COLUMN_WIDTH : 0) + columns.reduce((total, column) => {
+    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) ? _pinning.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)`;
       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));
+      const fallback = pinned.has(column.field) ? _pinning.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, pinning) {
+  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, pin, offsets, columnId, isHeader) {
+  if (!pin.edge || offsets == null) {
+    return base;
+  }
+  const offset = pin.edge === 'start' ? offsets.start.get(columnId) ?? 0 : offsets.end.get(columnId) ?? 0;
+  return {
+    ...base,
+    ...(0, _pinning.pinnedCellStyle)(pin.edge, offset, isHeader)
+  };
+}
+function pinnedClassName(pin, isHeader) {
+  if (!pin.edge) {
+    return undefined;
+  }
+  return (0, _utils.cn)((0, _styles.dataGridPinnedSurfaceVariants)({
+    header: isHeader
+  }), (0, _styles.dataGridPinnedEdgeVariants)({
+    edge: pin.isEdgeDivider ? pin.edge : 'none'
+  }));
+}
+function BooleanCell({
+  value
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+    as: value ? _icons.Check : _icons.Close,
+    accessibilityLabel: value ? 'Yes' : 'No',
+    className: "size-5"
+  });
+}
 function defaultCellContent(value) {
   if (value == null) {
     return '';
@@ -94,28 +158,44 @@ function DefaultLoadingRows({
   columns,
   checkboxSelection,
   rowCount,
-  columnWidths
+  columnWidths,
+  orderedColumnIds,
+  pinning,
+  offsets
 }) {
+  const colByField = new Map(columns.map(column => [column.field, column]));
+  const ids = orderedColumnIds ?? (checkboxSelection ? [_types.SELECT_COLUMN_ID, ...columns.map(column => column.field)] : columns.map(column => column.field));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: Array.from({
       length: rowCount
-    }, (_, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Table.Row, {
+    }, (_, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
       className: "pointer-events-none web:hover:bg-surface-primary",
       testID: rowIndex === 0 ? 'data-grid-default-loading-rows' : undefined,
-      children: [checkboxSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-        align: "center",
-        className: (0, _styles.dataGridSelectCellVariants)(),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
-          className: "size-5"
-        })
-      }) : null, columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-        align: (0, _columns.normalizeGridAlignment)(column.align),
-        className: (0, _styles.dataGridCellVariants)(),
-        style: cellStyle(column, columnWidths.get(column.field)),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
-          className: "h-4 w-3/5"
-        })
-      }, column.field))]
+      children: ids.map(columnId => {
+        const pin = pinMetaFor(columnId, pinning);
+        if (columnId === _types.SELECT_COLUMN_ID) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+            align: "center",
+            className: (0, _utils.cn)((0, _styles.dataGridSelectCellVariants)(), pinnedClassName(pin, false)),
+            style: mergePinnedStyle(undefined, pin, offsets, columnId, false),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
+              className: "size-5"
+            })
+          }, columnId);
+        }
+        const column = colByField.get(columnId);
+        if (!column) {
+          return null;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+          align: (0, _columns.resolveColumnAlign)(column),
+          className: (0, _utils.cn)((0, _styles.dataGridCellVariants)(), pinnedClassName(pin, false)),
+          style: mergePinnedStyle(cellStyle(column, columnWidths.get(column.field)), pin, offsets, column.field, false),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
+            className: "h-4 w-3/5"
+          })
+        }, column.field);
+      })
     }, rowIndex))
   });
 }
@@ -148,6 +228,7 @@ function DataGridInner(props) {
     rowCount,
     showToolbar = false,
     headerFilters = false,
+    pinnedColumns,
     pageSizeOptions = _types.DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -173,6 +254,11 @@ function DataGridInner(props) {
     defaultProp: props.defaultFilterModel ?? [],
     onChange: props.onFilterModelChange
   });
+  const [filterLogicOperator, setFilterLogicOperator] = (0, _utils.useControllableState)({
+    prop: props.filterLogicOperator,
+    defaultProp: props.defaultFilterLogicOperator ?? 'and',
+    onChange: props.onFilterLogicOperatorChange
+  });
   const [quickFilter, setQuickFilter] = (0, _utils.useControllableState)({
     prop: props.quickFilter,
     defaultProp: props.defaultQuickFilter ?? '',
@@ -186,12 +272,18 @@ function DataGridInner(props) {
   const resolvedSortModel = sortModel ?? [];
   const resolvedPagination = paginationModel ?? _types.DEFAULT_PAGINATION_MODEL;
   const resolvedFilterModel = filterModel ?? [];
+  const resolvedFilterLogicOperator = filterLogicOperator ?? 'and';
   const resolvedQuickFilter = quickFilter ?? '';
   const resolvedSelection = rowSelectionModel ?? _types.EMPTY_SELECTION;
+  const knownFields = (0, _react.useMemo)(() => new Set(columns.map(column => column.field)), [columns]);
+  const columnPinning = (0, _react.useMemo)(() => (0, _columns.normalizePinnedColumns)(pinnedColumns, knownFields, checkboxSelection), [pinnedColumns, knownFields, checkboxSelection]);
+  const pinningActive = (0, _pinning.isColumnPinningActive)(columnPinning);
+  const pinnedFields = (0, _react.useMemo)(() => (0, _pinning.pinnedFieldSet)(columnPinning), [columnPinning]);
   const {
     table,
     setQuickFilter: setQuickFilterWithPageReset,
-    setColumnFilter
+    setColumnFilter,
+    setFilterModel: setFilterModelWithPageReset
   } = (0, _useDataGridTable.useDataGridTable)({
     rows,
     columns,
@@ -208,10 +300,12 @@ function DataGridInner(props) {
     onPaginationModelChange: model => setPaginationModel(model),
     filterModel: resolvedFilterModel,
     onFilterModelChange: model => setFilterModel(model),
+    filterLogicOperator: resolvedFilterLogicOperator,
     quickFilter: resolvedQuickFilter,
     onQuickFilterChange: value => setQuickFilter(value),
     rowSelectionModel: resolvedSelection,
-    onRowSelectionModelChange: model => setRowSelectionModel(model)
+    onRowSelectionModelChange: model => setRowSelectionModel(model),
+    columnPinning
   });
   const colByField = (0, _react.useMemo)(() => {
     const map = new Map();
@@ -220,8 +314,32 @@ function DataGridInner(props) {
     }
     return map;
   }, [columns]);
-  const columnWidths = (0, _react.useMemo)(() => webColumnWidths(columns, checkboxSelection), [checkboxSelection, columns]);
-  const hasFlexColumns = (0, _react.useMemo)(() => columns.some(column => (column.flex ?? 0) > 0), [columns]);
+  (0, _pinning.warnPinnedFlexColumns)(columns, pinnedFields);
+  const columnWidths = (0, _react.useMemo)(() => webColumnWidths(columns, checkboxSelection, pinnedFields), [checkboxSelection, columns, pinnedFields]);
+  const hasFlexColumns = (0, _react.useMemo)(() => columns.some(column => effectiveFlex(column, pinnedFields) > 0), [columns, pinnedFields]);
+  const pinnedOffsets = (0, _react.useMemo)(() => pinningActive ? (0, _pinning.buildPinnedOffsets)(columnPinning, colByField) : null, [pinningActive, columnPinning, colByField]);
+  const orderedLeafColumnIds = (0, _react.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 = (0, _react.useMemo)(() => {
+    if (!pinningActive || pinnedOffsets == null) {
+      return undefined;
+    }
+    const guides = _reactNative.Platform.OS === 'web' && !isEmpty ? (0, _pinning.pinnedEdgeGuidesImage)(pinnedOffsets, PINNED_EDGE_COLOR, _reactNative.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'
+      } : {})
+    };
+  }, [pinningActive, pinnedOffsets, isEmpty]);
   const visibleRows = table.getRowModel().rows;
   const pageCount = Math.max(table.getPageCount(), 1);
   const selectedCount = table.getFilteredSelectedRowModel().rows.length;
@@ -237,14 +355,20 @@ function DataGridInner(props) {
     indeterminate: true
   };
   const accessibleName = ariaLabel ?? label;
-  const isEmpty = !loading && rows.length === 0;
   const totalCount = paginationMode === 'server' ? rowCount ?? rows.length : filterableCount;
-  const filterValueFor = field => resolvedFilterModel.find(item => item.field === field)?.value ?? '';
+  const filterValueFor = field => {
+    const value = resolvedFilterModel.find(item => item.field === field)?.value;
+    return typeof value === 'string' ? value : '';
+  };
   const showToolbarBar = showToolbar || toolbarActions != null;
+  const filterPanelColumns = (0, _react.useMemo)(() => columns.filter(column => column.filterable !== false), [columns]);
+  const [filterPanelOpen, setFilterPanelOpen] = (0, _react.useState)(false);
+  const filterPanelButtonRef = (0, _react.useRef)(null);
+  const showFilterPanelButton = showToolbar && filterPanelColumns.length > 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     className: (0, _utils.cn)((0, _styles.dataGridRootVariants)({
       autoHeight
-    }), className),
+    }), className, filterPanelOpen && 'overflow-visible'),
     style: style,
     ...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
       slot: 'data-grid'
@@ -262,15 +386,43 @@ function DataGridInner(props) {
           placeholder: "Search",
           accessibilityLabel: "Search"
         })]
+      }) : null, showFilterPanelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+        ref: filterPanelButtonRef,
+        as: _icons.FilterList,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: "Filters",
+        accessibilityState: {
+          expanded: filterPanelOpen
+        },
+        onPress: () => setFilterPanelOpen(open => !open)
       }) : null, toolbarActions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         className: (0, _styles.dataGridToolbarActionsVariants)(),
         children: toolbarActions
       }) : null]
+    }) : null, showFilterPanelButton && filterPanelOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridFilterPanel.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, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       className: (0, _styles.dataGridMainVariants)({
         autoHeight,
         overlay: isEmpty || loading && loadingOverlay != null
       }),
+      style: mainScrollStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Table, {
         className: (0, _utils.cn)((0, _styles.dataGridTableVariants)(), _reactNative.Platform.OS === 'web' && hasFlexColumns ? 'table-fixed' : undefined),
         containerStyle: _reactNative.Platform.OS === 'web' ? WEB_TABLE_CONTAINER_STYLE : undefined,
@@ -282,25 +434,30 @@ function DataGridInner(props) {
         } : {}),
         children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Caption, {
           children: label
-        }) : null, _reactNative.Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("colgroup", {
-          children: [checkboxSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+        }) : null, _reactNative.Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
+          children: (orderedLeafColumnIds ?? (checkboxSelection ? [_types.SELECT_COLUMN_ID, ...columns.map(column => column.field)] : columns.map(column => column.field))).map(columnId => columnId === _types.SELECT_COLUMN_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
             style: {
-              width: SELECT_COLUMN_WIDTH
+              width: _pinning.SELECT_COLUMN_WIDTH
             }
-          }) : null, columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+          }, columnId) : /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
             style: {
-              width: columnWidths.get(column.field),
-              minWidth: column.minWidth
+              width: columnWidths.get(columnId),
+              minWidth: colByField.get(columnId)?.minWidth
             }
-          }, column.field))]
+          }, columnId))
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Table.Header, {
           className: (0, _styles.dataGridHeaderVariants)(),
-          children: [table.getHeaderGroups().map(headerGroup => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+          children: [(pinningActive ? [{
+            id: 'pinned',
+            headers: [...table.getStartLeafHeaders(), ...table.getCenterLeafHeaders(), ...table.getEndLeafHeaders()]
+          }] : table.getHeaderGroups()).map(headerGroup => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
             children: headerGroup.headers.map(header => {
+              const pin = pinMetaFor(header.column.id, columnPinning);
               if (header.id === _types.SELECT_COLUMN_ID) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
                   align: "center",
-                  className: (0, _styles.dataGridSelectHeadVariants)(),
+                  className: (0, _utils.cn)((0, _styles.dataGridSelectHeadVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true),
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
                     value: "select-all",
                     isChecked: headerSelectState.checked,
@@ -314,7 +471,7 @@ function DataGridInner(props) {
               const col = colByField.get(header.column.id);
               const sorted = header.column.getIsSorted();
               const canSort = !disableColumnSorting && header.column.getCanSort();
-              const headerAlign = (0, _columns.normalizeGridAlignment)(col?.headerAlign ?? col?.align);
+              const headerAlign = (0, _columns.resolveColumnHeaderAlign)(col);
               const headerName = col?.headerName ?? header.column.id;
               const SortIcon = sorted === 'asc' ? _icons.KeyboardArrowUp : _icons.KeyboardArrowDown;
               const sortButton = canSort ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
@@ -334,8 +491,8 @@ function DataGridInner(props) {
               }) : null;
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
                 align: headerAlign,
-                className: (0, _styles.dataGridHeadVariants)(),
-                style: cellStyle(col, columnWidths.get(header.column.id)),
+                className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
+                style: mergePinnedStyle(cellStyle(col, columnWidths.get(header.column.id)), pin, pinnedOffsets, header.column.id, true),
                 ...(_reactNative.Platform.OS === 'web' ? {
                   title: col?.renderHeader ? undefined : headerName,
                   ...(canSort ? {
@@ -356,26 +513,27 @@ function DataGridInner(props) {
               }, header.id);
             })
           }, headerGroup.id)), headerFilters ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
-            children: table.getAllLeafColumns().map(column => {
+            children: (pinningActive ? [...table.getStartVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getEndVisibleLeafColumns()] : table.getAllLeafColumns()).map(column => {
+              const pin = pinMetaFor(column.id, columnPinning);
               if (column.id === _types.SELECT_COLUMN_ID) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
                   align: "center",
-                  className: (0, _styles.dataGridSelectHeadVariants)()
+                  className: (0, _utils.cn)((0, _styles.dataGridSelectHeadVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, column.id, true)
                 }, column.id);
               }
               const col = colByField.get(column.id);
-              const headerAlign = col?.headerAlign ?? col?.align;
               if (col?.filterable === false) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
-                  align: (0, _columns.normalizeGridAlignment)(headerAlign),
-                  className: (0, _styles.dataGridHeadVariants)(),
-                  style: cellStyle(col, columnWidths.get(column.id))
+                  align: (0, _columns.resolveColumnHeaderAlign)(col),
+                  className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(cellStyle(col, columnWidths.get(column.id)), pin, pinnedOffsets, column.id, true)
                 }, column.id);
               }
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
-                align: (0, _columns.normalizeGridAlignment)(headerAlign),
-                className: (0, _styles.dataGridHeadVariants)(),
-                style: cellStyle(col, columnWidths.get(column.id)),
+                align: (0, _columns.resolveColumnHeaderAlign)(col),
+                className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
+                style: mergePinnedStyle(cellStyle(col, columnWidths.get(column.id)), pin, pinnedOffsets, column.id, true),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
                   size: "small",
                   className: (0, _styles.dataGridFilterInputVariants)(),
@@ -395,15 +553,21 @@ function DataGridInner(props) {
             columns: columns,
             checkboxSelection: checkboxSelection,
             rowCount: Math.min(resolvedPagination.pageSize, MAX_SKELETON_ROW_COUNT),
-            columnWidths: columnWidths
+            columnWidths: columnWidths,
+            orderedColumnIds: orderedLeafColumnIds,
+            pinning: columnPinning,
+            offsets: pinnedOffsets
           }) : isEmpty ? null : visibleRows.map(row => {
             const rowId = (0, _useDataGridTable.resolveRowId)(row.original, getRowId);
+            const cells = pinningActive ? [...row.getStartVisibleCells(), ...row.getCenterVisibleCells(), ...row.getEndVisibleCells()] : row.getAllCells();
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
-              children: row.getAllCells().map(cell => {
+              children: cells.map(cell => {
+                const pin = pinMetaFor(cell.column.id, columnPinning);
                 if (cell.column.id === _types.SELECT_COLUMN_ID) {
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
                     align: "center",
-                    className: (0, _styles.dataGridSelectCellVariants)(),
+                    className: (0, _utils.cn)((0, _styles.dataGridSelectCellVariants)(), pinnedClassName(pin, false)),
+                    style: mergePinnedStyle(undefined, pin, pinnedOffsets, cell.column.id, false),
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
                       value: String(rowId),
                       isChecked: row.getIsSelected(),
@@ -421,17 +585,23 @@ function DataGridInner(props) {
                     value,
                     row: row.original,
                     field: col.field,
-                    id: rowId
+                    id: rowId,
+                    col
                   });
                 } else if (col?.valueFormatter) {
                   content = col.valueFormatter(value, row.original, col);
+                } else if (col?.type === 'boolean' && typeof value === 'boolean') {
+                  content = /*#__PURE__*/(0, _jsxRuntime.jsx)(BooleanCell, {
+                    value: value
+                  });
                 } else {
-                  content = defaultCellContent(value);
+                  const typedText = (0, _columnTypes.getTypedCellText)(col, value, row.original);
+                  content = typedText !== undefined ? typedText : defaultCellContent(value);
                 }
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-                  align: (0, _columns.normalizeGridAlignment)(col?.align),
-                  className: (0, _styles.dataGridCellVariants)(),
-                  style: cellStyle(col, columnWidths.get(cell.column.id)),
+                  align: (0, _columns.resolveColumnAlign)(col),
+                  className: (0, _utils.cn)((0, _styles.dataGridCellVariants)(), pinnedClassName(pin, false)),
+                  style: mergePinnedStyle(cellStyle(col, columnWidths.get(cell.column.id)), pin, pinnedOffsets, cell.column.id, false),
                   children: content
                 }, cell.id);
               })