es-grid-template 1.7.43 → 1.7.45
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.
|
@@ -666,9 +666,11 @@ const TableContainerEdit = props => {
|
|
|
666
666
|
}, [dataSource, editingKey, id, onBlur]);
|
|
667
667
|
const columnSizingState = table.getState().columnSizing;
|
|
668
668
|
React.useEffect(() => {
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
669
|
+
|
|
670
|
+
// requestAnimationFrame(() => {
|
|
671
|
+
|
|
672
|
+
// columnVirtualizer.measure()
|
|
673
|
+
// })
|
|
672
674
|
}, [columnSizingState, columnVirtualizer]);
|
|
673
675
|
React.useEffect(() => {
|
|
674
676
|
if (!tableContainerRef.current) {
|
|
@@ -682,6 +684,9 @@ const TableContainerEdit = props => {
|
|
|
682
684
|
if (columnSizingInfo.isResizingColumn === false) {
|
|
683
685
|
const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
|
|
684
686
|
setColumns(aa);
|
|
687
|
+
requestAnimationFrame(() => {
|
|
688
|
+
columnVirtualizer.measure();
|
|
689
|
+
});
|
|
685
690
|
}
|
|
686
691
|
}, [columnSizingInfo]);
|
|
687
692
|
React.useEffect(() => {
|
|
@@ -694,11 +699,7 @@ const TableContainerEdit = props => {
|
|
|
694
699
|
// const containerWidth = tableContainerRef.current.offsetWidth
|
|
695
700
|
const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
|
|
696
701
|
const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
|
|
697
|
-
|
|
698
|
-
// console.log('containerWidth', containerWidth)
|
|
699
|
-
// console.log('totalWidth', totalWidth)
|
|
700
|
-
|
|
701
|
-
if (totalWidth && totalWidth < containerWidth) {
|
|
702
|
+
if (totalWidth && totalWidth > 0 && totalWidth < containerWidth) {
|
|
702
703
|
const factor = containerWidth / totalWidth;
|
|
703
704
|
const visibleCols = table.getVisibleLeafColumns();
|
|
704
705
|
const baseSizes = visibleCols.map(col => col.getSize() || col.columnDef.size || 150);
|
|
@@ -715,18 +716,29 @@ const TableContainerEdit = props => {
|
|
|
715
716
|
acc[col.id] = roundedSizes[idx];
|
|
716
717
|
return acc;
|
|
717
718
|
}, {});
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
// setColumns(aa)
|
|
722
|
-
|
|
723
|
-
// console.log('aaa', aaa)
|
|
724
|
-
|
|
719
|
+
const aa = updateColumnWidthsRecursive(propsColumns, aaa);
|
|
720
|
+
setColumns(aa);
|
|
725
721
|
table.setColumnSizing(aaa);
|
|
722
|
+
requestAnimationFrame(() => {
|
|
723
|
+
columnVirtualizer.measure();
|
|
724
|
+
});
|
|
726
725
|
|
|
727
726
|
// setColumnSizing?.(aaa)
|
|
727
|
+
} else {
|
|
728
|
+
if (columnHidden) {
|
|
729
|
+
const abb = table.getVisibleLeafColumns()?.[0];
|
|
730
|
+
if (abb && Object.keys(columnSizingInfo).length === 0) {
|
|
731
|
+
// setColumnSizing({ "#": abb.getSize() })
|
|
732
|
+
table.setColumnSizing({
|
|
733
|
+
"#": abb.getSize()
|
|
734
|
+
});
|
|
735
|
+
requestAnimationFrame(() => {
|
|
736
|
+
columnVirtualizer.measure();
|
|
737
|
+
});
|
|
738
|
+
}
|
|
739
|
+
}
|
|
728
740
|
}
|
|
729
|
-
}, [table.getTotalSize(),
|
|
741
|
+
}, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer]);
|
|
730
742
|
// }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
|
|
731
743
|
|
|
732
744
|
// React.useEffect(() => {
|
|
@@ -833,7 +845,7 @@ const TableContainerEdit = props => {
|
|
|
833
845
|
const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
|
|
834
846
|
settableHeight(totalHeight - topHeight - bottomHeight);
|
|
835
847
|
}
|
|
836
|
-
}, [id, height, editAble, minHeight]);
|
|
848
|
+
}, [id, height, editAble, minHeight, toolbarItems]);
|
|
837
849
|
const {
|
|
838
850
|
control,
|
|
839
851
|
handleSubmit,
|
|
@@ -141,16 +141,18 @@ const Grid = props => {
|
|
|
141
141
|
|
|
142
142
|
// debugTable: true
|
|
143
143
|
});
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}
|
|
144
|
+
|
|
145
|
+
// React.useEffect(() => {
|
|
146
|
+
// if (columnHidden) {
|
|
147
|
+
// const abb = table.getVisibleLeafColumns()?.[0]
|
|
148
|
+
|
|
149
|
+
// if (abb && Object.keys(columnSizingInfo).length === 0
|
|
150
|
+
// ) {
|
|
151
|
+
// setColumnSizing({ "#": abb.getSize() })
|
|
152
|
+
// }
|
|
153
|
+
// }
|
|
154
|
+
|
|
155
|
+
// }, [columnHidden, columnSizingInfo])
|
|
154
156
|
|
|
155
157
|
// React.useEffect(() => {
|
|
156
158
|
// if (columnSizingInfo.isResizingColumn === false) {
|
|
@@ -673,9 +673,11 @@ const TableContainerEdit = props => {
|
|
|
673
673
|
}, [dataSource, editingKey, id, onBlur]);
|
|
674
674
|
const columnSizingState = table.getState().columnSizing;
|
|
675
675
|
_react.default.useEffect(() => {
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
676
|
+
|
|
677
|
+
// requestAnimationFrame(() => {
|
|
678
|
+
|
|
679
|
+
// columnVirtualizer.measure()
|
|
680
|
+
// })
|
|
679
681
|
}, [columnSizingState, columnVirtualizer]);
|
|
680
682
|
_react.default.useEffect(() => {
|
|
681
683
|
if (!tableContainerRef.current) {
|
|
@@ -689,6 +691,9 @@ const TableContainerEdit = props => {
|
|
|
689
691
|
if (columnSizingInfo.isResizingColumn === false) {
|
|
690
692
|
const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
|
|
691
693
|
setColumns(aa);
|
|
694
|
+
requestAnimationFrame(() => {
|
|
695
|
+
columnVirtualizer.measure();
|
|
696
|
+
});
|
|
692
697
|
}
|
|
693
698
|
}, [columnSizingInfo]);
|
|
694
699
|
_react.default.useEffect(() => {
|
|
@@ -701,11 +706,7 @@ const TableContainerEdit = props => {
|
|
|
701
706
|
// const containerWidth = tableContainerRef.current.offsetWidth
|
|
702
707
|
const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
|
|
703
708
|
const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0);
|
|
704
|
-
|
|
705
|
-
// console.log('containerWidth', containerWidth)
|
|
706
|
-
// console.log('totalWidth', totalWidth)
|
|
707
|
-
|
|
708
|
-
if (totalWidth && totalWidth < containerWidth) {
|
|
709
|
+
if (totalWidth && totalWidth > 0 && totalWidth < containerWidth) {
|
|
709
710
|
const factor = containerWidth / totalWidth;
|
|
710
711
|
const visibleCols = table.getVisibleLeafColumns();
|
|
711
712
|
const baseSizes = visibleCols.map(col => col.getSize() || col.columnDef.size || 150);
|
|
@@ -722,18 +723,29 @@ const TableContainerEdit = props => {
|
|
|
722
723
|
acc[col.id] = roundedSizes[idx];
|
|
723
724
|
return acc;
|
|
724
725
|
}, {});
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
// setColumns(aa)
|
|
729
|
-
|
|
730
|
-
// console.log('aaa', aaa)
|
|
731
|
-
|
|
726
|
+
const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, aaa);
|
|
727
|
+
setColumns(aa);
|
|
732
728
|
table.setColumnSizing(aaa);
|
|
729
|
+
requestAnimationFrame(() => {
|
|
730
|
+
columnVirtualizer.measure();
|
|
731
|
+
});
|
|
733
732
|
|
|
734
733
|
// setColumnSizing?.(aaa)
|
|
734
|
+
} else {
|
|
735
|
+
if (columnHidden) {
|
|
736
|
+
const abb = table.getVisibleLeafColumns()?.[0];
|
|
737
|
+
if (abb && Object.keys(columnSizingInfo).length === 0) {
|
|
738
|
+
// setColumnSizing({ "#": abb.getSize() })
|
|
739
|
+
table.setColumnSizing({
|
|
740
|
+
"#": abb.getSize()
|
|
741
|
+
});
|
|
742
|
+
requestAnimationFrame(() => {
|
|
743
|
+
columnVirtualizer.measure();
|
|
744
|
+
});
|
|
745
|
+
}
|
|
746
|
+
}
|
|
735
747
|
}
|
|
736
|
-
}, [table.getTotalSize(),
|
|
748
|
+
}, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer]);
|
|
737
749
|
// }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
|
|
738
750
|
|
|
739
751
|
// React.useEffect(() => {
|
|
@@ -840,7 +852,7 @@ const TableContainerEdit = props => {
|
|
|
840
852
|
const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
|
|
841
853
|
settableHeight(totalHeight - topHeight - bottomHeight);
|
|
842
854
|
}
|
|
843
|
-
}, [id, height, editAble, minHeight]);
|
|
855
|
+
}, [id, height, editAble, minHeight, toolbarItems]);
|
|
844
856
|
const {
|
|
845
857
|
control,
|
|
846
858
|
handleSubmit,
|
|
@@ -143,16 +143,18 @@ const Grid = props => {
|
|
|
143
143
|
|
|
144
144
|
// debugTable: true
|
|
145
145
|
});
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}
|
|
146
|
+
|
|
147
|
+
// React.useEffect(() => {
|
|
148
|
+
// if (columnHidden) {
|
|
149
|
+
// const abb = table.getVisibleLeafColumns()?.[0]
|
|
150
|
+
|
|
151
|
+
// if (abb && Object.keys(columnSizingInfo).length === 0
|
|
152
|
+
// ) {
|
|
153
|
+
// setColumnSizing({ "#": abb.getSize() })
|
|
154
|
+
// }
|
|
155
|
+
// }
|
|
156
|
+
|
|
157
|
+
// }, [columnHidden, columnSizingInfo])
|
|
156
158
|
|
|
157
159
|
// React.useEffect(() => {
|
|
158
160
|
// if (columnSizingInfo.isResizingColumn === false) {
|