es-grid-template 1.9.94 → 1.9.96

package/lib/table-virtuoso/footer/TableFooterCell.d.ts

@@ -2,6 +2,7 @@
 import type { Column } from "@tanstack/react-table";
 interface TableFooterCellProps<T> {
     column: Column<T, any>;
+    footerRow?: Record<string, any>;
 }
-declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
+declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
 export default TableFooterCell;

package/lib/table-virtuoso/footer/TableFooterCell.js

@@ -14,7 +14,8 @@ var _reactNumericComponent = require("react-numeric-component");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const TableFooterCell = ({
-  column
+  column,
+  footerRow
 }) => {
   const {
     prefix,
@@ -22,7 +23,10 @@ const TableFooterCell = ({
     dataSource
   } = (0, _react.useContext)(_useContext.TableContext);
   const col = column.columnDef.meta ?? {};
-  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const isCustomFooter = footerRow !== undefined;
+  const field = col.field;
+  const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
+  const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
   const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const thousandSeparator = cellFormat?.thousandSeparator;
   const decimalSeparator = cellFormat?.decimalSeparator;
@@ -31,7 +35,7 @@ const TableFooterCell = ({
   const dec = cellFormat?.decimalScale;
 
   // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
-  const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
+  const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : (0, _hooks.sumByField)(dataSource, field) : 0;
   const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
   const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
   const numberValue = Number(value);
@@ -44,6 +48,7 @@ const TableFooterCell = ({
     decimalScale: dec,
     fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
   };
+  const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps);
   return /*#__PURE__*/_react.default.createElement("th", {
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
       // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
@@ -58,6 +63,6 @@ const TableFooterCell = ({
       minWidth: column?.getSize(),
       height: 40
     }
-  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, content) : '');
 };
 var _default = exports.default = TableFooterCell;

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

@@ -60,16 +60,46 @@ const Grid = props => {
     setColumnSizing,
     columnFilters,
     setColumnOrder,
-    rowSelection,
     className: tableClassNames,
     ...rest
   } = props;
+  const selectedRowState = table.getState().rowSelection;
   const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
     isChange: false,
     type: '',
     rowData: {},
     rowsData: []
   });
+  const rowSelectedRef = _react.default.useRef(rowSelected);
+  _react.default.useEffect(() => {
+    rowSelectedRef.current = rowSelected;
+  }, [rowSelected]);
+  const pruneSelection = selectionSettings?.pruneSelection === true;
+  const selectedViewRows = _react.default.useMemo(() => {
+    if (!pruneSelection || props.loading) {
+      return [];
+    }
+    return table.getCoreRowModel().flatRows.filter(row => !row.original.isGroupRow && selectedRowState[row.id]).map(row => row.original);
+  }, [pruneSelection, props.loading, table, dataSource, selectedRowState]);
+  const selectedViewIds = JSON.stringify(selectedViewRows.map(row => String(row.rowId)).sort());
+  const lastNotifiedSelection = _react.default.useRef(null);
+
+  // Keep event handlers in sync with the view without another state/effect.
+  const selectionChange = pruneSelection && !props.loading ? {
+    ...isSelectionChange,
+    rowsData: selectedViewRows
+  } : isSelectionChange;
+  _react.default.useEffect(() => {
+    if (!pruneSelection || props.loading || lastNotifiedSelection.current === selectedViewIds) {
+      return;
+    }
+    lastNotifiedSelection.current = selectedViewIds;
+    rowSelected?.({
+      type: isSelectionChange.isChange ? isSelectionChange.type : 'selectionPruned',
+      rowData: isSelectionChange.rowData,
+      selected: selectedViewRows
+    });
+  }, [pruneSelection, props.loading, selectedViewIds, selectedViewRows, rowSelected, isSelectionChange.isChange, isSelectionChange.type, isSelectionChange.rowData]);
   const [sorterChange, setSorterChange] = _react.default.useState(false);
   const [filterChange, setFilterChange] = _react.default.useState(false);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
@@ -86,18 +116,17 @@ const Grid = props => {
   // }, [mergedSelectedKeys])
 
   _react.default.useEffect(() => {
-    if (isSelectionChange.isChange) {
-      const aa = table.getState().rowSelection;
-      const ids = Object.keys(aa);
+    if (!pruneSelection && isSelectionChange.isChange) {
+      const ids = Object.keys(selectedRowState);
       const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
 
-      rowSelected?.({
+      rowSelectedRef.current?.({
         type: isSelectionChange.type,
         rowData: isSelectionChange.rowData,
         selected: ssss.filter(x => !x.isGroupRow)
       });
     }
-  }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
+  }, [isSelectionChange, selectedRowState, pruneSelection]);
   _react.default.useEffect(() => {
     if (sorterChange) {
       const aa = table.getState().sorting;
@@ -188,7 +217,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
-    isSelectionChange: isSelectionChange,
+    isSelectionChange: selectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,
@@ -258,7 +287,7 @@ const Grid = props => {
     originData: originData,
     prefix: prefix,
     selectionSettings: selectionSettings,
-    isSelectionChange: isSelectionChange,
+    isSelectionChange: selectionChange,
     setIsSelectionChange: setIsSelectionChange,
     setSorterChange: setSorterChange,
     setFilterChange: setFilterChange,

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

@@ -299,7 +299,9 @@ const TableContainer = props => {
       pagination,
       groupSetting
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({
+    footerDataSource: props.footerDataSource
+  }, rest, {
     tableContainerRef: tableContainerRef,
     prefix: prefix,
     id: id,

package/lib/table-virtuoso/table/TableWrapper.d.ts

@@ -10,6 +10,7 @@ type Props<T> = {
     height: number;
     minHeight?: number;
     dataSource: T[];
+    footerDataSource?: any[];
     summary?: boolean;
     loading?: boolean;
     commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;

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

@@ -258,14 +258,14 @@ const TableWrapper = props => {
     },
     fixedFooterContent: summary ? () => {
       const visibleColumns = table.getVisibleLeafColumns();
-      return /*#__PURE__*/_react.default.createElement("tr", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (props.footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/_react.default.createElement("tr", {
+        key: index,
         className: "ui-rc-grid-footer-row"
-      }, visibleColumns.map(header => {
-        return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
-          key: header.id,
-          column: header
-        });
-      }));
+      }, visibleColumns.map(column => /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
+        key: column.id,
+        column: column,
+        footerRow: footerRow
+      })))));
     } : undefined
   }))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-content`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.94",
+  "version": "1.9.96",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -47,7 +47,7 @@
     "@hookform/resolvers": "5.0.1",
     "@popperjs/core": "2.11.8",
     "@rc-component/color-picker": "2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/father-plugin": "2.0.1",
     "@rc-component/trigger": "2.0.0",
     "@rc-component/util": "1.0.1",
     "@tanstack/react-table": "8.21.3",