es-grid-template 1.9.96 → 1.9.98

package/lib/group-component/body/TableBodyCellEmpty.js

@@ -99,35 +99,20 @@ const TableBodyCellEmpty = props => {
       setIsPasting?.(false);
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/group-component/body/TableBodyRowGroupCell.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/lib/group-component/body/TableBodyRowGroupCell.js

@@ -434,35 +434,20 @@ const TableBodyCell = props => {
       setIsPasting?.(false);
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/group-component/table/TableWrapper.js

@@ -202,6 +202,7 @@ const TableWrapper = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     // id={id}
     ref: tableContainerRef,
+    "data-grid-scroll": true,
     style: {
       overflow: 'auto',
       //our scrollable table container

package/lib/table-component/body/TableBodyCell.js

@@ -442,44 +442,20 @@ const TableBodyCell = props => {
       }
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-
-        // if (rowNumber < flatRows.length - 5) {
-        //   e.stopPropagation()
-        //   e.preventDefault()
-        //   rowVirtualizer.scrollToIndex(cell.row.index, {
-        //     align: 'center', // 'start' | 'center' | 'end'
-        //   })
-        // }
-
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/table-component/body/TableBodyCellEdit.js

@@ -824,77 +824,26 @@ const TableBodyCellEdit = props => {
       }
       return;
     }
-    if (e.key === 'ArrowDown') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      const nextRow = table.getRowModel().rows[rowNumber + 1];
-      if (nextRow) {
-        const nextRowId = nextRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
-          colId
-        }));
-
-        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      return;
-    }
-    if (e.key === 'ArrowUp') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      const nextRow = table.getRowModel().rows[rowNumber - 1];
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      const rows = table.getRowModel().rows;
+      const currentIndex = rows.findIndex(row => row.id === rowId);
+      if (currentIndex < 0) return;
+      const step = e.key === 'ArrowDown' ? 1 : -1;
+      const nextIndex = currentIndex + step;
+      const nextRow = rows[nextIndex];
       if (nextRow) {
-        const nextRowId = nextRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
+        const nextCell = {
+          rowId: nextRow.id,
           colId
+        };
+        setFocusedCell?.(nextCell);
+        setStartCell?.(nextCell);
+        setEndCell?.(nextCell);
+        setRangeState?.((0, _utils.getSelectedCellMatrix)(table, nextCell, nextCell));
+        (0, _rowFocus.focusArrowRow)(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
+          align: 'center'
         }));
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
+        (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/lib/table-component/table/TableWrapper.js

@@ -255,6 +255,7 @@ const TableWrapper = props => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     // id={id}
     ref: tableContainerRef,
+    "data-grid-scroll": true,
     style: {
       overflow: 'auto',
       //our scrollable table container

package/lib/table-virtuoso/body/TableBodyCell.d.ts

@@ -4,6 +4,7 @@ import type { CommandClick } from "../../grid-component/type";
 import type { VirtualItem } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    scrollToRow?: (index: number) => void;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/lib/table-virtuoso/body/TableBodyCell.js

@@ -381,35 +381,18 @@ const TableBodyCell = props => {
       }
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/table-virtuoso/body/TableBodyCellRowGroup.d.ts

@@ -4,6 +4,7 @@ import type { CommandClick } from "../../grid-component/type";
 import type { VirtualItem } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    scrollToRow?: (index: number) => void;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/lib/table-virtuoso/body/TableBodyCellRowGroup.js

@@ -96,35 +96,18 @@ const TableBodyCellRowGroup = props => {
       }
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          (0, _rowFocus.focusArrowRow)(e, nextRow.id, cell.column.id, () => props.scrollToRow?.(nextIndex));
+          (0, _rowFocus.notifyArrowRowFocus)(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/lib/table-virtuoso/body/TableBodyRow.d.ts

@@ -4,10 +4,11 @@ import type { CommandClick } from "../../grid-component/type";
 interface TableBodyRowProps<T> {
     tableId: string;
     table: Table<T>;
+    scrollToRow?: (index: number) => void;
     row: Row<T>;
     commandClick?: (args: CommandClick<T>) => void;
     editAble?: boolean;
     [key: string]: any;
 }
-declare const TableBodyRow: <RecordType extends object>({ tableId, table, row, virtualRow, commandClick, contextMenuItems, onContextMenu, rowheight, editAble, isEditing, isRowEditable, ...rest }: TableBodyRowProps<RecordType>) => JSX.Element;
+declare const TableBodyRow: <RecordType extends object>({ tableId, table, row, scrollToRow, virtualRow, commandClick, contextMenuItems, onContextMenu, rowheight, editAble, isEditing, isRowEditable, ...rest }: TableBodyRowProps<RecordType>) => JSX.Element;
 export default TableBodyRow;

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -21,6 +21,7 @@ const TableBodyRow = ({
   tableId,
   table,
   row,
+  scrollToRow,
   virtualRow,
   commandClick,
   contextMenuItems,
@@ -140,7 +141,9 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({}, otherCellAttributes, {
+      return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
+        scrollToRow: scrollToRow
+      }, otherCellAttributes, {
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -173,7 +176,9 @@ const TableBodyRow = ({
       const childrenData = row.subRows.map(it => it.original);
       const sumValue = (0, _hooks.sumByField)(childrenData, cell.column.id);
       const sumValueFormat = (0, _reactNumericComponent.numericFormatter)(sumValue.toString(), numericFormatProps);
-      return /*#__PURE__*/_react.default.createElement(_TableBodyCellRowGroup.default, (0, _extends2.default)({}, otherCellAttributes, {
+      return /*#__PURE__*/_react.default.createElement(_TableBodyCellRowGroup.default, (0, _extends2.default)({
+        scrollToRow: scrollToRow
+      }, otherCellAttributes, {
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -186,7 +191,9 @@ const TableBodyRow = ({
         sumValue: sumValueFormat
       }));
     }
-    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({}, otherCellAttributes, {
+    return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, (0, _extends2.default)({
+      scrollToRow: scrollToRow
+    }, otherCellAttributes, {
       table: table,
       tableId: tableId,
       key: cell.id,

package/lib/table-virtuoso/table/TableWrapper.js

@@ -45,6 +45,11 @@ const TableWrapper = props => {
 
   // ref cho scroll container
   const scrollRef = (0, _react.useRef)(null);
+  const virtuosoRef = (0, _react.useRef)(null);
+  const scrollToRow = index => virtuosoRef.current?.scrollToIndex({
+    index,
+    align: 'center'
+  });
   const {
     rows
   } = table.getRowModel();
@@ -137,6 +142,7 @@ const TableWrapper = props => {
       position: "relative"
     }
   }, /*#__PURE__*/_react.default.createElement(_reactVirtuoso.TableVirtuoso, (0, _extends2.default)({
+    ref: virtuosoRef,
     data: table.getRowModel().rows,
     totalCount: rows.length
   }, onVisibleRowsChange ? {
@@ -201,6 +207,7 @@ const TableWrapper = props => {
         return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({
           tableId: id,
           row: row,
+          scrollToRow: scrollToRow,
           table: table,
           commandClick: commandClick,
           rowheight: editAble ? 37 : rowheight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.96",
+  "version": "1.9.98",
   "description": "es-grid-template",
   "keywords": [
     "react",