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.
- package/es/grid-component/InternalTable.js +31 -36
- package/es/grid-component/TempTable.d.ts +4 -0
- package/es/grid-component/TempTable.js +21 -0
- package/es/grid-component/hooks/columns/index.js +3 -1
- package/es/grid-component/index.d.ts +2 -2
- package/es/grid-component/index.js +6 -4
- package/es/grid-component/styles.scss +0 -1
- package/es/grid-component/table/GridEdit.js +112 -96
- package/es/grid-component/type.d.ts +7 -1
- package/es/table-component/InternalTable.js +100 -127
- package/es/table-component/TableContainer.d.ts +6 -1
- package/es/table-component/TableContainer.js +82 -74
- package/es/table-component/TableContainerEdit.d.ts +4 -0
- package/es/table-component/TableContainerEdit.js +370 -85
- package/es/table-component/body/TableBody.d.ts +2 -8
- package/es/table-component/body/TableBody.js +1 -0
- package/es/table-component/body/TableBodyCell.d.ts +1 -1
- package/es/table-component/body/TableBodyCell.js +25 -12
- package/es/table-component/body/TableBodyCellEdit.d.ts +1 -1
- package/es/table-component/body/TableBodyCellEdit.js +44 -19
- package/es/table-component/body/TableBodyRow.d.ts +3 -3
- package/es/table-component/body/TableBodyRow.js +4 -6
- package/es/table-component/footer/TableFooter.d.ts +2 -8
- package/es/table-component/footer/TableFooter.js +14 -13
- package/es/table-component/footer/TableFooterCell.d.ts +3 -6
- package/es/table-component/footer/TableFooterCell.js +12 -10
- package/es/table-component/footer/TableFooterRow.d.ts +2 -8
- package/es/table-component/footer/TableFooterRow.js +23 -48
- package/es/table-component/header/TableHead.d.ts +4 -3
- package/es/table-component/header/TableHead.js +3 -61
- package/es/table-component/header/TableHeadCell.d.ts +0 -3
- package/es/table-component/header/TableHeadCell.js +11 -9
- package/es/table-component/header/TableHeadRow.d.ts +6 -6
- package/es/table-component/header/TableHeadRow.js +10 -32
- package/es/table-component/hook/utils.js +1 -1
- package/es/table-component/style.scss +26 -2
- package/es/table-component/table/Grid.d.ts +1 -0
- package/es/table-component/table/Grid.js +12 -6
- package/es/table-component/table/TableWrapper.d.ts +33 -0
- package/es/table-component/table/TableWrapper.js +245 -0
- package/es/table-component/type.d.ts +5 -4
- package/es/table-component/useContext.d.ts +4 -0
- package/es/table-component/useContext.js +4 -0
- package/lib/grid-component/InternalTable.js +30 -35
- package/lib/grid-component/TempTable.d.ts +4 -0
- package/lib/grid-component/TempTable.js +30 -0
- package/lib/grid-component/hooks/columns/index.js +3 -1
- package/lib/grid-component/index.d.ts +2 -2
- package/lib/grid-component/index.js +5 -3
- package/lib/grid-component/styles.scss +0 -1
- package/lib/grid-component/table/GridEdit.js +112 -96
- package/lib/grid-component/type.d.ts +7 -1
- package/lib/table-component/InternalTable.js +101 -127
- package/lib/table-component/TableContainer.d.ts +6 -1
- package/lib/table-component/TableContainer.js +84 -74
- package/lib/table-component/TableContainerEdit.d.ts +4 -0
- package/lib/table-component/TableContainerEdit.js +366 -83
- package/lib/table-component/body/TableBody.d.ts +2 -8
- package/lib/table-component/body/TableBody.js +2 -0
- package/lib/table-component/body/TableBodyCell.d.ts +1 -1
- package/lib/table-component/body/TableBodyCell.js +25 -12
- package/lib/table-component/body/TableBodyCellEdit.d.ts +1 -1
- package/lib/table-component/body/TableBodyCellEdit.js +43 -19
- package/lib/table-component/body/TableBodyRow.d.ts +3 -3
- package/lib/table-component/body/TableBodyRow.js +4 -6
- package/lib/table-component/footer/TableFooter.d.ts +2 -8
- package/lib/table-component/footer/TableFooter.js +15 -13
- package/lib/table-component/footer/TableFooterCell.d.ts +3 -6
- package/lib/table-component/footer/TableFooterCell.js +13 -10
- package/lib/table-component/footer/TableFooterRow.d.ts +2 -8
- package/lib/table-component/footer/TableFooterRow.js +23 -48
- package/lib/table-component/header/TableHead.d.ts +4 -3
- package/lib/table-component/header/TableHead.js +3 -61
- package/lib/table-component/header/TableHeadCell.d.ts +0 -3
- package/lib/table-component/header/TableHeadCell.js +11 -8
- package/lib/table-component/header/TableHeadRow.d.ts +6 -6
- package/lib/table-component/header/TableHeadRow.js +10 -32
- package/lib/table-component/hook/utils.js +1 -1
- package/lib/table-component/style.scss +26 -2
- package/lib/table-component/table/Grid.d.ts +1 -0
- package/lib/table-component/table/Grid.js +12 -6
- package/lib/table-component/table/TableWrapper.d.ts +33 -0
- package/lib/table-component/table/TableWrapper.js +254 -0
- package/lib/table-component/type.d.ts +5 -4
- package/lib/table-component/useContext.d.ts +4 -0
- package/lib/table-component/useContext.js +4 -0
- 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",
|
|
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(
|
|
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
|
-
|
|
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`]:
|
|
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) &&
|
|
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
|
-
|
|
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",
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
128
|
-
const
|
|
129
|
-
const
|
|
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
|
-
|
|
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
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
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
|
|
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 {
|
|
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>({
|
|
6
|
+
declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => React.JSX.Element;
|
|
13
7
|
export default TableFooter;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
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,
|
|
24
|
-
table: table
|
|
25
|
-
|
|
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
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
29
|
+
// virtualPaddingLeft={virtualPaddingLeft}
|
|
30
|
+
// virtualPaddingRight={virtualPaddingRight}
|
|
31
|
+
// {...rest}
|
|
32
|
+
}));
|
|
32
33
|
};
|
|
33
34
|
export default TableFooter;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import type {
|
|
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
|
-
|
|
6
|
-
header: Header<T, unknown>;
|
|
7
|
-
column: VirtualItem;
|
|
4
|
+
column: Column<T, any>;
|
|
8
5
|
}
|
|
9
|
-
declare const TableFooterCell: <RecordType extends object>({
|
|
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
|
-
|
|
12
|
+
column
|
|
12
13
|
}) => {
|
|
13
|
-
const isPinned =
|
|
14
|
-
const isLastLeftPinnedColumn = isPinned === 'left' &&
|
|
15
|
-
const isFirstRightPinnedColumn = isPinned === '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 =
|
|
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:
|
|
58
|
-
colSpan
|
|
58
|
+
key: column.id
|
|
59
|
+
// colSpan={header.colSpan}
|
|
60
|
+
,
|
|
59
61
|
style: {
|
|
60
62
|
display: 'flex',
|
|
61
|
-
...getCommonPinningStyles(
|
|
62
|
-
width:
|
|
63
|
+
...getCommonPinningStyles(column),
|
|
64
|
+
width: column?.getSize() ?? column.getSize(),
|
|
63
65
|
backgroundColor: "#fafafa"
|
|
64
66
|
}
|
|
65
|
-
},
|
|
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 {
|
|
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,
|
|
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
|
-
},
|
|
38
|
+
}, visibleColumns.map(header => {
|
|
30
39
|
return /*#__PURE__*/React.createElement(TableFooterCell, {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
column:
|
|
40
|
+
key: header.id
|
|
41
|
+
// header={header as any}
|
|
42
|
+
,
|
|
43
|
+
column: header
|
|
44
|
+
// columnVirtualizer={columnVirtualizer}
|
|
35
45
|
});
|
|
36
|
-
})
|
|
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 {
|
|
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>({
|
|
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
|
|
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
|
}
|