es-grid-template 1.9.27 → 1.9.28

package/es/grid-component/type.d.ts

@@ -491,7 +491,10 @@ export type TableProps<RecordType = AnyObject> = {
     /** Cho phép chỉnh sửa dữ liệu */
     editAble?: boolean;
     /** Callback khi data thay đổi */
-    onDataChange?: (data: RecordType[]) => void;
+    onDataChange?: (data: RecordType[], args?: {
+        type: string;
+        row?: number;
+    }) => void;
     /** Giá trị mặc định khi thêm mới */
     defaultValue?: AnyObject | (() => AnyObject);
     /** Callback xử lý paste dữ liệu */

package/es/group-component/hook/utils.d.ts

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/InternalTable.js

@@ -167,7 +167,37 @@ const InternalTable = props => {
     }
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
-    locale: language
+    locale: language,
+    theme: {
+      token: {
+        colorPrimary: '#eb4619',
+        colorLink: '#eb4619'
+      },
+      components: {
+        Input: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+        },
+        Button: {
+          colorLink: '#eb4619',
+          colorLinkHover: '#eb4619'
+        },
+        Select: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+          // colorPrimary: '#eb4619',
+          // colorBgBase: 'red'
+        },
+        DatePicker: {
+          colorPrimary: '#eb4619',
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff'
+        },
+        Pagination: {
+          fontSize: 12
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(CustomProvider, {
     locale: languages
   }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {

package/es/table-component/TableContainerEdit.js

@@ -8,7 +8,9 @@ sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
-import { Button, Modal, Typography, Dropdown } from "antd";
+import { Modal, Typography } from "antd";
+import Button from "rc-master-ui/es/button";
+import Dropdown from "rc-master-ui/es/dropdown";
 import Pagination from "rc-master-ui/es/pagination";
 import { numericFormatter, removeNumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
@@ -76,19 +78,15 @@ const TableContainerEdit = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
-    // triggerFilter,
     selectionSettings,
     isSelectionChange,
     setIsSelectionChange,
-    // onContextMenu,
     contextMenuItems,
     setSorterChange,
     setFilterChange,
     defaultFilter,
     onCellPaste,
-    // triggerPaste,
     validate,
-    // triggerChangeData,
     onCellChange,
     onDataChange,
     defaultValue,
@@ -286,14 +284,16 @@ const TableContainerEdit = props => {
 
     copy(tsv).then(() => {}).catch(() => {});
   }, [startCell, endCell, table]);
-  const triggerChangeData = React.useCallback(newData => {
-    onDataChange?.(newData);
+  const triggerChangeData = React.useCallback((newData, args) => {
+    onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const rsFilterData = updateOrInsert(flattenArray([...originData]), flattenArray([...callbackData]));
       const rs = unFlattenData(rsFilterData);
-      triggerChangeData(rs);
+      triggerChangeData(rs, {
+        type: 'OnPaste'
+      });
     };
     if (onCellPaste && onCellPaste.onPasted) {
       if (onCellPaste.onPasted.length > 1) {
@@ -314,10 +314,14 @@ const TableContainerEdit = props => {
           data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
-        triggerChangeData(newData);
+        triggerChangeData(newData, {
+          type: 'OnPaste'
+        });
       }
     } else {
-      triggerChangeData(newData);
+      triggerChangeData(newData, {
+        type: 'OnPaste'
+      });
     }
   }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = React.useCallback(pasteData => {
@@ -745,7 +749,9 @@ const TableContainerEdit = props => {
       const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = updateArrayByKey(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -765,7 +771,9 @@ const TableContainerEdit = props => {
       const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
       const rs = updateArrayByKey(newData, row, rowKey);
       if (index > -1) {
-        triggerChangeData?.(rs);
+        triggerChangeData?.(rs, {
+          type: 'CellChange'
+        });
       }
     } catch (errInfo) {
       console.log('Validate Failed:', errInfo);
@@ -965,7 +973,9 @@ const TableContainerEdit = props => {
     const rs = updateOrInsert(originData, rsFilter);
     // const rs2  = mergeWithFilter(originData, rsFilter)
 
-    triggerChangeData?.(rs);
+    triggerChangeData?.(rs, {
+      type: 'DUPLICATE'
+    });
   }, [dataSource, focusedCell, originData, rowKey, table, triggerChangeData]);
 
   // thêm n dòng bên trên
@@ -1001,7 +1011,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = findItemByKey(newData, rowKey, record.parentId);
@@ -1027,7 +1040,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_BEFORE',
+          row: n
+        });
       }
     }
   }, [defaultValue, focusedCell, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, table, triggerChangeData]);
@@ -1065,7 +1081,10 @@ const TableContainerEdit = props => {
         setMergedFilterKeys?.(rs);
         const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
         newData.splice(index + 1, 0, ...newRows);
-        triggerChangeData?.(newData);
+        triggerChangeData?.(newData, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       } else {
         const newData = [...originData];
         const parent = findItemByKey(newData, rowKey, record.parentId);
@@ -1094,7 +1113,10 @@ const TableContainerEdit = props => {
           children: childData
         };
         const newDataSource = updateArrayByKey(newData, newRowData, rowKey);
-        triggerChangeData?.(newDataSource);
+        triggerChangeData?.(newDataSource, {
+          type: 'INSERT_AFTER',
+          row: n
+        });
       }
     }
   }, [defaultValue, table, focusedCell?.rowId, originData, mergedFilterKeys, setMergedFilterKeys, triggerChangeData, rowKey]);
@@ -1132,7 +1154,9 @@ const TableContainerEdit = props => {
       const rs = mergedFilterKeys ? [...mergedFilterKeys, rowId] : [rowId];
       setMergedFilterKeys?.(rs);
       const newDataSource = updateArrayByKey(newData, newElement, rowKey);
-      triggerChangeData?.(newDataSource);
+      triggerChangeData?.(newDataSource, {
+        type: 'INSERT_CHILDREN'
+      });
     }
     setTimeout(() => {
       const row = table.getRowModel().rows.find(it => it.id === focusedCell?.rowId);
@@ -1175,12 +1199,18 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([...newDaa]);
+            triggerChangeData?.([...newDaa], {
+              type: 'DELETE_ROWS',
+              row: rowsFocus.length
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
         // không hiện dialog  
-        triggerChangeData?.([...newDaa]);
+        triggerChangeData?.([...newDaa], {
+          type: 'DELETE_ROWS',
+          row: rowsFocus.length
+        });
       }
     }
   }, [commandSettings, originData, rowKey, rowsFocus, t, triggerChangeData]);
@@ -1206,11 +1236,15 @@ const TableContainerEdit = props => {
           buttonsStyling: false
         }).then(async result => {
           if (result.value) {
-            triggerChangeData?.([]);
+            triggerChangeData?.([], {
+              type: 'DELETE'
+            });
           } else if (result.dismiss === MySwal.DismissReason.cancel) {}
         });
       } else {
-        triggerChangeData?.([]);
+        triggerChangeData?.([], {
+          type: 'DELETE'
+        });
       }
     }
   }, [commandSettings, t, triggerChangeData]);
