es-grid-template 1.9.95 → 1.9.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/es/grid-component/GridRefreshButton.css +9 -9
  2. package/es/grid-component/type.d.ts +1 -1
  3. package/es/group-component/TableContainer.js +1 -0
  4. package/es/group-component/TableContainerEdit.js +1 -0
  5. package/es/group-component/footer/TableFooter.d.ts +2 -1
  6. package/es/group-component/footer/TableFooter.js +8 -11
  7. package/es/group-component/footer/TableFooterCell.d.ts +2 -1
  8. package/es/group-component/footer/TableFooterCell.js +9 -4
  9. package/es/group-component/footer/TableFooterRow.d.ts +2 -1
  10. package/es/group-component/footer/TableFooterRow.js +4 -2
  11. package/es/group-component/hook/utils.d.ts +9 -9
  12. package/es/group-component/table/TableWrapper.d.ts +1 -0
  13. package/es/group-component/table/TableWrapper.js +4 -3
  14. package/es/table-component/TableContainer.js +3 -1
  15. package/es/table-component/TableContainerEdit.js +3 -1
  16. package/es/table-component/footer/TableFooter.d.ts +2 -1
  17. package/es/table-component/footer/TableFooter.js +8 -11
  18. package/es/table-component/footer/TableFooterCell.d.ts +2 -1
  19. package/es/table-component/footer/TableFooterCell.js +9 -4
  20. package/es/table-component/footer/TableFooterRow.d.ts +2 -1
  21. package/es/table-component/footer/TableFooterRow.js +4 -2
  22. package/es/table-component/table/TableWrapper.d.ts +1 -0
  23. package/es/table-component/table/TableWrapper.js +4 -3
  24. package/es/table-virtuoso/footer/TableFooterCell.d.ts +2 -1
  25. package/es/table-virtuoso/footer/TableFooterCell.js +9 -4
  26. package/es/table-virtuoso/table/TableContainer.js +3 -1
  27. package/es/table-virtuoso/table/TableWrapper.d.ts +1 -0
  28. package/es/table-virtuoso/table/TableWrapper.js +7 -7
  29. package/lib/grid-component/GridRefreshButton.css +9 -9
  30. package/lib/grid-component/type.d.ts +1 -1
  31. package/lib/group-component/TableContainer.js +1 -0
  32. package/lib/group-component/TableContainerEdit.js +1 -0
  33. package/lib/group-component/footer/TableFooter.d.ts +2 -1
  34. package/lib/group-component/footer/TableFooter.js +8 -11
  35. package/lib/group-component/footer/TableFooterCell.d.ts +2 -1
  36. package/lib/group-component/footer/TableFooterCell.js +9 -4
  37. package/lib/group-component/footer/TableFooterRow.d.ts +2 -1
  38. package/lib/group-component/footer/TableFooterRow.js +4 -2
  39. package/lib/group-component/table/TableWrapper.d.ts +1 -0
  40. package/lib/group-component/table/TableWrapper.js +4 -3
  41. package/lib/table-component/TableContainer.js +3 -1
  42. package/lib/table-component/TableContainerEdit.js +3 -1
  43. package/lib/table-component/footer/TableFooter.d.ts +2 -1
  44. package/lib/table-component/footer/TableFooter.js +8 -11
  45. package/lib/table-component/footer/TableFooterCell.d.ts +2 -1
  46. package/lib/table-component/footer/TableFooterCell.js +9 -4
  47. package/lib/table-component/footer/TableFooterRow.d.ts +2 -1
  48. package/lib/table-component/footer/TableFooterRow.js +4 -2
  49. package/lib/table-component/table/TableWrapper.d.ts +1 -0
  50. package/lib/table-component/table/TableWrapper.js +4 -3
  51. package/lib/table-virtuoso/footer/TableFooterCell.d.ts +2 -1
  52. package/lib/table-virtuoso/footer/TableFooterCell.js +9 -4
  53. package/lib/table-virtuoso/table/TableContainer.js +3 -1
  54. package/lib/table-virtuoso/table/TableWrapper.d.ts +1 -0
  55. package/lib/table-virtuoso/table/TableWrapper.js +7 -7
  56. package/package.json +1 -1
  57. package/CHANGELOG.md +0 -16
