es-grid-template 1.7.27 → 1.7.29

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 (87) hide show
  1. package/es/grid-component/InternalTable.js +31 -36
  2. package/es/grid-component/TempTable.d.ts +4 -0
  3. package/es/grid-component/TempTable.js +21 -0
  4. package/es/grid-component/hooks/columns/index.js +3 -1
  5. package/es/grid-component/index.d.ts +2 -2
  6. package/es/grid-component/index.js +6 -4
  7. package/es/grid-component/styles.scss +0 -1
  8. package/es/grid-component/table/GridEdit.js +112 -96
  9. package/es/grid-component/type.d.ts +7 -1
  10. package/es/table-component/InternalTable.js +100 -127
  11. package/es/table-component/TableContainer.d.ts +6 -1
  12. package/es/table-component/TableContainer.js +82 -74
  13. package/es/table-component/TableContainerEdit.d.ts +4 -0
  14. package/es/table-component/TableContainerEdit.js +370 -85
  15. package/es/table-component/body/TableBody.d.ts +2 -8
  16. package/es/table-component/body/TableBody.js +1 -0
  17. package/es/table-component/body/TableBodyCell.d.ts +1 -1
  18. package/es/table-component/body/TableBodyCell.js +25 -12
  19. package/es/table-component/body/TableBodyCellEdit.d.ts +1 -1
  20. package/es/table-component/body/TableBodyCellEdit.js +44 -19
  21. package/es/table-component/body/TableBodyRow.d.ts +3 -3
  22. package/es/table-component/body/TableBodyRow.js +4 -6
  23. package/es/table-component/footer/TableFooter.d.ts +2 -8
  24. package/es/table-component/footer/TableFooter.js +14 -13
  25. package/es/table-component/footer/TableFooterCell.d.ts +3 -6
  26. package/es/table-component/footer/TableFooterCell.js +12 -10
  27. package/es/table-component/footer/TableFooterRow.d.ts +2 -8
  28. package/es/table-component/footer/TableFooterRow.js +23 -48
  29. package/es/table-component/header/TableHead.d.ts +4 -3
  30. package/es/table-component/header/TableHead.js +3 -61
  31. package/es/table-component/header/TableHeadCell.d.ts +0 -3
  32. package/es/table-component/header/TableHeadCell.js +11 -9
  33. package/es/table-component/header/TableHeadRow.d.ts +6 -6
  34. package/es/table-component/header/TableHeadRow.js +10 -32
  35. package/es/table-component/hook/utils.js +1 -1
  36. package/es/table-component/style.scss +26 -2
  37. package/es/table-component/table/Grid.d.ts +1 -0
  38. package/es/table-component/table/Grid.js +12 -6
  39. package/es/table-component/table/TableWrapper.d.ts +33 -0
  40. package/es/table-component/table/TableWrapper.js +245 -0
  41. package/es/table-component/type.d.ts +5 -4
  42. package/es/table-component/useContext.d.ts +4 -0
  43. package/es/table-component/useContext.js +4 -0
  44. package/lib/grid-component/InternalTable.js +30 -35
  45. package/lib/grid-component/TempTable.d.ts +4 -0
  46. package/lib/grid-component/TempTable.js +30 -0
  47. package/lib/grid-component/hooks/columns/index.js +3 -1
  48. package/lib/grid-component/index.d.ts +2 -2
  49. package/lib/grid-component/index.js +5 -3
  50. package/lib/grid-component/styles.scss +0 -1
  51. package/lib/grid-component/table/GridEdit.js +112 -96
  52. package/lib/grid-component/type.d.ts +7 -1
  53. package/lib/table-component/InternalTable.js +101 -127
  54. package/lib/table-component/TableContainer.d.ts +6 -1
  55. package/lib/table-component/TableContainer.js +84 -74
  56. package/lib/table-component/TableContainerEdit.d.ts +4 -0
  57. package/lib/table-component/TableContainerEdit.js +366 -83
  58. package/lib/table-component/body/TableBody.d.ts +2 -8
  59. package/lib/table-component/body/TableBody.js +2 -0
  60. package/lib/table-component/body/TableBodyCell.d.ts +1 -1
  61. package/lib/table-component/body/TableBodyCell.js +25 -12
  62. package/lib/table-component/body/TableBodyCellEdit.d.ts +1 -1
  63. package/lib/table-component/body/TableBodyCellEdit.js +43 -19
  64. package/lib/table-component/body/TableBodyRow.d.ts +3 -3
  65. package/lib/table-component/body/TableBodyRow.js +4 -6
  66. package/lib/table-component/footer/TableFooter.d.ts +2 -8
  67. package/lib/table-component/footer/TableFooter.js +15 -13
  68. package/lib/table-component/footer/TableFooterCell.d.ts +3 -6
  69. package/lib/table-component/footer/TableFooterCell.js +13 -10
  70. package/lib/table-component/footer/TableFooterRow.d.ts +2 -8
  71. package/lib/table-component/footer/TableFooterRow.js +23 -48
  72. package/lib/table-component/header/TableHead.d.ts +4 -3
  73. package/lib/table-component/header/TableHead.js +3 -61
  74. package/lib/table-component/header/TableHeadCell.d.ts +0 -3
  75. package/lib/table-component/header/TableHeadCell.js +11 -8
  76. package/lib/table-component/header/TableHeadRow.d.ts +6 -6
  77. package/lib/table-component/header/TableHeadRow.js +10 -32
  78. package/lib/table-component/hook/utils.js +1 -1
  79. package/lib/table-component/style.scss +26 -2
  80. package/lib/table-component/table/Grid.d.ts +1 -0
  81. package/lib/table-component/table/Grid.js +12 -6
  82. package/lib/table-component/table/TableWrapper.d.ts +33 -0
  83. package/lib/table-component/table/TableWrapper.js +254 -0
  84. package/lib/table-component/type.d.ts +5 -4
  85. package/lib/table-component/useContext.d.ts +4 -0
  86. package/lib/table-component/useContext.js +4 -0
  87. package/package.json +1 -1