@@ -1256,7 +1290,9 @@ const TableContainerEdit = props => {
         return updatedRow;
       });
       const newData = unFlattenData(rs);
-      triggerChangeData?.([...newData]);
+      triggerChangeData?.([...newData], {
+        type: 'DELETE_CONTENT'
+      });
     }
   };
   const toolbarItemsBottom = React.useMemo(() => {

package/es/table-component/body/EditableCell.js

@@ -176,8 +176,53 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : undefined,
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
-          minDate: minDate,
-          onChange: (newDate, dateString) => {
+          minDate: minDate
+          // mode="date"
+
+          // onChange={(newDate, dateString) => {
+
+          //   const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+
+          //   onChange(newDateValue)
+
+          //   setTimeout(() => {
+          //     // @ts-ignore
+          //     dateTimePickerRef.current?.focus()
+          //   }, 0)
+
+          // }}
+
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   const itemState = getValues(dataIndex)
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   const newState = itemState
+
+          //   if (prevState !== newState) {
+          //     handleCellChange?.({
+          //       key: key as any,
+          //       field: column.field ?? column.field as any,
+          //       record: formState,
+          //       prevState,
+          //       newState,
+          //       option: newState,
+          //       indexCol,
+          //       indexRow,
+          //       type: 'blur'
+          //     })
+          //   }
+          // }}
+          ,
+
+          popupClassName: 'be-popup-container',
+          status: isInvalid ? 'error' : undefined,
+          "data-tooltip-content": message,
+          "data-tooltip-id": `${id}-tooltip-error`,
+          autoFocus: column.field === startCell?.colId,
+          defaultOpen: column.field === startCell?.colId,
+          needConfirm: false,
+          onCalendarChange: (newDate, dateString) => {
             const newDateValue = dateString ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
             onChange(newDateValue);
             setTimeout(() => {
@@ -185,32 +230,28 @@ const EditableCell = props => {
               dateTimePickerRef.current?.focus();
             }, 0);
           },
-          onBlur: () => {
-            const formState = getValues();
-            const itemState = getValues(dataIndex);
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            const newState = itemState;
-            if (prevState !== newState) {
-              handleCellChange?.({
-                key: key,
-                field: column.field ?? column.field,
-                record: formState,
-                prevState,
-                newState,
-                option: newState,
-                indexCol,
-                indexRow,
-                type: 'blur'
-              });
+          onOpenChange: open => {
+            if (!open) {
+              const formState = getValues();
+              const itemState = getValues(dataIndex);
+              // @ts-ignore
+              const prevState = record[dataIndex];
+              const newState = itemState;
+              if (prevState !== newState) {
+                handleCellChange?.({
+                  key: key,
+                  field: column.field ?? column.field,
+                  record: formState,
+                  prevState,
+                  newState,
+                  option: newState,
+                  indexCol,
+                  indexRow,
+                  type: 'blur'
+                });
+              }
             }
-          },
-          popupClassName: 'be-popup-container',
-          status: isInvalid ? 'error' : undefined,
-          "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-error`,
-          autoFocus: column.field === startCell?.colId,
-          defaultOpen: column.field === startCell?.colId
+          }
         });
       case 'month':
       case 'quarter':

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

@@ -457,6 +457,9 @@ const TableBodyCell = props => {
       }
     },
     onClick: e => {
+      if (e.detail === 2) {
+        return;
+      }
       recordClick?.({
         e,
         rowData: record,

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

@@ -536,7 +536,8 @@ const TableBodyCellEdit = props => {
     setEditingKey?.(record[rowKey]);
     // setTooltipContent('')
 
-    handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
+    // handleCellClick?.(rowNumber, record, columnMeta as any, record[rowKey], record[columnMeta.field ?? ''])
+
     reset?.();
 
     // const formattedRecord = { ...record };
@@ -1150,6 +1151,7 @@ const TableBodyCellEdit = props => {
     }),
     style: {
       display: 'flex',
+      alignItems: 'center',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
       // flex: 1,

package/es/table-component/header/TableHeadCell2.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { Button, Space } from 'antd';
+import { Space } from 'antd';
+import Button from 'rc-master-ui/es/button';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';

package/es/table-component/style.scss

@@ -9,10 +9,12 @@ $primary: #eb4619 !default;
 $rowHoverBg: #FBDED6 !default;
 $rowSelectedBg: #FEF2EF !default;
 $tableBorderColor: #e0e0e0 !default;
-$border-selected-color: #0550C5 !default;
+$border-selected-color: #e63706 !default;
 $body-color: #ffffff !default;
-$cell-selected-bg: #F3F8FF !default;
-$cell-index-selected-bg: #1869E6 !default;
+// $cell-selected-bg: #F3F8FF !default;
+$cell-selected-bg: #fcf5f2 !default;
+// $cell-index-selected-bg: #1869E6 !default;
+$cell-index-selected-bg: #eb4619 !default;
 $cell-index-focus-bg: #E6EFFD !default;
 
 // 404071
@@ -37,11 +39,36 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   box-sizing: border-box;
 }
 
+.rs-picker-daterange-panel {
+  --rs-input-focus-border: #eb4619;
+  --rs-btn-link-text: #f0552b;
+  --rs-btn-link-hover-text: #eb4619;
+  --rs-btn-primary-bg: #e47253;
+  --rs-text-active: #eb4619;
+  --rs-listbox-option-hover-text: #eb4619;
+  --rs-bg-active: #f06842;
+  --rs-calendar-cell-selected-hover-bg: #eb4619;
+  --rs-btn-primary-hover-bg: #eb4619;
+  --rs-calendar-range-bg: #faf2ef;
+  --rs-listbox-option-hover-bg: #faf2ef;
+
+}
+
+.ui-rc-picker-now {
+  --bs-link-color-rgb: 235, 70, 25;
+}
+
+.ui-rc-pagination-options {
+  .ui-rc-select-selection-item {
+    font-size: 12px;
+  }
+}
 
 .#{$prefix}-grid {
 
   .toolbar-icon {
     cursor: pointer;
+
     &:focus {
       outline: none;
     }
@@ -110,7 +137,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
         &.#{$prefix}-grid-cell-text-wrap {
           .ui-rc_cell-content {
-             word-break: break-word;
+            word-break: break-word;
           }
 
         }
@@ -448,7 +475,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
 
           &.cell-border-top {
-          
+
             &.ui-rc-grid-cell-fix-left-last {
               &::after {
                 left: -100%;
@@ -600,15 +627,20 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
     border-left: 1px solid #e0e0e0;
 
     .be-toolbar-item {
+      .ui-rc-btn {
+        font-size: 12px;
+      }
+
       .toolbar-dropdown-button {
-        .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
+        font-size: 12px;
+        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
           border-color: #28c76f;
         }
 
-        .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
+        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
           border-color: #28c76f;
 
-          .ant-btn-icon {
+          .ui-rc-btn-icon {
             color: #28c76f;
           }
         }
@@ -689,7 +721,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 .#{$prefix}-grid {
 
   .#{$prefix}-pagination {
-    
+
 
     &.top-pagination {
       border: none;
@@ -701,7 +733,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
       }
     }
 
-    padding: 7px;
+    padding: 5px;
 
     border-bottom: 1px solid $tableBorderColor;
     border-inline: 1px solid $tableBorderColor;

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

@@ -349,7 +349,7 @@ const TableBodyCell = props => {
       // display: 'flex',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
-      minHeight: 36,
+      minHeight: 32,
       ...getCommonPinningStyles(cell.column)
     },
     onMouseEnter: e => {
@@ -403,6 +403,9 @@ const TableBodyCell = props => {
       }
     },
     onClick: e => {
+      if (e.detail === 2) {
+        return;
+      }
       const selection = window.getSelection();
       const text = selection ? selection.toString() : "";
       if (text.length > 0 || enableClick === false) {} else {

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

@@ -115,7 +115,7 @@ const TableBodyRow = ({
         rowData: row.original,
         value: cellValue
       }) : /*#__PURE__*/React.createElement(React.Fragment, null, headertext, headertext ? ': ' : '', " ", cellContent);
-      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
+      return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, otherCellAttributes, {
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -124,8 +124,7 @@ const TableBodyRow = ({
         virtualRow: virtualRow,
         isEditing: false,
         colSpan: colSpanGroup ?? 1,
-        rowSpan: 1
-      }, otherCellAttributes, {
+        rowSpan: 1,
         groupValue: groupValue
       }));
     }
@@ -149,7 +148,7 @@ const TableBodyRow = ({
       const childrenData = row.subRows.map(it => it.original);
       const sumValue = sumByField(childrenData, cell.column.id);
       const sumValueFormat = numericFormatter(sumValue.toString(), numericFormatProps);
-      return /*#__PURE__*/React.createElement(TableBodyCellRowGroup, _extends({
+      return /*#__PURE__*/React.createElement(TableBodyCellRowGroup, _extends({}, otherCellAttributes, {
         table: table,
         tableId: tableId,
         key: cell.id,
@@ -160,9 +159,9 @@ const TableBodyRow = ({
         colSpan: onCellColSpan ?? 1,
         rowSpan: onCellRowSpan ?? 1,
         sumValue: sumValueFormat
-      }, otherCellAttributes));
+      }));
     }
-    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({
+    return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, otherCellAttributes, {
       table: table,
       tableId: tableId,
       key: cell.id,
@@ -172,7 +171,7 @@ const TableBodyRow = ({
       isEditing: false,
       colSpan: onCellColSpan ?? 1,
       rowSpan: onCellRowSpan ?? 1
-    }, otherCellAttributes));
+    }));
   }));
 };
 export default TableBodyRow;

package/es/table-virtuoso/style.js

@@ -11,4 +11,4 @@ const colorDark = "#e6e4f3e6";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -124,7 +124,9 @@ const TableWrapper = props => {
     }
   }, /*#__PURE__*/React.createElement(TableVirtuoso, {
     data: table.getRowModel().rows,
-    totalCount: rows.length,
+    totalCount: rows.length
+    // isScrolling={}
+    ,
     components: {
       Table: ({
         style,