@@ -1,9 +1,9 @@
1
- .ui-rc-grid-refresh-spin {
2
- transform-origin: center;
3
- transform-box: fill-box;
4
- animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
5
- }
6
-
7
- @keyframes ui-rc-grid-refresh-spin {
8
- to { transform: rotate(360deg); }
9
- }
1
+ .ui-rc-grid-refresh-spin {
2
+ transform-origin: center;
3
+ transform-box: fill-box;
4
+ animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
5
+ }
6
+
7
+ @keyframes ui-rc-grid-refresh-spin {
8
+ to { transform: rotate(360deg); }
9
+ }
@@ -494,7 +494,7 @@ export type TableProps<RecordType = AnyObject> = {
494
494
  allowResizing?: boolean;
495
495
  /** Hiển thị dòng tổng hợp */
496
496
  summary?: boolean;
497
- /** Dữ liệu footer */
497
+ /** Dữ liệu footer theo field của cột, dùng khi summary=true. Không truyền thì tự tính tổng; [] ẩn các dòng footer. */
498
498
  footerDataSource?: any[];
499
499
  /** Hiển thị text khi không có dữ liệu */
500
500
  showEmptyText?: boolean;
@@ -339,6 +339,7 @@ const TableContainer = props => {
339
339
  groupColumns
340
340
  }
341
341
  }, /*#__PURE__*/React.createElement(TableWrapper, {
342
+ footerDataSource: props.footerDataSource,
342
343
  contextMenuItems: contextMenuItems,
343
344
  height: tableHeight,
344
345
  minHeight: minHeight,
@@ -2259,6 +2259,7 @@ const TableContainerEdit = props => {
2259
2259
  groupColumns
2260
2260
  }
2261
2261
  }, /*#__PURE__*/React.createElement(TableWrapper, {
2262
+ footerDataSource: props.footerDataSource,
2262
2263
  contextMenuItems: contextMenuItems,
2263
2264
  height: tableHeight,
2264
2265
  minHeight: minHeight,
@@ -2,6 +2,7 @@
2
2
  import type { Table } from "@tanstack/react-table";
3
3
  interface TableFooterProps<T> {
4
4
  table: Table<T>;
5
+ footerDataSource?: any[];
5
6
  }
6
- declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => JSX.Element;
7
+ declare const TableFooter: <RecordType extends object>({ table, footerDataSource, }: TableFooterProps<RecordType>) => JSX.Element;
7
8
  export default TableFooter;
@@ -4,7 +4,8 @@ import { TableContext } from "../useContext";
4
4
  import React, { useContext } from "react";
5
5
  const TableFooter = ({
6
6
  // columnVirtualizer,
7
- table
7
+ table,
8
+ footerDataSource
8
9
  // virtualPaddingLeft,
9
10
  // virtualPaddingRight,
10
11
  // ...rest
@@ -20,15 +21,11 @@ const TableFooter = ({
20
21
  bottom: 0,
21
22
  zIndex: 1
22
23
  }
23
- }, /*#__PURE__*/React.createElement(TableFooterRow, {
24
- table: table
25
- // columnVirtualizer={columnVirtualizer}
26
- ,
27
- headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
28
- // key={headerGroup.id}
29
- // virtualPaddingLeft={virtualPaddingLeft}
30
- // virtualPaddingRight={virtualPaddingRight}
31
- // {...rest}
32
- }));
24
+ }, (footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/React.createElement(TableFooterRow, {
25
+ key: index,
26
+ table: table,
27
+ headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1],
28
+ footerRow: footerRow
29
+ })));
33
30
  };
34
31
  export default TableFooter;
@@ -2,6 +2,7 @@
2
2
  import type { Column } from "@tanstack/react-table";
3
3
  interface TableFooterCellProps<T> {
4
4
  column: Column<T, any>;
5
+ footerRow?: Record<string, any>;
5
6
  }
6
- declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
7
+ declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
7
8
  export default TableFooterCell;
@@ -5,7 +5,8 @@ import classNames from "classnames";
5
5
  import { sumByField } from "../../grid-component/hooks";
6
6
  import { numericFormatter } from "react-numeric-component";