@@ -13,7 +13,9 @@ const renderCellIndex = props => {
13
13
  parrents,
14
14
  cell
15
15
  } = props;
16
- return /*#__PURE__*/React.createElement("span", null, parrents.map(pr => {
16
+ return /*#__PURE__*/React.createElement("span", {
17
+ className: "ui-rc_cell-content"
18
+ }, parrents.map(pr => {
17
19
  return `${pr.index + 1}.`;
18
20
  }), cell.row.index + 1);
19
21
  };
@@ -21,7 +23,8 @@ const renderCommand = args => {
21
23
  const {
22
24
  cell,
23
25
  commandClick,
24
- id
26
+ id,
27
+ data
25
28
  } = args;
26
29
  const col = cell.column.columnDef.meta ?? {};
27
30
  const record = cell.row.original;
@@ -34,7 +37,9 @@ const renderCommand = args => {
34
37
  visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
35
38
  };
36
39
  }) : [];
37
- return /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
40
+ return /*#__PURE__*/React.createElement("span", {
41
+ className: "ui-rc_cell-content"
42
+ }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
38
43
  return /*#__PURE__*/React.createElement(Command, {
39
44
  id: id,
40
45
  key: item.id,
@@ -43,15 +48,14 @@ const renderCommand = args => {
43
48
  onClick: () => {
44
49
  commandClick?.({
45
50
  id: item.id,
46
- // rowId: getRowKey(record, index) as any,
47
51
  rowId: record.rowId,
48
52
  rowData: record,
49
- index: cell.row.index
50
- // rows: [...resource]
53
+ index: cell.row.index,
54
+ rows: [...data]
51
55
  });
52
56
  }
53
57
  });
54
- }));
58
+ })));
55
59
  };
