@salt-ds/data-grid 1.0.4-alpha.0 → 1.0.4-alpha.10

package/dist-es/DropdownCellEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownCellEditor.js","sources":["../src/DropdownCellEditor.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Dropdown, SelectionChangeHandler, SelectHandler } from \"@salt-ds/lab\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { useEditorContext } from \"./EditorContext\";\nimport { GridColumnModel, GridRowModel } from \"./Grid\";\nimport { CornerTag } from \"./CornerTag\";\nimport { Cell } from \"./internal\";\n\nimport dropdownCellEditorCss from \"./DropdownCellEditor.css\";\n\nconst withBaseName = makePrefixer(\"saltGridDropdownCellEditor\");\n\nexport interface DropdownCellEditorProps<T> {\n  options: ReadonlyArray<string>;\n  // Row and column are provided by the grid. See TableRow.tsx\n  row?: GridRowModel<T>;\n  column?: GridColumnModel<T>;\n}\n\nexport function DropdownCellEditor<T>(props: DropdownCellEditorProps<T>) {\n  const { options, column, row } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-cell-editor\",\n    css: dropdownCellEditorCss,\n    window: targetWindow,\n  });\n\n  const triggerRef = useRef<HTMLDivElement>(null);\n\n  const value = column!.info.props.getValue!(row!.data);\n\n  const { endEditMode } = useEditorContext();\n\n  const onSelectionChange: SelectionChangeHandler = (event, item) => {\n    if (item) {\n      endEditMode(item);\n    }\n  };\n\n  const onSelect: SelectHandler = (event, item) => {\n    if (item) {\n      endEditMode(item);\n    }\n  };\n\n  useEffect(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, [triggerRef.current]);\n\n  const triggerComponent = (\n    <div\n      tabIndex={0}\n      ref={triggerRef}\n      className={withBaseName(\"currentValue\")}\n      data-testid=\"grid-cell-editor-trigger\"\n    >\n      {value}\n    </div>\n  );\n\n  return (\n    <Cell separator={column?.separator} className={withBaseName()}>\n      <div className={withBaseName(\"dropdownContainer\")}>\n        {options && options.length > 0 ? (\n          <Dropdown\n            isOpen={true}\n            source={options}\n            defaultSelected={value}\n            onSelectionChange={onSelectionChange}\n            onSelect={onSelect}\n            triggerComponent={triggerComponent}\n            width={column!.info.width! - 5}\n          />\n        ) : (\n          triggerComponent\n        )}\n      </div>\n      <CornerTag />\n    </Cell>\n  );\n}\n"],"names":["dropdownCellEditorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,4BAA4B,CAAA,CAAA;AASvD,SAAS,mBAAsB,KAAmC,EAAA;AACvE,EAAA,MAAM,EAAE,OAAA,EAAS,MAAQ,EAAA,GAAA,EAAQ,GAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,2BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAE9C,EAAA,MAAM,QAAQ,MAAQ,CAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAU,IAAK,IAAI,CAAA,CAAA;AAEpD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEzC,EAAM,MAAA,iBAAA,GAA4C,CAAC,KAAA,EAAO,IAAS,KAAA;AACjE,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAA0B,CAAC,KAAA,EAAO,IAAS,KAAA;AAC/C,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,UAAA,CAAW,QAAQ,KAAM,EAAA,CAAA;AAAA,KAC3B;AAAA,GACC,EAAA,CAAC,UAAW,CAAA,OAAO,CAAC,CAAA,CAAA;AAEvB,EAAA,MAAM,mCACH,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,QAAU,EAAA,CAAA;AAAA,IACV,GAAK,EAAA,UAAA;AAAA,IACL,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,IACtC,aAAY,EAAA,0BAAA;AAAA,IAEX,QAAA,EAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAGF,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IAAK,WAAW,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,SAAA;AAAA,IAAW,WAAW,YAAa,EAAA;AAAA,IAC1D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,QAC7C,QAAW,EAAA,OAAA,IAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,mBAC1B,GAAA,CAAA,QAAA,EAAA;AAAA,UACC,MAAQ,EAAA,IAAA;AAAA,UACR,MAAQ,EAAA,OAAA;AAAA,UACR,eAAiB,EAAA,KAAA;AAAA,UACjB,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA,EAAO,MAAQ,CAAA,IAAA,CAAK,KAAS,GAAA,CAAA;AAAA,SAC/B,CAEA,GAAA,gBAAA;AAAA,OAEJ,CAAA;AAAA,0BACC,SAAU,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/Grid.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".salt-density-touch {\n  --grid-row-height-default: 61px;\n  --grid-padding-default: 16px;\n  --grid-fontSize-default: 16px;\n  --grid-header-fontSize-default: 14px;\n  --grid-separatorGap-default: 20px;\n  --grid-cornerTag-size-default: 14px;\n}\n\n.salt-density-low {\n  --grid-row-height-default: 49px;\n  --grid-padding-default: 12px;\n  --grid-fontSize-default: 14px;\n  --grid-header-fontSize-default: 12px;\n  --grid-separatorGap-default: 16px;\n  --grid-cornerTag-size-default: 12px;\n}\n\n.salt-density-medium {\n  --grid-row-height-default: 37px;\n  --grid-padding-default: 8px;\n  --grid-fontSize-default: 12px;\n  --grid-header-fontSize-default: 11px;\n  --grid-separatorGap-default: 12px;\n  --grid-cornerTag-size-default: 10px;\n}\n\n.salt-density-high {\n  --grid-row-height-default: 25px;\n  --grid-padding-default: 8px;\n  --grid-fontSize-default: 11px;\n  --grid-header-fontSize-default: 10px;\n  --grid-separatorGap-default: 8px;\n  --grid-cornerTag-size-default: 8px;\n}\n\n/* Styles applied to the root element */\n.saltGrid {\n  --grid-row-height: var(--saltGrid-row-height, var(--grid-row-height-default));\n  --grid-padding: var(--saltGrid-padding, var(--grid-padding-default));\n  --grid-fontSize: var(--saltGrid-fontSize, var(--grid-fontSize-default));\n  --grid-separatorGap: var(--saltGrid-separatorGap, var(--grid-separatorGap-default));\n  --grid-header-fontSize: var(--saltGrid-header-fontSize, var(--grid-header-fontSize-default));\n  --grid-groupHeader-fontSize: var(--saltGrid-groupHeader-fontSize, var(--grid-header-fontSize));\n  --grid-groupHeader-fontWeight: var(--saltGrid-groupHeader-fontWeight, var(--salt-text-label-fontWeight-strong));\n\n  --grid-cell-padding: 0 var(--grid-padding);\n\n  --grid-background-primary: var(--saltGrid-background-primary, var(--salt-container-primary-background));\n  --grid-background-secondary: var(--saltGrid-background-secondary, var(--salt-container-secondary-background));\n  --grid-zebraColor: var(--saltGrid-zebraColor, var(--salt-container-secondary-background));\n\n  --grid-row-background-hover: var(--saltGrid-row-background-hover, var(--salt-selectable-background-hover));\n  --grid-row-background-selected: var(--saltGrid-row-background-selected, var(--salt-selectable-background-selected));\n\n  --grid-row-borderColor-selected: var(--saltGrid-row-borderColor-selected, var(--salt-selectable-borderColor-selected));\n  --grid-cell-background-selected: var(--saltGrid-cell-background-selected, var(--salt-selectable-background-selected));\n  --grid-editableCell-borderColor: var(--saltGrid-editableCell-borderColor, var(--salt-editable-borderColor));\n  --grid-editableCell-borderColor-hover: var(--saltGrid-editableCell-borderColor-hover, var(--salt-editable-borderColor-hover));\n  --grid-editableCell-background-active: var(--saltGrid-editableCell-background-active, var(--salt-editable-primary-background-active));\n  --grid-editableCell-color-active: var(--saltGrid-editableCell-color-active, var(--salt-content-primary-foreground));\n  --grid-editableCell-cornerTag-size: var(--saltGrid-editableCell-cornerTag-size, var(--grid-cornerTag-size-default));\n\n  --grid-header-color: var(--saltGrid-header-color, var(--salt-content-secondary-foreground));\n\n  --grid-headerColumnSeparator-color: var(--saltGrid-headerColumnSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-headerRowSeparator-color: var(--saltGrid-headerRowSeparator-color, var(--salt-separable-primary-borderColor));\n  --grid-headerRowSeparator-gap: var(--saltGrid-headerRowSeparator-gap, var(--salt-spacing-100));\n  --grid-headerRowSeparator-height: var(--saltGrid-headerRowSeparator-height, 1px);\n  --grid-groupHeaderRowSeparator-color: var(--saltGrid-groupHeaderRowSeparator-color, var(--salt-separable-tertiary-borderColor));\n\n  --grid-groupHeader-color: var(--saltGrid-groupHeader-color, var(--salt-content-secondary-foreground));\n  --grid-shadow-color: var(--saltGrid-shadow-color, var(--salt-shadow-100-color));\n  --grid-columnDropTarget-color: var(--saltGrid-columnDropTarget-color, var(--salt-target-borderColor-hover));\n  --grid-cursor-border-style: var(--saltGrid-cursor-borderStyle, var(--salt-focused-outlineStyle));\n  --grid-cursor-border-width: var(--saltGrid-cursor-borderWidth, var(--salt-focused-outlineWidth));\n  --grid-cursor-borderColor: var(--saltGrid-cursor-borderColor, var(--salt-focused-outlineColor));\n  --grid-borderColor: var(--saltGrid-borderColor, var(--salt-container-secondary-borderColor));\n\n  --grid-rowSeparator-width: 1px;\n  --grid-rowSeparator-color: var(--saltGrid-rowSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-columnSeparator-color: var(--saltGrid-columnSeparator-color, var(--salt-separable-tertiary-borderColor));\n  --grid-rowSeparator-color-divided: var(--saltGrid-rowSeparator-color-divided, var(--salt-separable-secondary-borderColor));\n\n  --grid-pinnedSeparator-color: var(--saltGrid-pinnedSeparator-color, var(--salt-separable-primary-borderColor));\n\n  --grid-columnGhost-borderColor: var(--saltGrid-columnGhost-borderColor, var(--salt-palette-interact-border-hover));\n  --grid-columnGhost-borderWidth: var(--saltGrid-columnGhost-borderWidth, 1px);\n  --grid-columnGhost-boxShadow: var(--saltGrid-columnGhost-boxShadow, var(--salt-overlayable-shadow-drag));\n\n  --grid-mid-body-zIndex: 0;\n  --grid-left-body-zIndex: 1;\n  --grid-right-body-zIndex: 1;\n  --grid-middle-header-zIndex: 2;\n  --grid-left-header-zIndex: 3;\n  --grid-right-header-zIndex: 3;\n}\n\n.saltGrid-columnSeparators {\n}\n\n.saltGrid table {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.saltGrid-framed {\n  border: solid 1px var(--grid-borderColor);\n}\n\n/* Styles applied to the root element if variant=\"primary\" */\n.saltGrid-primaryBackground {\n  --grid-background: var(--grid-background-primary);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltGrid-secondaryBackground {\n  --grid-background: var(--grid-background-secondary);\n}\n\n.saltGrid {\n  position: relative;\n  outline: none;\n  user-select: none;\n  background: var(--grid-background);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--grid-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to the root element if zebra is enabled */\n.saltGrid.saltGrid-zebra {\n  --grid-rowSeparator-color: transparent;\n}\n\n.saltGrid-hidden {\n  visibility: hidden;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Grid.css.js.map

package/{dist-cjs/packages/grid/src → dist-es}/Grid.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"Grid.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/{packages/grid/src/Grid.js → Grid.js}

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import { makePrefixer } from '@salt-ds/core';
-import { GridContext } from './GridContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
 import { clsx } from 'clsx';
 import './internal/Cell.js';
 import { CellMeasure } from './internal/CellMeasure.js';
@@ -21,21 +22,29 @@ import { useColumnRegistry, useSumWidth, useSum, useClientMidWidth, useBodyVisib
 import { TopLeftPart } from './internal/TopLeftPart.js';
 import { TopPart } from './internal/TopPart.js';
 import { TopRightPart } from './internal/TopRightPart.js';
-import './internal/FakeCell.css.js';
 import './internal/DefaultCellValue.js';
-import './Grid.css.js';
+import { GridContext } from './GridContext.js';
 import { SizingContext } from './SizingContext.js';
 import { LayoutContext } from './LayoutContext.js';
 import { ColumnDragContext } from './ColumnDragContext.js';
 import { ColumnGhost } from './internal/ColumnGhost.js';
 import { ColumnDropTarget } from './internal/ColumnDropTarget.js';
 import { ColumnDataContext } from './ColumnDataContext.js';
+import { ColumnSortContext } from './ColumnSortContext.js';
+import css_248z from './Grid.css.js';
 
 const withBaseName = makePrefixer("saltGrid");
+var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
+  SortOrder2["ASC"] = "asc";
+  SortOrder2["DESC"] = "desc";
+  SortOrder2["NONE"] = "none";
+  return SortOrder2;
+})(SortOrder || {});
 function defaultRowKeyGetter(row, index) {
   return `${index}`;
 }
 const Grid = function Grid2(props) {
+  var _a, _b, _c;
   const {
     rowData,
     zebra,
@@ -55,8 +64,15 @@ const Grid = function Grid2(props) {
     onColumnMoved,
     cellSelectionMode = "none",
     onVisibleRowRangeChange,
-    headerIsFocusable
+    headerIsFocusable,
+    getRowValidationStatus
   } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-grid",
+    css: css_248z,
+    window: targetWindow
+  });
   const rootRef = useRef(null);
   const scrollableRef = useRef(null);
   const middleRef = useRef(null);
@@ -83,6 +99,8 @@ const Grid = function Grid2(props) {
   const [focusedPart, setFocusedPart] = useState(
     headerIsFocusable ? "header" : "body"
   );
+  const [sortByColumnId, setSortByColumnId] = useState("");
+  const [sortOrder, setSortOrder] = useState("none" /* NONE */);
   const [editMode, setEditMode] = useState(false);
   const [initialText, setInitialText] = useState(void 0);
   const resizeClient = useCallback(
@@ -127,8 +145,8 @@ const Grid = function Grid2(props) {
   );
   const midGrpByColId = useMemo(() => {
     const m = /* @__PURE__ */ new Map();
-    for (let g of midGroups) {
-      for (let c of g.childrenIds) {
+    for (const g of midGroups) {
+      for (const c of g.childrenIds) {
         m.set(c, g);
       }
     }
@@ -214,9 +232,11 @@ const Grid = function Grid2(props) {
       if (s) {
         s.scrollLeft += deltaX;
         s.scrollTop += deltaY;
+        if (!(Math.round(s.scrollHeight - s.scrollTop) === s.clientHeight || s.scrollTop === 0 && deltaY < 0)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
       }
-      event.preventDefault();
-      event.stopPropagation();
     },
     [scrollableRef.current]
   );
@@ -242,6 +262,70 @@ const Grid = function Grid2(props) {
     }),
     [getColById]
   );
+  const isSortMode = sortByColumnId && sortOrder !== "none" /* NONE */;
+  const onSortOrderChange = (_a = getColById(sortByColumnId)) == null ? void 0 : _a.info.props.onSortOrderChange;
+  const valueGetter = ((_b = getColById(sortByColumnId)) == null ? void 0 : _b.info.props.getValue) || ((r) => {
+    return r[sortByColumnId];
+  });
+  const customSortingFn = (_c = getColById(sortByColumnId)) == null ? void 0 : _c.info.props.customSort;
+  const sortedRowData = useMemo(() => {
+    if (!isSortMode || onSortOrderChange)
+      return rowData;
+    if (customSortingFn) {
+      return customSortingFn({ rowData, sortOrder });
+    }
+    const sortedData = [...rowData].sort(
+      (a, b) => valueGetter(a) < valueGetter(b) ? -1 : 1
+    );
+    if (sortOrder === "desc" /* DESC */) {
+      return sortedData.reverse();
+    }
+    return sortedData;
+  }, [
+    onSortOrderChange,
+    valueGetter,
+    customSortingFn,
+    isSortMode,
+    rowData,
+    sortByColumnId,
+    sortOrder
+  ]);
+  const onClickSortColumn = useCallback(
+    (colHeaderId) => {
+      if (sortByColumnId === colHeaderId) {
+        switch (sortOrder) {
+          case "asc" /* ASC */:
+            setSortOrder("desc" /* DESC */);
+            break;
+          case "desc" /* DESC */:
+            setSortOrder("none" /* NONE */);
+            break;
+          default:
+            setSortOrder("asc" /* ASC */);
+        }
+      } else {
+        setSortByColumnId(colHeaderId);
+        setSortOrder("asc" /* ASC */);
+      }
+    },
+    [sortByColumnId, sortOrder]
+  );
+  const columnSortContext = useMemo(
+    () => ({
+      sortByColumnId,
+      setSortByColumnId,
+      sortOrder,
+      setSortOrder,
+      onClickSortColumn
+    }),
+    [
+      sortByColumnId,
+      setSortByColumnId,
+      sortOrder,
+      setSortOrder,
+      onClickSortColumn
+    ]
+  );
   const scroll = useCallback(
     (left, top, source) => {
       setScrollSource(source || "user");
@@ -265,9 +349,9 @@ const Grid = function Grid2(props) {
   );
   const focusCellElement = (part, rowIdx, colIdx) => {
     setTimeout(() => {
-      var _a;
+      var _a2;
       const selector = part === "body" ? `td[data-row-index="${rowIdx}"][data-column-index="${colIdx}"]` : `th[data-column-index="${colIdx}"]`;
-      const nodeToFocus = (_a = rootRef.current) == null ? void 0 : _a.querySelector(selector);
+      const nodeToFocus = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(selector);
       if (nodeToFocus) {
         nodeToFocus.focus({ preventScroll: true });
       } else {
@@ -305,7 +389,7 @@ const Grid = function Grid2(props) {
         `onChange is not specified for editable column "${c.info.props.id}".`
       );
     } else {
-      handler(rowData[cursorRowIdx], cursorRowIdx, value);
+      handler(sortedRowData[cursorRowIdx], cursorRowIdx, value);
     }
     setEditMode(false);
     focusCellElement(focusedPart, cursorRowIdx, cursorColIdx);
@@ -329,7 +413,7 @@ const Grid = function Grid2(props) {
     onMouseDown: onRowSelectionMouseDown
   } = useRowSelection(
     rowKeyGetter,
-    rowData,
+    sortedRowData,
     defaultSelectedRowIdxs,
     selectedRowIdxs,
     rowSelectionMode,
@@ -347,10 +431,10 @@ const Grid = function Grid2(props) {
       setFocusedPart(part);
       colIdx = clamp(colIdx, 0, cols.length - 1);
       if (part === "body") {
-        if (rowData.length < 1 || cols.length < 1) {
+        if (sortedRowData.length < 1 || cols.length < 1) {
           return;
         }
-        rowIdx = clamp(rowIdx, 0, rowData.length - 1);
+        rowIdx = clamp(rowIdx, 0, sortedRowData.length - 1);
       } else if (part === "header") {
         rowIdx = 0;
       }
@@ -365,7 +449,7 @@ const Grid = function Grid2(props) {
     [
       setCursorRowIdx,
       setCursorColIdx,
-      rowData,
+      sortedRowData,
       rowKeyGetter,
       cols,
       rootRef.current,
@@ -376,7 +460,7 @@ const Grid = function Grid2(props) {
       headerIsFocusable
     ]
   );
-  const rows = useRowModels(rowKeyGetter, rowData, visRowRng);
+  const rows = useRowModels(rowKeyGetter, sortedRowData, visRowRng);
   const isLeftRaised = scrollLeft > 0;
   const isRightRaised = scrollLeft + clientMidWidth < midWidth;
   const isHeaderRaised = scrollTop > 0;
@@ -543,7 +627,7 @@ const Grid = function Grid2(props) {
               if (cursorColIdx != void 0) {
                 rangeSelection.selectRange({
                   start: { rowIdx: 0, colIdx: cursorColIdx },
-                  end: { rowIdx: rowData.length, colIdx: cursorColIdx }
+                  end: { rowIdx: sortedRowData.length, colIdx: cursorColIdx }
                 });
               }
             } else {
@@ -564,7 +648,7 @@ const Grid = function Grid2(props) {
           if (event.ctrlKey || event.metaKey) {
             rangeSelection.selectRange({
               start: { rowIdx: 0, colIdx: 0 },
-              end: { rowIdx: rowData.length, colIdx: cols.length }
+              end: { rowIdx: sortedRowData.length, colIdx: cols.length }
             });
             selectAll();
             return true;
@@ -585,7 +669,7 @@ const Grid = function Grid2(props) {
       selectAll,
       cursorColIdx,
       cursorRowIdx,
-      rowData.length,
+      sortedRowData.length,
       cols.length,
       focusedPart
     ]
@@ -600,7 +684,7 @@ const Grid = function Grid2(props) {
         const [minCol, maxCol] = [start.colIdx, end.colIdx].sort(c);
         const text = [];
         for (let r = minRow; r <= maxRow; ++r) {
-          const row = rowData[r];
+          const row = sortedRowData[r];
           const rowText = [];
           for (let c2 = minCol; c2 <= maxCol; ++c2) {
             const col = cols[c2];
@@ -676,7 +760,7 @@ const Grid = function Grid2(props) {
           if (!event.ctrlKey) {
             moveCursor(focusedPart, cursorRowIdx, cols.length - 1);
           } else {
-            moveCursor(focusedPart, rowData.length - 1, cols.length - 1);
+            moveCursor(focusedPart, sortedRowData.length - 1, cols.length - 1);
           }
           break;
         case "Tab":
@@ -685,7 +769,7 @@ const Grid = function Grid2(props) {
               if (cursorColIdx < cols.length - 1) {
                 moveCursor(focusedPart, cursorRowIdx, cursorColIdx + 1);
               } else {
-                if (cursorRowIdx < rowData.length - 1) {
+                if (cursorRowIdx < sortedRowData.length - 1) {
                   moveCursor(focusedPart, cursorRowIdx + 1, 0);
                 }
               }
@@ -725,7 +809,7 @@ const Grid = function Grid2(props) {
       cursorRowIdx,
       cursorRowIdx,
       cols.length,
-      rowData.length,
+      sortedRowData.length,
       headerIsFocusable,
       pageSize
     ]
@@ -810,115 +894,121 @@ const Grid = function Grid2(props) {
               value: sizingContext,
               children: /* @__PURE__ */ jsx(EditorContext.Provider, {
                 value: editorContext,
-                children: /* @__PURE__ */ jsxs(ColumnDataContext.Provider, {
+                children: /* @__PURE__ */ jsx(ColumnDataContext.Provider, {
                   value: columnDataContext,
-                  children: [
-                    props.children,
-                    /* @__PURE__ */ jsxs("div", {
-                      className: clsx(
-                        withBaseName(),
-                        {
-                          [withBaseName("zebra")]: zebra,
-                          [withBaseName("columnSeparators")]: columnSeparators,
-                          [withBaseName("pinnedSeparators")]: pinnedSeparators,
-                          [withBaseName("primaryBackground")]: variant === "primary",
-                          [withBaseName("secondaryBackground")]: variant === "secondary"
-                        },
-                        className
-                      ),
-                      style: rootStyle,
-                      ref: rootRef,
-                      onKeyDown,
-                      onKeyUp,
-                      onMouseDown,
-                      onFocus,
-                      onBlur,
-                      "data-name": "grid-root",
-                      role: "grid",
-                      "aria-colcount": cols.length,
-                      "aria-rowcount": rowCount + headRowCount,
-                      "aria-multiselectable": rowSelectionMode === "multi",
-                      children: [
-                        /* @__PURE__ */ jsx(CellMeasure, {
-                          setRowHeight
-                        }),
-                        /* @__PURE__ */ jsx(Scrollable, {
-                          resizeClient,
-                          scrollLeft,
-                          scrollTop,
-                          scrollSource,
-                          scroll,
-                          scrollerRef: scrollableRef,
-                          topRef,
-                          rightRef,
-                          bottomRef,
-                          leftRef,
-                          middleRef
-                        }),
-                        !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsx(TopLeftPart, {
-                          onWheel,
-                          columns: leftCols,
-                          columnGroups: leftGroups,
-                          rightShadow: isLeftRaised,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        !hideHeader && /* @__PURE__ */ jsx(TopPart, {
-                          columns: headVisibleColumns,
-                          columnGroups: visColGrps,
-                          topRef,
-                          onWheel,
-                          midGap,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsx(TopRightPart, {
-                          onWheel,
-                          columns: rightCols,
-                          columnGroups: rightGroups,
-                          leftShadow: isRightRaised,
-                          bottomShadow: isHeaderRaised
-                        }),
-                        leftCols.length > 0 && /* @__PURE__ */ jsx(LeftPart, {
-                          leftRef,
-                          onWheel,
-                          columns: leftCols,
-                          rows,
-                          rightShadow: isLeftRaised,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          zebra
-                        }),
-                        /* @__PURE__ */ jsx(MiddlePart, {
-                          middleRef,
-                          onWheel,
-                          columns: bodyVisibleColumns,
-                          rows,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          midGap,
-                          zebra
-                        }),
-                        rightCols.length > 0 && /* @__PURE__ */ jsx(RightPart, {
-                          rightRef,
-                          onWheel,
-                          columns: rightCols,
-                          rows,
-                          leftShadow: isRightRaised,
-                          hoverOverRowKey: hoverRowKey,
-                          setHoverOverRowKey: setHoverRowKey,
-                          zebra
-                        }),
-                        /* @__PURE__ */ jsx(ColumnDropTarget, {
-                          x: activeTarget == null ? void 0 : activeTarget.x
-                        }),
-                        /* @__PURE__ */ jsx(ColumnGhost, {
-                          columns: cols,
-                          rows,
-                          dragState,
-                          zebra
-                        })
-                      ]
-                    })
-                  ]
+                  children: /* @__PURE__ */ jsxs(ColumnSortContext.Provider, {
+                    value: columnSortContext,
+                    children: [
+                      props.children,
+                      /* @__PURE__ */ jsxs("div", {
+                        className: clsx(
+                          withBaseName(),
+                          {
+                            [withBaseName("zebra")]: zebra,
+                            [withBaseName("columnSeparators")]: columnSeparators,
+                            [withBaseName("pinnedSeparators")]: pinnedSeparators,
+                            [withBaseName("primaryBackground")]: variant === "primary",
+                            [withBaseName("secondaryBackground")]: variant === "secondary"
+                          },
+                          className
+                        ),
+                        style: rootStyle,
+                        ref: rootRef,
+                        onKeyDown,
+                        onKeyUp,
+                        onMouseDown,
+                        onFocus,
+                        onBlur,
+                        "data-name": "grid-root",
+                        role: "grid",
+                        "aria-colcount": cols.length,
+                        "aria-rowcount": rowCount + headRowCount,
+                        "aria-multiselectable": rowSelectionMode === "multi",
+                        children: [
+                          /* @__PURE__ */ jsx(CellMeasure, {
+                            setRowHeight
+                          }),
+                          /* @__PURE__ */ jsx(Scrollable, {
+                            resizeClient,
+                            scrollLeft,
+                            scrollTop,
+                            scrollSource,
+                            scroll,
+                            scrollerRef: scrollableRef,
+                            topRef,
+                            rightRef,
+                            bottomRef,
+                            leftRef,
+                            middleRef
+                          }),
+                          !hideHeader && leftCols.length > 0 && /* @__PURE__ */ jsx(TopLeftPart, {
+                            onWheel,
+                            columns: leftCols,
+                            columnGroups: leftGroups,
+                            rightShadow: isLeftRaised,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          !hideHeader && /* @__PURE__ */ jsx(TopPart, {
+                            columns: headVisibleColumns,
+                            columnGroups: visColGrps,
+                            topRef,
+                            onWheel,
+                            midGap,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          !hideHeader && rightCols.length > 0 && /* @__PURE__ */ jsx(TopRightPart, {
+                            onWheel,
+                            columns: rightCols,
+                            columnGroups: rightGroups,
+                            leftShadow: isRightRaised,
+                            bottomShadow: isHeaderRaised
+                          }),
+                          leftCols.length > 0 && /* @__PURE__ */ jsx(LeftPart, {
+                            leftRef,
+                            onWheel,
+                            columns: leftCols,
+                            rows,
+                            rightShadow: isLeftRaised,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          /* @__PURE__ */ jsx(MiddlePart, {
+                            middleRef,
+                            onWheel,
+                            columns: bodyVisibleColumns,
+                            rows,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            midGap,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          rightCols.length > 0 && /* @__PURE__ */ jsx(RightPart, {
+                            rightRef,
+                            onWheel,
+                            columns: rightCols,
+                            rows,
+                            leftShadow: isRightRaised,
+                            hoverOverRowKey: hoverRowKey,
+                            setHoverOverRowKey: setHoverRowKey,
+                            zebra,
+                            getRowValidationStatus
+                          }),
+                          /* @__PURE__ */ jsx(ColumnDropTarget, {
+                            x: activeTarget == null ? void 0 : activeTarget.x
+                          }),
+                          /* @__PURE__ */ jsx(ColumnGhost, {
+                            columns: cols,
+                            rows,
+                            dragState,
+                            zebra
+                          })
+                        ]
+                      })
+                    ]
+                  })
                 })
               })
             })
@@ -929,5 +1019,5 @@ const Grid = function Grid2(props) {
   });
 };
 
-export { Grid };
+export { Grid, SortOrder };
 //# sourceMappingURL=Grid.js.map