7
7
  const TableFooterCell = ({
8
- column
8
+ column,
9
+ footerRow
9
10
  }) => {
10
11
  const isPinned = column.getIsPinned();
11
12
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -16,7 +17,10 @@ const TableFooterCell = ({
16
17
  dataSource
17
18
  } = useContext(TableContext);
18
19
  const col = column.columnDef.meta ?? {};
19
- const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
20
+ const isCustomFooter = footerRow !== undefined;
21
+ const field = col.field;
22
+ const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
23
+ const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
20
24
  const cellFormat = getFormat(colFormat, format);
21
25
  const thousandSeparator = cellFormat?.thousandSeparator;
22
26
  const decimalSeparator = cellFormat?.decimalSeparator;
@@ -25,7 +29,7 @@ const TableFooterCell = ({
25
29
  const dec = cellFormat?.decimalScale;
26
30
 
27
31
  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
28
- const sumValue = col.type === 'number' ? sumByField(dataSource, col?.field) : 0;
32
+ const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : sumByField(dataSource, field) : 0;
29
33
  const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
30
34
  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
31
35
  const numberValue = Number(value);
@@ -38,6 +42,7 @@ const TableFooterCell = ({
38
42
  decimalScale: dec,
39
43
  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
40
44
  };
45
+ const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : numericFormatter(cellValue, numericFormatProps);
41
46
  return /*#__PURE__*/React.createElement("div", {
42
47
  // ref={el => {
43
48
  // if (el) columnVirtualizer.measureElement(el)
@@ -61,6 +66,6 @@ const TableFooterCell = ({
61
66
  minWidth: column?.getSize()
62
67
  // backgroundColor: "#fafafa",
63
68
  }
64
- }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
69
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, content) : '');
65
70
  };
66
71
  export default TableFooterCell;
@@ -2,7 +2,8 @@
2
2
  import type { HeaderGroup, Table } from "@tanstack/react-table";
3
3
  interface TableFooterRowProps<T> {
4
4
  table: Table<T>;
5
+ footerRow?: Record<string, any>;
5
6
  headerGroup: HeaderGroup<T>;
6
7
  }
7
- declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
+ declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, footerRow, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
9
  export default TableFooterRow;
@@ -3,7 +3,8 @@ import React from "react";
3
3
  import { TableContext } from "../useContext";
4
4
  const TableFooterRow = ({
5
5
  table,
6
- headerGroup
6
+ headerGroup,
7
+ footerRow
7
8
  }) => {
8
9
  const visibleColumns = table.getVisibleLeafColumns();
9
10
  const {
@@ -23,7 +24,8 @@ const TableFooterRow = ({
23
24
  }, visibleColumns.map(header => {
24
25
  return /*#__PURE__*/React.createElement(TableFooterCell, {
25
26
  key: header.id,
26
- column: header
27
+ column: header,
28
+ footerRow: footerRow
27
29
  });
28
30
  }));
29
31
  };
@@ -167,7 +167,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
167
167
  haveSum?: boolean;
168
168
  isSummary?: boolean;
169
169
  sumGroup?: boolean;
170
- summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
170
+ summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
171
171
  sorter?: boolean;
172
172
  allowFiltering?: boolean;
173
173
  allowSortering?: boolean;
@@ -179,27 +179,27 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
179
179
  showFilterSearch?: boolean;
180
180
  hidden?: boolean;
181
181
  visible?: boolean;
182
- headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
182
+ headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
183
183
  columnGroupText?: string;
184
184
  headerTextAlign?: import("./../../grid-component/type").ITextAlign;
185
- headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
185
+ headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
186
186
  fixedType?: import("./../../grid-component/type").FixedType;
187
187
  headerTextWrap?: boolean;
188
188
  ellipsis?: boolean;
189
189
  allowResizing?: boolean;
190
190
  align?: import("./../../grid-component/type").ITextAlign;
191
191
  textAlign?: import("./../../grid-component/type").ITextAlign;
192
- template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
193
- linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
192
+ template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
193
+ linkTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
194
194
  showTooltip?: boolean;
195
195
  tooltipDescription?: string | ((args: {
196
196
  value: any;
197
197
  rowData: RecordType;
198
- }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
199
- onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
200
- onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
198
+ }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
199
+ onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
200
+ onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
201
201
  onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
202
- onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
202
+ onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
203
203
  getValue?: (row: any, rowIndex: number) => any;
204
204
  getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
205
205
  headerCellProps?: import("./../../grid-component/type").CellProps;
@@ -11,6 +11,7 @@ type Props<T> = {
11
11
  height: number;
12
12
  minHeight?: number;
13
13
  table: Table<T>;
14
+ footerDataSource?: any[];
14
15
  summary?: boolean;
15
16
  loading?: boolean;
16
17
  commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
@@ -232,9 +232,10 @@ const TableWrapper = props => {
232
232
  virtualPaddingRight: virtualPaddingRight,
233
233
  fixedLeftColumns: fixedLeftColumns,
234
234
  fixedRightColumns: fixedRightColumns
235
- }), summary && /*#__PURE__*/React.createElement(TableFooter
236
- // columnVirtualizer={columnVirtualizer}
237
- , {
235
+ }), summary && /*#__PURE__*/React.createElement(TableFooter, {
236
+ footerDataSource: props.footerDataSource
237
+ // columnVirtualizer={columnVirtualizer}
238
+ ,
238
239
  table: table
239
240
  // virtualPaddingLeft={virtualPaddingLeft}
240
241
  // virtualPaddingRight={virtualPaddingRight}
@@ -350,7 +350,9 @@ const TableContainer = props => {
350
350
  setIsExpandClick,
351
351
  maxDepth
352
352
  }
353
- }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
353
+ }, /*#__PURE__*/React.createElement(TableWrapper, _extends({
354
+ footerDataSource: props.footerDataSource
355
+ }, rest, {
354
356
  contextMenuItems: contextMenuItems,
355
357
  height: tableHeight,
356
358
  minHeight: minHeight,
@@ -2277,7 +2277,9 @@ const TableContainerEdit = props => {
2277
2277
  setIsExpandClick,
2278
2278
  isAddAble
2279
2279
  }
2280
- }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
2280
+ }, /*#__PURE__*/React.createElement(TableWrapper, _extends({
2281
+ footerDataSource: props.footerDataSource
2282
+ }, rest, {
2281
2283
  contextMenuItems: contextMenuItems,
2282
2284
  height: tableHeight,
2283
2285
  minHeight: minHeight,
@@ -2,6 +2,7 @@
2
2
  import type { Table } from "@tanstack/react-table";
3
3
  interface TableFooterProps<T> {
4
4
  table: Table<T>;
5
+ footerDataSource?: any[];
5
6
  }
6
- declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => JSX.Element;
7
+ declare const TableFooter: <RecordType extends object>({ table, footerDataSource, }: TableFooterProps<RecordType>) => JSX.Element;
7
8
  export default TableFooter;
@@ -4,7 +4,8 @@ import { TableContext } from "../useContext";
4
4
  import React, { useContext } from "react";
5
5
  const TableFooter = ({
6
6
  // columnVirtualizer,
7
- table
7
+ table,
8
+ footerDataSource
8
9
  // virtualPaddingLeft,
9
10
  // virtualPaddingRight,
10
11
  // ...rest
@@ -20,15 +21,11 @@ const TableFooter = ({
20
21
  bottom: 0,
21
22
  zIndex: 1
22
23
  }
23
- }, /*#__PURE__*/React.createElement(TableFooterRow, {
24
- table: table
25
- // columnVirtualizer={columnVirtualizer}
26
- ,
27
- headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
28
- // key={headerGroup.id}
29
- // virtualPaddingLeft={virtualPaddingLeft}
30
- // virtualPaddingRight={virtualPaddingRight}
31
- // {...rest}
32
- }));
24
+ }, (footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/React.createElement(TableFooterRow, {
25
+ key: index,
26
+ table: table,
27
+ headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1],
28
+ footerRow: footerRow
29
+ })));
33
30
  };
34
31
  export default TableFooter;
@@ -2,6 +2,7 @@
2
2
  import type { Column } from "@tanstack/react-table";
3
3
  interface TableFooterCellProps<T> {
4
4
  column: Column<T, any>;
5
+ footerRow?: Record<string, any>;
5
6
  }
6
- declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
7
+ declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
7
8
  export default TableFooterCell;
@@ -5,7 +5,8 @@ import classNames from "classnames";
5
5
  import { sumByField } from "../../grid-component/hooks";
6
6
  import { numericFormatter } from "react-numeric-component";
7
7
  const TableFooterCell = ({
8
- column
8
+ column,
9
+ footerRow
9
10
  }) => {
10
11
  const isPinned = column.getIsPinned();
11
12
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -16,7 +17,10 @@ const TableFooterCell = ({
16
17
  dataSource
17
18
  } = useContext(TableContext);
18
19
  const col = column.columnDef.meta ?? {};
19
- const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
20
+ const isCustomFooter = footerRow !== undefined;
21
+ const field = col.field;
22
+ const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
23
+ const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
20
24
  const cellFormat = getFormat(colFormat, format);
21
25
  const thousandSeparator = cellFormat?.thousandSeparator;
22
26
  const decimalSeparator = cellFormat?.decimalSeparator;
@@ -25,7 +29,7 @@ const TableFooterCell = ({
25
29
  const dec = cellFormat?.decimalScale;
26
30
 
27
31
  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
28
- const sumValue = col.type === 'number' ? sumByField(dataSource, col?.field) : 0;
32
+ const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : sumByField(dataSource, field) : 0;
29
33
  const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
30
34
  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
31
35
  const numberValue = Number(value);
@@ -38,6 +42,7 @@ const TableFooterCell = ({
38
42
  decimalScale: dec,
39
43
  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
40
44
  };
45
+ const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : numericFormatter(cellValue, numericFormatProps);
41
46
  return /*#__PURE__*/React.createElement("div", {
42
47
  // ref={el => {
43
48
  // if (el) columnVirtualizer.measureElement(el)
@@ -61,6 +66,6 @@ const TableFooterCell = ({
61
66
  minWidth: column?.getSize()
62
67
  // backgroundColor: "#fafafa",
63
68
  }
64
- }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
69
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, content) : '');
65
70
  };
66
71
  export default TableFooterCell;
@@ -2,7 +2,8 @@
2
2
  import type { HeaderGroup, Table } from "@tanstack/react-table";
3
3
  interface TableFooterRowProps<T> {
4
4
  table: Table<T>;
5
+ footerRow?: Record<string, any>;
5
6
  headerGroup: HeaderGroup<T>;
6
7
  }
7
- declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
+ declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, footerRow, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
9
  export default TableFooterRow;
@@ -3,7 +3,8 @@ import React from "react";
3
3
  import { TableContext } from "../useContext";
4
4
  const TableFooterRow = ({
5
5
  table,
6
- headerGroup
6
+ headerGroup,
7
+ footerRow
7
8
  }) => {
8
9
  const visibleColumns = table.getVisibleLeafColumns();
9
10
  const {
@@ -23,7 +24,8 @@ const TableFooterRow = ({
23
24
  }, visibleColumns.map(header => {
24
25
  return /*#__PURE__*/React.createElement(TableFooterCell, {
25
26
  key: header.id,
26
- column: header
27
+ column: header,
28
+ footerRow: footerRow
27
29
  });
28
30
  }));
29
31
  };
@@ -11,6 +11,7 @@ type Props<T> = {
11
11
  minHeight?: number;
12
12
  table: Table<T>;
13
13
  showHeader?: boolean;
14
+ footerDataSource?: any[];
14
15
  summary?: boolean;
15
16
  loading?: boolean;
16
17
  commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
@@ -285,9 +285,10 @@ const TableWrapper = props => {
285
285
  virtualPaddingRight: virtualPaddingRight,
286
286
  fixedLeftColumns: fixedLeftColumns,
287
287
  fixedRightColumns: fixedRightColumns
288
- }), summary && /*#__PURE__*/React.createElement(TableFooter
289
- // columnVirtualizer={columnVirtualizer}
290
- , {
288
+ }), summary && /*#__PURE__*/React.createElement(TableFooter, {
289
+ footerDataSource: props.footerDataSource
290
+ // columnVirtualizer={columnVirtualizer}
291
+ ,
291
292
  table: table
292
293
  // virtualPaddingLeft={virtualPaddingLeft}
293
294
  // virtualPaddingRight={virtualPaddingRight}
@@ -2,6 +2,7 @@
2
2
  import type { Column } from "@tanstack/react-table";
3
3
  interface TableFooterCellProps<T> {
4
4
  column: Column<T, any>;
5
+ footerRow?: Record<string, any>;
5
6
  }
6
- declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
7
+ declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
7
8
  export default TableFooterCell;
@@ -5,7 +5,8 @@ import classNames from "classnames";
5
5
  import { sumByField } from "../../grid-component/hooks";
6
6
  import { numericFormatter } from "react-numeric-component";
7
7
  const TableFooterCell = ({
8
- column
8
+ column,
9
+ footerRow
9
10
  }) => {
10
11
  const {
11
12
  prefix,
@@ -13,7 +14,10 @@ const TableFooterCell = ({
13
14
  dataSource
14
15
  } = useContext(TableContext);
15
16
  const col = column.columnDef.meta ?? {};
16
- const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
17
+ const isCustomFooter = footerRow !== undefined;
18
+ const field = col.field;
19
+ const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
20
+ const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
17
21
  const cellFormat = getFormat(colFormat, format);
18
22
  const thousandSeparator = cellFormat?.thousandSeparator;
19
23
  const decimalSeparator = cellFormat?.decimalSeparator;
@@ -22,7 +26,7 @@ const TableFooterCell = ({
22
26
  const dec = cellFormat?.decimalScale;
23
27
 
24
28
  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
25
- const sumValue = col.type === 'number' ? sumByField(dataSource, col?.field) : 0;
29
+ const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : sumByField(dataSource, field) : 0;
26
30
  const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
27
31
  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
28
32
  const numberValue = Number(value);
@@ -35,6 +39,7 @@ const TableFooterCell = ({
35
39
  decimalScale: dec,
36
40
  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
37
41
  };
42
+ const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : numericFormatter(cellValue, numericFormatProps);
38
43
  return /*#__PURE__*/React.createElement("th", {
39
44
  className: classNames(`${prefix}-grid-cell`, {
40
45
  // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
@@ -49,6 +54,6 @@ const TableFooterCell = ({
49
54
  minWidth: column?.getSize(),
50
55
  height: 40
51
56
  }
52
- }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
57
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, content) : '');
53
58
  };
54
59
  export default TableFooterCell;
@@ -291,7 +291,9 @@ const TableContainer = props => {
291
291
  pagination,
292
292
  groupSetting
293
293
  }
294
- }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
294
+ }, /*#__PURE__*/React.createElement(TableWrapper, _extends({
295
+ footerDataSource: props.footerDataSource
296
+ }, rest, {
295
297
  tableContainerRef: tableContainerRef,
296
298
  prefix: prefix,
297
299
  id: id,
@@ -10,6 +10,7 @@ type Props<T> = {
10
10
  height: number;
11
11
  minHeight?: number;
12
12
  dataSource: T[];
13
+ footerDataSource?: any[];
13
14
  summary?: boolean;
14
15
  loading?: boolean;
15
16
  commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
@@ -247,14 +247,14 @@ const TableWrapper = props => {
247
247
  },
248
248
  fixedFooterContent: summary ? () => {
249
249
  const visibleColumns = table.getVisibleLeafColumns();
250
- return /*#__PURE__*/React.createElement("tr", {
250
+ return /*#__PURE__*/React.createElement(React.Fragment, null, (props.footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/React.createElement("tr", {
251
+ key: index,
251
252
  className: "ui-rc-grid-footer-row"
252
- }, visibleColumns.map(header => {
253
- return /*#__PURE__*/React.createElement(TableFooterCell, {
254
- key: header.id,
255
- column: header
256
- });
257
- }));
253
+ }, visibleColumns.map(column => /*#__PURE__*/React.createElement(TableFooterCell, {
254
+ key: column.id,
255
+ column: column,
256
+ footerRow: footerRow
257
+ })))));
258
258
  } : undefined
259
259
  }))), /*#__PURE__*/React.createElement(Tooltip, {
260
260
  id: `${id}-tooltip-content`,
@@ -1,9 +1,9 @@
1
- .ui-rc-grid-refresh-spin {
2
- transform-origin: center;
3
- transform-box: fill-box;
4
- animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
5
- }
6
-
7
- @keyframes ui-rc-grid-refresh-spin {
8
- to { transform: rotate(360deg); }
9
- }
1
+ .ui-rc-grid-refresh-spin {
2
+ transform-origin: center;
3
+ transform-box: fill-box;
4
+ animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
5
+ }
6
+
7
+ @keyframes ui-rc-grid-refresh-spin {
8
+ to { transform: rotate(360deg); }
9
+ }
@@ -494,7 +494,7 @@ export type TableProps<RecordType = AnyObject> = {
494
494
  allowResizing?: boolean;
495
495
  /** Hiển thị dòng tổng hợp */
496
496
  summary?: boolean;
497
- /** Dữ liệu footer */
497
+ /** Dữ liệu footer theo field của cột, dùng khi summary=true. Không truyền thì tự tính tổng; [] ẩn các dòng footer. */
498
498
  footerDataSource?: any[];
499
499
  /** Hiển thị text khi không có dữ liệu */
500
500
  showEmptyText?: boolean;
@@ -347,6 +347,7 @@ const TableContainer = props => {
347
347
  groupColumns
348
348
  }
349
349
  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
350
+ footerDataSource: props.footerDataSource,
350
351
  contextMenuItems: contextMenuItems,
351
352
  height: tableHeight,
352
353
  minHeight: minHeight,
@@ -2267,6 +2267,7 @@ const TableContainerEdit = props => {
2267
2267
  groupColumns
2268
2268
  }
2269
2269
  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
2270
+ footerDataSource: props.footerDataSource,
2270
2271
  contextMenuItems: contextMenuItems,
2271
2272
  height: tableHeight,
2272
2273
  minHeight: minHeight,
@@ -2,6 +2,7 @@
2
2
  import type { Table } from "@tanstack/react-table";
3
3
  interface TableFooterProps<T> {
4
4
  table: Table<T>;
5
+ footerDataSource?: any[];
5
6
  }
6
- declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => JSX.Element;
7
+ declare const TableFooter: <RecordType extends object>({ table, footerDataSource, }: TableFooterProps<RecordType>) => JSX.Element;
7
8
  export default TableFooter;
@@ -14,7 +14,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
14
14
 
15
15
  const TableFooter = ({
16
16
  // columnVirtualizer,
17
- table
17
+ table,
18
+ footerDataSource
18
19
  // virtualPaddingLeft,
19
20
  // virtualPaddingRight,
20
21
  // ...rest
@@ -30,15 +31,11 @@ const TableFooter = ({
30
31
  bottom: 0,
31
32
  zIndex: 1
32
33
  }
33
- }, /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
34
- table: table
35
- // columnVirtualizer={columnVirtualizer}
36
- ,
37
- headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
38
- // key={headerGroup.id}
39
- // virtualPaddingLeft={virtualPaddingLeft}
40
- // virtualPaddingRight={virtualPaddingRight}
41
- // {...rest}
42
- }));
34
+ }, (footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
35
+ key: index,
36
+ table: table,
37
+ headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1],
38
+ footerRow: footerRow
39
+ })));
43
40
  };
44
41
  var _default = exports.default = TableFooter;
@@ -2,6 +2,7 @@
2
2
  import type { Column } from "@tanstack/react-table";
3
3
  interface TableFooterCellProps<T> {
4
4
  column: Column<T, any>;
5
+ footerRow?: Record<string, any>;
5
6
  }
6
- declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
7
+ declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
7
8
  export default TableFooterCell;
@@ -14,7 +14,8 @@ var _reactNumericComponent = require("react-numeric-component");
14
14
  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); }
15
15
  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; }
16
16
  const TableFooterCell = ({
17
- column
17
+ column,
18
+ footerRow
18
19
  }) => {
19
20
  const isPinned = column.getIsPinned();
20
21
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -25,7 +26,10 @@ const TableFooterCell = ({
25
26
  dataSource
26
27
  } = (0, _react.useContext)(_useContext.TableContext);
27
28
  const col = column.columnDef.meta ?? {};
28
- const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
29
+ const isCustomFooter = footerRow !== undefined;
30
+ const field = col.field;
31
+ const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
32
+ const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
29
33
  const cellFormat = (0, _utils.getFormat)(colFormat, format);
30
34
  const thousandSeparator = cellFormat?.thousandSeparator;
31
35
  const decimalSeparator = cellFormat?.decimalSeparator;
@@ -34,7 +38,7 @@ const TableFooterCell = ({
34
38
  const dec = cellFormat?.decimalScale;
35
39
 
36
40
  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
37
- const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
41
+ const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : (0, _hooks.sumByField)(dataSource, field) : 0;
38
42
  const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
39
43
  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
40
44
  const numberValue = Number(value);
@@ -47,6 +51,7 @@ const TableFooterCell = ({
47
51
  decimalScale: dec,
48
52
  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
49
53
  };
54
+ const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps);
50
55
  return /*#__PURE__*/_react.default.createElement("div", {
51
56
  // ref={el => {
52
57
  // if (el) columnVirtualizer.measureElement(el)
@@ -70,6 +75,6 @@ const TableFooterCell = ({
70
75
  minWidth: column?.getSize()
71
76
  // backgroundColor: "#fafafa",
72
77
  }
73
- }, 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)) : '');
78
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, content) : '');
74
79
  };
75
80
  var _default = exports.default = TableFooterCell;
@@ -2,7 +2,8 @@
2
2
  import type { HeaderGroup, Table } from "@tanstack/react-table";
3
3
  interface TableFooterRowProps<T> {
4
4
  table: Table<T>;
5
+ footerRow?: Record<string, any>;
5
6
  headerGroup: HeaderGroup<T>;
6
7
  }
7
- declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
+ declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, footerRow, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
9
  export default TableFooterRow;
@@ -10,7 +10,8 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _useContext = require("../useContext");
11
11
  const TableFooterRow = ({
12
12
  table,
13
- headerGroup
13
+ headerGroup,
14
+ footerRow
14
15
  }) => {
15
16
  const visibleColumns = table.getVisibleLeafColumns();
16
17
  const {
@@ -30,7 +31,8 @@ const TableFooterRow = ({
30
31
  }, visibleColumns.map(header => {
31
32
  return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
32
33
  key: header.id,
33
- column: header
34
+ column: header,
35
+ footerRow: footerRow
34
36
  });
35
37
  }));
36
38
  };
@@ -11,6 +11,7 @@ type Props<T> = {
11
11
  height: number;
12
12
  minHeight?: number;
13
13
  table: Table<T>;
14
+ footerDataSource?: any[];
14
15
  summary?: boolean;
15
16
  loading?: boolean;
16
17
  commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
@@ -241,9 +241,10 @@ const TableWrapper = props => {
241
241
  virtualPaddingRight: virtualPaddingRight,
242
242
  fixedLeftColumns: fixedLeftColumns,
243
243
  fixedRightColumns: fixedRightColumns
244
- }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default
245
- // columnVirtualizer={columnVirtualizer}
246
- , {
244
+ }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
245
+ footerDataSource: props.footerDataSource
246
+ // columnVirtualizer={columnVirtualizer}
247
+ ,
247
248
  table: table
248
249
  // virtualPaddingLeft={virtualPaddingLeft}
249
250
  // virtualPaddingRight={virtualPaddingRight}
@@ -357,7 +357,9 @@ const TableContainer = props => {
357
357
  setIsExpandClick,
358
358
  maxDepth
359
359
  }
360
- }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
360
+ }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({
361
+ footerDataSource: props.footerDataSource
362
+ }, rest, {
361
363
  contextMenuItems: contextMenuItems,
362
364
  height: tableHeight,
363
365
  minHeight: minHeight,
@@ -2276,7 +2276,9 @@ const TableContainerEdit = props => {
2276
2276
  setIsExpandClick,
2277
2277
  isAddAble
2278
2278
  }
2279
- }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
2279
+ }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({
2280
+ footerDataSource: props.footerDataSource
2281
+ }, rest, {
2280
2282
  contextMenuItems: contextMenuItems,
2281
2283
  height: tableHeight,
2282
2284
  minHeight: minHeight,
@@ -2,6 +2,7 @@
2
2
  import type { Table } from "@tanstack/react-table";
3
3
  interface TableFooterProps<T> {
4
4
  table: Table<T>;
5
+ footerDataSource?: any[];
5
6
  }
6
- declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => JSX.Element;
7
+ declare const TableFooter: <RecordType extends object>({ table, footerDataSource, }: TableFooterProps<RecordType>) => JSX.Element;
7
8
  export default TableFooter;
@@ -14,7 +14,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
14
14
 
15
15
  const TableFooter = ({
16
16
  // columnVirtualizer,
17
- table
17
+ table,
18
+ footerDataSource
18
19
  // virtualPaddingLeft,
19
20
  // virtualPaddingRight,
20
21
  // ...rest
@@ -30,15 +31,11 @@ const TableFooter = ({
30
31
  bottom: 0,
31
32
  zIndex: 1
32
33
  }
33
- }, /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
34
- table: table
35
- // columnVirtualizer={columnVirtualizer}
36
- ,
37
- headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
38
- // key={headerGroup.id}
39
- // virtualPaddingLeft={virtualPaddingLeft}
40
- // virtualPaddingRight={virtualPaddingRight}
41
- // {...rest}
42
- }));
34
+ }, (footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/_react.default.createElement(_TableFooterRow.default, {
35
+ key: index,
36
+ table: table,
37
+ headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1],
38
+ footerRow: footerRow
39
+ })));
43
40
  };
44
41
  var _default = exports.default = TableFooter;
@@ -2,6 +2,7 @@
2
2
  import type { Column } from "@tanstack/react-table";
3
3
  interface TableFooterCellProps<T> {
4
4
  column: Column<T, any>;
5
+ footerRow?: Record<string, any>;
5
6
  }
6
- declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
7
+ declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
7
8
  export default TableFooterCell;
@@ -14,7 +14,8 @@ var _reactNumericComponent = require("react-numeric-component");
14
14
  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); }
15
15
  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; }
16
16
  const TableFooterCell = ({
17
- column
17
+ column,
18
+ footerRow
18
19
  }) => {
19
20
  const isPinned = column.getIsPinned();
20
21
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
@@ -25,7 +26,10 @@ const TableFooterCell = ({
25
26
  dataSource
26
27
  } = (0, _react.useContext)(_useContext.TableContext);
27
28
  const col = column.columnDef.meta ?? {};
28
- const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
29
+ const isCustomFooter = footerRow !== undefined;
30
+ const field = col.field;
31
+ const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
32
+ const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
29
33
  const cellFormat = (0, _utils.getFormat)(colFormat, format);
30
34
  const thousandSeparator = cellFormat?.thousandSeparator;
31
35
  const decimalSeparator = cellFormat?.decimalSeparator;
@@ -34,7 +38,7 @@ const TableFooterCell = ({
34
38
  const dec = cellFormat?.decimalScale;
35
39
 
36
40
  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
37
- const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
41
+ const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : (0, _hooks.sumByField)(dataSource, field) : 0;
38
42
  const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
39
43
  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
40
44
  const numberValue = Number(value);
@@ -47,6 +51,7 @@ const TableFooterCell = ({
47
51
  decimalScale: dec,
48
52
  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
49
53
  };
54
+ const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps);
50
55
  return /*#__PURE__*/_react.default.createElement("div", {
51
56
  // ref={el => {
52
57
  // if (el) columnVirtualizer.measureElement(el)
@@ -70,6 +75,6 @@ const TableFooterCell = ({
70
75
  minWidth: column?.getSize()
71
76
  // backgroundColor: "#fafafa",
72
77
  }
73
- }, 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)) : '');
78
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, content) : '');
74
79
  };
75
80
  var _default = exports.default = TableFooterCell;
@@ -2,7 +2,8 @@
2
2
  import type { HeaderGroup, Table } from "@tanstack/react-table";
3
3
  interface TableFooterRowProps<T> {
4
4
  table: Table<T>;
5
+ footerRow?: Record<string, any>;
5
6
  headerGroup: HeaderGroup<T>;
6
7
  }
7
- declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
+ declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, footerRow, }: TableFooterRowProps<RecordType>) => JSX.Element;
8
9
  export default TableFooterRow;
@@ -10,7 +10,8 @@ var _react = _interopRequireDefault(require("react"));
10
10
  var _useContext = require("../useContext");
11
11
  const TableFooterRow = ({
12
12
  table,
13
- headerGroup
13
+ headerGroup,
14
+ footerRow
14
15
  }) => {
15
16
  const visibleColumns = table.getVisibleLeafColumns();
16
17
  const {
@@ -30,7 +31,8 @@ const TableFooterRow = ({
30
31
  }, visibleColumns.map(header => {
31
32
  return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
32
33
  key: header.id,
33
- column: header
34
+ column: header,
35
+ footerRow: footerRow
34
36
  });
35
37
  }));
36
38
  };
@@ -11,6 +11,7 @@ type Props<T> = {
11
11
  minHeight?: number;
12
12
  table: Table<T>;
13
13
  showHeader?: boolean;
14
+ footerDataSource?: any[];
14
15
  summary?: boolean;
15
16
  loading?: boolean;
16
17
  commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
@@ -294,9 +294,10 @@ const TableWrapper = props => {
294
294
  virtualPaddingRight: virtualPaddingRight,
295
295
  fixedLeftColumns: fixedLeftColumns,
296
296
  fixedRightColumns: fixedRightColumns
297
- }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default
298
- // columnVirtualizer={columnVirtualizer}
299
- , {
297
+ }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
298
+ footerDataSource: props.footerDataSource
299
+ // columnVirtualizer={columnVirtualizer}
300
+ ,
300
301
  table: table
301
302
  // virtualPaddingLeft={virtualPaddingLeft}
302
303
  // virtualPaddingRight={virtualPaddingRight}
@@ -2,6 +2,7 @@
2
2
  import type { Column } from "@tanstack/react-table";
3
3
  interface TableFooterCellProps<T> {
4
4
  column: Column<T, any>;
5
+ footerRow?: Record<string, any>;
5
6
  }
6
- declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => JSX.Element;
7
+ declare const TableFooterCell: <RecordType extends object>({ column, footerRow }: TableFooterCellProps<RecordType>) => JSX.Element;
7
8
  export default TableFooterCell;
@@ -14,7 +14,8 @@ var _reactNumericComponent = require("react-numeric-component");
14
14
  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); }