56
60
  const renderSelection = args => {
57
61
  const {
@@ -96,7 +100,9 @@ const TableBodyCell = props => {
96
100
  prefix,
97
101
  setIsSelectionChange,
98
102
  selectionSettings,
99
- id
103
+ id,
104
+ originData,
105
+ wrapSettings
100
106
  } = useContext(TableContext);
101
107
  const columnMeta = cell.column.columnDef.meta ?? {};
102
108
  const parrents = cell.row.getParentRows();
@@ -109,12 +115,16 @@ const TableBodyCell = props => {
109
115
  return /*#__PURE__*/React.createElement("td", {
110
116
  key: cell.id,
111
117
  className: classNames(`${prefix}-grid-cell`, {
112
- [`${prefix}-grid-cell-ellipsis`]: true,
118
+ [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
119
+ [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
113
120
  [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
114
- [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
121
+ [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
122
+ [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
123
+ [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
115
124
  }),
116
125
  style: {
117
126
  display: 'flex',
127
+ // flex: 1,
118
128
  width: cell.column.getSize(),
119
129
  // border: '1px solid #e5e7eb',
120
130
  ...getCommonPinningStyles(cell.column)
@@ -140,12 +150,15 @@ const TableBodyCell = props => {
140
150
  }), cell.column.id === "command" && renderCommand({
141
151
  cell,
142
152
  commandClick,
143
- id
153
+ id,
154
+ data: originData
144
155
  }), cell.column.id === "selection_column" && renderSelection({
145
156
  cell,
146
157
  table,
147
158
  selectionSettings,
148
159
  setIsSelectionChange
149
- }), !nonActionColumn.includes(cell.column.id) && flexRender(cell.column.columnDef.cell, cell.getContext()));
160
+ }), !nonActionColumn.includes(cell.column.id) && (isFirstRightPinnedColumn ? /*#__PURE__*/React.createElement("span", {
161
+ className: "ui-rc_cell-content"
162
+ }, flexRender(cell.column.columnDef.cell, cell.getContext())) : flexRender(cell.column.columnDef.cell, cell.getContext())));
150
163
  };
151
164
  export default TableBodyCell;
@@ -8,7 +8,7 @@ interface TableBodyCellProps<T> {
8
8
  columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
9
9
  tableId: string;
10
10
  cell: Cell<T, unknown>;
11
- commandClick?: (args: CommandClick) => void;
11
+ commandClick?: (args: CommandClick<T>) => void;
12
12
  virtualRow: VirtualItem;
13
13
  [key: string]: any;
14
14
  }
@@ -1,7 +1,9 @@
1
1
  import { flexRender } from "@tanstack/react-table";
2
2
  import Space from "rc-master-ui/es/space";
3
3
  import Command from "../components/command/Command";
4
- import ReactDOMServer from 'react-dom/server';
4
+
5
+ // import ReactDOMServer from 'react-dom/server'
6
+
5
7
  import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
6
8
  // getCellsByPosition,
7
9
  getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -20,7 +22,9 @@ const renderCellIndex = props => {
20
22
  parrents,
21
23
  cell
22
24
  } = props;
23
- return /*#__PURE__*/React.createElement("span", null, parrents.map(pr => {
25
+ return /*#__PURE__*/React.createElement("span", {
26
+ className: "ui-rc_cell-content"
27
+ }, parrents.map(pr => {
24
28
  return `${pr.index + 1}.`;
25
29
  }), cell.row.index + 1);
26
30
  };
@@ -28,7 +32,8 @@ const renderCommand = args => {
28
32
  const {
29
33
  cell,
30
34
  commandClick,
31
- id
35
+ id,
36
+ data
32
37
  } = args;
33
38
  const col = cell.column.columnDef.meta ?? {};
34
39
  const record = cell.row.original;
@@ -41,7 +46,9 @@ const renderCommand = args => {
41
46
  visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
42
47
  };
43
48
  }) : [];
44
- return /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
49
+ return /*#__PURE__*/React.createElement("span", {
50
+ className: "ui-rc_cell-content"
51
+ }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
45
52
  return /*#__PURE__*/React.createElement(Command, {
46
53
  id: id,
47
54
  key: item.id,
@@ -53,18 +60,19 @@ const renderCommand = args => {
53
60
  // rowId: getRowKey(record, index) as any,
54
61
  rowId: record.rowId,
55
62
  rowData: record,
56
- index: cell.row.index
57
- // rows: [...resource]
63
+ index: cell.row.index,
64
+ rows: [...data]
58
65
  });
59
66
  }
60
67
  });
61
- }));
68
+ })));
62
69
  };