15
15
  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; }
16
16
  const TableFooterCell = ({
17
- column
17
+ column,
18
+ footerRow
18
19
  }) => {
19
20
  const {
20
21
  prefix,
@@ -22,7 +23,10 @@ const TableFooterCell = ({
22
23
  dataSource
23
24
  } = (0, _react.useContext)(_useContext.TableContext);
24
25
  const col = column.columnDef.meta ?? {};
25
- const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
26
+ const isCustomFooter = footerRow !== undefined;
27
+ const field = col.field;
28
+ const hasFooterValue = isCustomFooter && Object.prototype.hasOwnProperty.call(footerRow, field) && footerRow[field] != null;
29
+ const colFormat = typeof col.format === 'function' ? col.format(footerRow ?? {}) : col.format;
26
30
  const cellFormat = (0, _utils.getFormat)(colFormat, format);
27
31
  const thousandSeparator = cellFormat?.thousandSeparator;
28
32
  const decimalSeparator = cellFormat?.decimalSeparator;
@@ -31,7 +35,7 @@ const TableFooterCell = ({
31
35
  const dec = cellFormat?.decimalScale;
32
36
 
33
37
  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
34
- const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
38
+ const sumValue = col.type === 'number' ? isCustomFooter ? hasFooterValue ? Number(footerRow[field]) : 0 : (0, _hooks.sumByField)(dataSource, field) : 0;
35
39
  const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
36
40
  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
37
41
  const numberValue = Number(value);
@@ -44,6 +48,7 @@ const TableFooterCell = ({
44
48
  decimalScale: dec,
45
49
  fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
46
50
  };
51
+ const content = isCustomFooter && (!hasFooterValue || col.isSummary === false) ? '' : col.summaryTemplate ? col.summaryTemplate(numberValue, field) : isCustomFooter && col.type !== 'number' ? footerRow[field] : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps);
47
52
  return /*#__PURE__*/_react.default.createElement("th", {
48
53
  className: (0, _classnames.default)(`${prefix}-grid-cell`, {
49
54
  // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
@@ -58,6 +63,6 @@ const TableFooterCell = ({
58
63
  minWidth: column?.getSize(),
59
64
  height: 40
60
65
  }
61
- }, 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)) : '');
66
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, content) : '');
62
67
  };
63
68
  var _default = exports.default = TableFooterCell;
@@ -299,7 +299,9 @@ const TableContainer = props => {
299
299
  pagination,
300
300
  groupSetting
301
301
  }
302
- }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
302
+ }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({
303
+ footerDataSource: props.footerDataSource
304
+ }, rest, {
303
305
  tableContainerRef: tableContainerRef,
304
306
  prefix: prefix,
305
307
  id: id,
@@ -10,6 +10,7 @@ type Props<T> = {
10
10
  height: number;
11
11
  minHeight?: number;
12
12
  dataSource: T[];
13
+ footerDataSource?: any[];
13
14
  summary?: boolean;
14
15
  loading?: boolean;
15
16
  commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
@@ -258,14 +258,14 @@ const TableWrapper = props => {
258
258
  },
259
259
  fixedFooterContent: summary ? () => {
260
260
  const visibleColumns = table.getVisibleLeafColumns();
261
- return /*#__PURE__*/_react.default.createElement("tr", {
261
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (props.footerDataSource ?? [undefined]).map((footerRow, index) => /*#__PURE__*/_react.default.createElement("tr", {
262
+ key: index,
262
263
  className: "ui-rc-grid-footer-row"
263
- }, visibleColumns.map(header => {
264
- return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
265
- key: header.id,
266
- column: header
267
- });
268
- }));
264
+ }, visibleColumns.map(column => /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
265
+ key: column.id,
266
+ column: column,
267
+ footerRow: footerRow
268
+ })))));
269
269
  } : undefined
270
270
  }))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
271
271
  id: `${id}-tooltip-content`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.9.95",
3
+ "version": "1.9.96",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",
package/CHANGELOG.md DELETED
@@ -1,16 +0,0 @@
1
- # Changelog
2
-
3
- ## 1.9.95 / 06-11-2026
4
-
5
- ### Added
6
- - Added opt-in `selectionSettings.pruneSelectionOutsideView` (default `false`) to keep selected rows within the current filtered data view.
7
-
8
- ### Fixed
9
- - Preserved existing selection on sorting, grouping, expand/collapse and virtual scrolling when rows remain in the view.
10
- - Synchronized selection callbacks with current view rows, preserving original `children` data.
11
- - Fixed group selection with disabled child rows, including `getCheckboxProps` rules based on tree structure.
12
- - Kept existing selection during temporary loading and preserved legacy behavior when the option is disabled.
13
-
14
- ## 0.0.1 / 20-02-2025
15
-
16
- add package