63
70
  const renderSelection = args => {
64
71
  const {
65
72
  row
66
73
  } = args.cell;
67
74
  return /*#__PURE__*/React.createElement("div", {
75
+ className: "ui-rc_cell-content",
68
76
  style: {
69
77
 
70
78
  // paddingLeft: `${row.depth * 2}rem`,
@@ -124,9 +132,11 @@ const TableBodyCellEdit = props => {
124
132
  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
125
133
  const record = cell.row.original;
126
134
  const columnMeta = cell.column.columnDef.meta ?? {};
127
- const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
128
- const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
129
- const hasValue = html.trim().length > 0;
135
+
136
+ // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
137
+ // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
138
+ // const hasValue = html.trim().length > 0;
139
+
130
140
  const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
131
141
  const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
132
142
  const canEdit = isEditable(cell.column.columnDef.meta, record);
@@ -248,7 +258,8 @@ const TableBodyCellEdit = props => {
248
258
  }, renderCommand({
249
259
  cell,
250
260
  commandClick,
251
- id
261
+ id,
262
+ data: originData
252
263
  }));
253
264
  }
254
265
  if (cell.column.id === "selection_column") {
@@ -742,8 +753,11 @@ const TableBodyCellEdit = props => {
742
753
  "data-row-index": rowNumber,
743
754
  "data-col-key": cell.column.id,
744
755
  "data-row-key": cell.row.id,
745
- "data-tooltip-id": `${id}-tooltip-content`,
746
- "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
756
+ "data-tooltip-id": `${id}-tooltip-content`
757
+ // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
758
+ // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
759
+ ,
760
+ "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? ''],
747
761
  className: classNames(`${prefix}-grid-cell cell-editable `, {
748
762
  [`${prefix}-grid-cell-ellipsis`]: true,
749
763
  'cell-editing': isEditing,
@@ -778,13 +792,24 @@ const TableBodyCellEdit = props => {
778
792
  });
779
793
  } else {
780
794
  handleMouseDown(cell.row.id, cell.column.id);
795
+ if (editingKey) {
796
+ setTimeout(() => {
797
+ setEditingKey?.('');
798
+ reset?.();
799
+ });
800
+ }
801
+
802
+ // reset?.()
781
803
  }
782
- if (record[rowKey] !== editingKey) {
783
- setTimeout(() => {
784
- setEditingKey?.('');
785
- reset?.();
786
- });
787
- }
804
+
805
+ // if (record[rowKey] !== editingKey) {
806
+
807
+ // setTimeout(() => {
808
+ // // setEditingKey?.('')
809
+ // reset?.()
810
+ // })
811
+
812
+ // }
788
813
  },
789
814
  onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
790
815
  onMouseUp: e => handleMouseUp(e),
@@ -1,5 +1,5 @@
1
1
  import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
2
- import type { Column, Row, Table } from "@tanstack/react-table";
2
+ import { type Column, type Row, type Table } from "@tanstack/react-table";
3
3
  import type { CommandClick } from "../type";
4
4
  import React from "react";
5
5
  interface TableBodyRowProps<T> {
@@ -13,9 +13,9 @@ interface TableBodyRowProps<T> {
13
13
  virtualRow: VirtualItem;
14
14
  fixedLeftColumns: Column<T, unknown>[];
15
15
  fixedRightColumns: Column<T, unknown>[];
16
- commandClick?: (args: CommandClick) => void;
16
+ commandClick?: (args: CommandClick<T>) => void;
17
17
  editAble?: boolean;
18
18
  [key: string]: any;
19
19
  }
20
- declare const TableBodyRow: <RecordType extends object>({ tableId, table, columnVirtualizer, row, rowVirtualizer, virtualPaddingLeft, virtualPaddingRight, virtualRow, fixedLeftColumns, fixedRightColumns, commandClick, editAble, isEditing, contextMenuItems, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
20
+ declare const TableBodyRow: <RecordType extends object>({ tableId, table, columnVirtualizer, row, rowVirtualizer, virtualPaddingLeft, virtualPaddingRight, virtualRow, fixedLeftColumns, fixedRightColumns, commandClick, editAble, isEditing, contextMenuItems, onContextMenu, ...rest }: TableBodyRowProps<RecordType>) => React.JSX.Element;
21
21
  export default TableBodyRow;
@@ -19,12 +19,12 @@ const TableBodyRow = ({
19
19
  editAble,
20
20
  isEditing,
21
21
  contextMenuItems,
22
+ onContextMenu,
22
23
  ...rest
23
24
  }) => {
24
25
  const {
25
26
  prefix,
26
- recordDoubleClick,
27
- onContextMenu
27
+ recordDoubleClick
28
28
  } = React.useContext(TableContext);
29
29
  const visibleCells = row.getVisibleCells();
30
30
  const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -50,8 +50,8 @@ const TableBodyRow = ({
50
50
  //this should always be a `style` as it changes on scroll
51
51
  // width: '100%',
52
52
  // height: isEditing ? '36px' : undefined,
53
- height: isEditing ? virtualRow.size : undefined,
54
- minHeight: isEditing ? undefined : virtualRow.size
53
+ height: isEditing ? virtualRow.size : undefined
54
+ // minHeight: isEditing ? undefined : virtualRow.size
55
55
  },
56
56
  onDoubleClick: e => {
57
57
  recordDoubleClick?.({
@@ -65,8 +65,6 @@ const TableBodyRow = ({
65
65
  onContextMenu?.(row.original)(e);
66
66
  }
67
67
  }
68
-
69
- // onContextMenu={onContextMenu(row.original)}
70
68
  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
71
69
  const cell = row.getVisibleCells().find(c => c.column.id === column.id);
72
70
  if (editAble) {
@@ -1,13 +1,7 @@
1
- import type { Column, Table } from "@tanstack/react-table";
2
- import type { Virtualizer } from "@tanstack/react-virtual";
1
+ import type { Table } from "@tanstack/react-table";
3
2
  import React from "react";
4
3
  interface TableFooterProps<T> {
5
- columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
6
4
  table: Table<T>;
7
- virtualPaddingLeft: number | undefined;
8
- virtualPaddingRight: number | undefined;
9
- fixedLeftColumns: Column<T, unknown>[];
10
- fixedRightColumns: Column<T, unknown>[];
11
5
  }
12
- declare const TableFooter: <RecordType extends object>({ columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, ...rest }: TableFooterProps<RecordType>) => React.JSX.Element;
6
+ declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => React.JSX.Element;
13
7
  export default TableFooter;
@@ -1,13 +1,13 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
1
+ // import type { Virtualizer } from "@tanstack/react-virtual";
2
2
  import TableFooterRow from "./TableFooterRow";
3
3
  import { TableContext } from "../useContext";
4
4
  import React, { useContext } from "react";
5
5
  const TableFooter = ({
6
- columnVirtualizer,
7
- table,
8
- virtualPaddingLeft,
9
- virtualPaddingRight,
10
- ...rest
6
+ // columnVirtualizer,
7
+ table
8
+ // virtualPaddingLeft,
9
+ // virtualPaddingRight,
10
+ // ...rest
11
11
  }) => {
12
12
  const {
13
13
  prefix
@@ -20,14 +20,15 @@ const TableFooter = ({
20
20
  bottom: 0,
21
21
  zIndex: 1
22
22
  }
23
- }, /*#__PURE__*/React.createElement(TableFooterRow, _extends({
24
- table: table,
25
- columnVirtualizer: columnVirtualizer,
23
+ }, /*#__PURE__*/React.createElement(TableFooterRow, {
24
+ table: table
25
+ // columnVirtualizer={columnVirtualizer}
26
+ ,
26
27
  headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
27
28
  // key={headerGroup.id}
28
- ,
29
- virtualPaddingLeft: virtualPaddingLeft,
30
- virtualPaddingRight: virtualPaddingRight
31
- }, rest)));
29
+ // virtualPaddingLeft={virtualPaddingLeft}
30
+ // virtualPaddingRight={virtualPaddingRight}
31
+ // {...rest}
32
+ }));
32
33
  };
33
34
  export default TableFooter;
@@ -1,10 +1,7 @@
1
- import type { Header } from "@tanstack/react-table";
2
- import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
1
+ import type { Column } from "@tanstack/react-table";
3
2
  import React from "react";
4
3
  interface TableFooterCellProps<T> {
5
- columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
6
- header: Header<T, unknown>;
7
- column: VirtualItem;
4
+ column: Column<T, any>;
8
5
  }
9
- declare const TableFooterCell: <RecordType extends object>({ header }: TableFooterCellProps<RecordType>) => React.JSX.Element;
6
+ declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => React.JSX.Element;
10
7
  export default TableFooterCell;
@@ -1,3 +1,4 @@
1
+ // import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
1
2
  import React, { useContext } from "react";
2
3
  // import type { Person } from "../makeData";
3
4
  import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
@@ -8,17 +9,17 @@ import { numericFormatter } from "react-numeric-component";
8
9
  // import type { Person } from "../../tanstack-table/makeData";
9
10
 
10
11
  const TableFooterCell = ({
11
- header
12
+ column
12
13
  }) => {
13
- const isPinned = header.column.getIsPinned();
14
- const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
15
- const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
14
+ const isPinned = column.getIsPinned();
15
+ const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
16
+ const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
16
17
  const {
17
18
  prefix,
18
19
  format,
19
20
  dataSource
20
21
  } = useContext(TableContext);
21
- const col = header.column.columnDef.meta ?? {};
22
+ const col = column.columnDef.meta ?? {};
22
23
  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
23
24
  const cellFormat = getFormat(colFormat, format);
24
25
  const thousandSeparator = cellFormat?.thousandSeparator;
@@ -54,14 +55,15 @@ const TableFooterCell = ({
54
55
  [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
55
56
  [`${prefix}-grid-cell-text-right`]: true
56
57
  }),
57
- key: header.id,
58
- colSpan: header.colSpan,
58
+ key: column.id
59
+ // colSpan={header.colSpan}
60
+ ,
59
61
  style: {
60
62
  display: 'flex',
61
- ...getCommonPinningStyles(header.column),
62
- width: header?.getSize() ?? header.column.getSize(),
63
+ ...getCommonPinningStyles(column),
64
+ width: column?.getSize() ?? column.getSize(),
63
65
  backgroundColor: "#fafafa"
64
66
  }
65
- }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
67
+ }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
66
68
  };
67
69
  export default TableFooterCell;
@@ -1,14 +1,8 @@
1
- import type { Column, HeaderGroup, Table } from "@tanstack/react-table";
2
- import type { Virtualizer } from "@tanstack/react-virtual";
1
+ import type { HeaderGroup, Table } from "@tanstack/react-table";
3
2
  import React from "react";
4
3
  interface TableFooterRowProps<T> {
5
4
  table: Table<T>;
6
- columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
7
5
  headerGroup: HeaderGroup<T>;
8
- virtualPaddingLeft: number | undefined;
9
- virtualPaddingRight: number | undefined;
10
- fixedLeftColumns: Column<T, unknown>[];
11
- fixedRightColumns: Column<T, unknown>[];
12
6
  }
13
- declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, columnVirtualizer }: TableFooterRowProps<RecordType>) => React.JSX.Element;
7
+ declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, }: TableFooterRowProps<RecordType>) => React.JSX.Element;
14
8
  export default TableFooterRow;
@@ -1,3 +1,4 @@
1
+ // import type { Virtualizer } from "@tanstack/react-virtual";
1
2
  // import type { Person } from "../makeData";
2
3
  import TableFooterCell from "./TableFooterCell";
3
4
  import React from "react";
@@ -7,15 +8,23 @@ import React from "react";
7
8
  const TableFooterRow = ({
8
9
  table,
9
10
  // columnVirtualizer,
10
- headerGroup,
11
- virtualPaddingLeft,
12
- virtualPaddingRight,
13
- fixedLeftColumns,
14
- fixedRightColumns,
11
+ headerGroup
12
+ // virtualPaddingLeft,
13
+ // virtualPaddingRight,
14
+ // fixedLeftColumns,
15
+ // fixedRightColumns,
15
16
  // virtualColumns,
16
- columnVirtualizer
17
+ // columnVirtualizer
17
18
  }) => {
18
- const virtualColumns = columnVirtualizer.getVirtualItems();
19
+ // const virtualColumns = columnVirtualizer.getVirtualItems();
20
+
21
+ // const a = table.getVisibleFlatColumns()
22
+ const visibleColumns = table.getVisibleLeafColumns();
23
+
24
+ // console.log('a', a)
25
+
26
+ // const
27
+
19
28
  return /*#__PURE__*/React.createElement("tr", {
20
29
  // data-index={headerGroup.id}
21
30
  key: headerGroup.id,
@@ -26,48 +35,14 @@ const TableFooterRow = ({
26
35
  borderTop: "1px solid #e0e0e0",
27
36
  height: 37
28
37
  }
29
- }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
38
+ }, visibleColumns.map(header => {
30
39
  return /*#__PURE__*/React.createElement(TableFooterCell, {
31
- columnVirtualizer: columnVirtualizer,
32
- key: column.id,
33
- header: headerGroup.headers.find(h => h.column.id === column.id),
34
- column: column
40
+ key: header.id
41
+ // header={header as any}
42
+ ,
43
+ column: header
44
+ // columnVirtualizer={columnVirtualizer}
35
45
  });
36
- }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("td", {
37
- className: "",
38
- style: {
39
- display: "flex",
40
- width: virtualPaddingLeft
41
- }
42
- }) : null, virtualColumns.map(virtualColumn => {
43
- const header = headerGroup.headers[virtualColumn.index];
44
- const isFixed = table.getState().columnPinning.left?.includes(header.column.id) || table.getState().columnPinning.right?.includes(header.column.id);
45
- // const isFixed = table.getState().columnPinning.left?.includes(header.column.id)
46
-
47
- if (header && !isFixed) {
48
- return /*#__PURE__*/React.createElement(TableFooterCell, {
49
- key: header.id,
50
- header: header,
51
- column: virtualColumn,
52
- columnVirtualizer: columnVirtualizer
53
- });
54
- }
55
- return null;
56
- }),
57
- //fake empty column to the right for virtualization scroll padding
58
- fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/React.createElement(TableFooterCell, {
59
- key: column.id,
60
- header: headerGroup.headers.find(h => h.column.id === column.id),
61
- column: column
62
- })) : null, virtualPaddingRight ?
63
- /*#__PURE__*/
64
- //fake empty column to the right for virtualization scroll padding
65
- React.createElement("td", {
66
- className: "",
67
- style: {
68
- display: "flex",
69
- width: virtualPaddingRight
70
- }
71
- }) : null);
46
+ }));
72
47
  };
73
48
  export default TableFooterRow;
@@ -1,14 +1,15 @@
1
- import { type Column, type Table } from '@tanstack/react-table';
1
+ import type { Column } from '@tanstack/react-table';
2
+ import { type Table } from '@tanstack/react-table';
2
3
  import { type Virtualizer } from '@tanstack/react-virtual';
3
4
  import React from 'react';
4
5
  interface TableHeadProps<T> {
5
6
  tableContainerRef: React.RefObject<HTMLDivElement>;
6
- columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
7
7
  table: Table<T>;
8
+ columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
8
9
  virtualPaddingLeft: number | undefined;
9
10
  virtualPaddingRight: number | undefined;
10
11
  fixedLeftColumns: Column<T, unknown>[];
11
12
  fixedRightColumns: Column<T, unknown>[];
12
13
  }
13
- declare const TableHead: <RecordType extends object>({ tableContainerRef, columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns }: TableHeadProps<RecordType>) => React.JSX.Element;
14
+ declare const TableHead: <RecordType extends object>({ columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns }: TableHeadProps<RecordType>) => React.JSX.Element;
14
15
  export default TableHead;
@@ -1,11 +1,9 @@
1
- import { flexRender } from '@tanstack/react-table';
2
- import { useVirtualizer } from '@tanstack/react-virtual';
3
1
  import React, { useContext } from 'react';
4
2
  import { TableContext } from "../useContext";
5
3
  import TableHeadRow from "./TableHeadRow";
6
- import { getCommonPinningStyles } from "../hook/utils";
4
+ // import { getCommonPinningStyles } from '../hook/utils'
5
+
7
6
  const TableHead = ({
8
- tableContainerRef,
9
7
  columnVirtualizer,
10
8
  table,
11
9
  virtualPaddingLeft,
@@ -16,26 +14,6 @@ const TableHead = ({
16
14
  const {
17
15
  prefix
18
16
  } = useContext(TableContext);
19
- const rowVirtualizer = useVirtualizer({
20
- count: table.getHeaderGroups().length,
21
- estimateSize: () => 34,
22
- //estimate row height for accurate scrollbar dragging
23
- getScrollElement: () => tableContainerRef.current,
24
- //measure dynamic row height, except in firefox because it measures table border height incorrectly
25
- measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
26
- overscan: 5
27
- });
28
-
29
- // const virtualRows = rowVirtualizer.getVirtualItems()
30
-
31
- // const columnSizingState = table.getState().columnSizing
32
-
33
- // React.useEffect(() => {
34
- // requestAnimationFrame(() => {
35
- // rowVirtualizer.measure()
36
- // })
37
- // }, [columnSizingState, rowVirtualizer])
38
-
39
17
  return /*#__PURE__*/React.createElement("thead", {
40
18
  className: `${prefix}-grid-thead`,
41
19
  style: {
@@ -47,50 +25,14 @@ const TableHead = ({
47
25
  }, table.getHeaderGroups().map(headerGroup => {
48
26
  return /*#__PURE__*/React.createElement(TableHeadRow, {
49
27
  table: table,
50
- columnVirtualizer: columnVirtualizer,
51
- rowHeaderVirtualizer: rowVirtualizer,
52
28
  headerGroup: headerGroup,
53
29
  key: headerGroup.id,
30
+ columnVirtualizer: columnVirtualizer,
54
31
  virtualPaddingLeft: virtualPaddingLeft,
55
32
  virtualPaddingRight: virtualPaddingRight,
56
33
  fixedLeftColumns: fixedLeftColumns,
57
34
  fixedRightColumns: fixedRightColumns
58
- // rowHeaderVirtual={virtualRow}
59
35
  });
60
- return /*#__PURE__*/React.createElement("tr", {
61
- key: headerGroup.id
62
- }, headerGroup.headers.map(header => {
63
- const columnRelativeDepth = header.depth - header.column.depth;
64
- if (columnRelativeDepth > 1) {
65
- return null;
66
- }
67
- let rowSpan = 1;
68
- if (header.isPlaceholder) {
69
- const leafs = header.getLeafHeaders();
70
- rowSpan = leafs[leafs.length - 1].depth - header.depth;
71
- }
72
- return /*#__PURE__*/React.createElement("th", {
73
- key: header.id,
74
- colSpan: header.colSpan,
75
- rowSpan: rowSpan,
76
- style: {
77
- padding: '12px',
78
- textAlign: 'left',
79
- fontSize: '0.75rem',
80
- fontWeight: 'medium',
81
- color: '#6b7280',
82
- textTransform: 'uppercase',
83
- letterSpacing: '0.05em',
84
- // backgroundColor: '#f9fafb',
85
- // border: '1px solid #e5e7eb',
86
- width: header.getSize(),
87
- minWidth: header.getSize(),
88
- maxWidth: header.getSize(),
89
- // overflow: 'hidden',
90
- ...getCommonPinningStyles(header.column)
91
- }
92
- }, flexRender(header.column.columnDef.header, header.getContext()));
93
- }));
94
36
  }));
95
37
  };
96
38
  export default TableHead;
@@ -1,14 +1,11 @@
1
1
  import type { Table } from '@tanstack/react-table';
2
2
  import { type Header } from '@tanstack/react-table';
3
3
  import React from 'react';
4
- import type { Virtualizer } from '@tanstack/react-virtual';
5
4
  interface TableHeadCellProps<T> {
6
5
  t?: any;
7
6
  table: Table<T>;
8
7
  header: Header<T, unknown>;
9
8
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
10
- columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
11
- rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
12
9
  colSpan: any;
13
10
  rowSpan: any;
14
11
  }