ehscan-react-table 0.0.20 → 0.0.21
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.
|
@@ -8,5 +8,5 @@ export const TableCellDueDate = ({ content, id, col, clickRow }) => {
|
|
|
8
8
|
? '-'
|
|
9
9
|
: _jsx("span", { className: `${styles.dateTag} ${styles[calcDateDiff(valDate)]}`, children: formatToDDMMYYYY(valDate) });
|
|
10
10
|
};
|
|
11
|
-
return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), children: _jsx(DateContent, { value: content }) }));
|
|
11
|
+
return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), style: { width: "100%", textAlign: "center" }, children: _jsx(DateContent, { value: content }) }));
|
|
12
12
|
};
|
package/dist/elements/Table.js
CHANGED
|
@@ -32,6 +32,7 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
|
|
|
32
32
|
const calculateHeight = () => {
|
|
33
33
|
if (headerRef.current) {
|
|
34
34
|
const { bottom } = headerRef.current.getBoundingClientRect();
|
|
35
|
+
console.log(bottom);
|
|
35
36
|
setWrapperBottom(bottom);
|
|
36
37
|
}
|
|
37
38
|
};
|
|
@@ -98,12 +99,34 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
|
|
|
98
99
|
const HeadColSort = ({ tag }) => {
|
|
99
100
|
return (_jsx(_Fragment, { children: _jsxs("div", { className: "sort-col", onClick: () => setSortOrder({ tag, dir: sortOrder.dir === 'desc' ? 'asc' : 'desc' }), children: [sortOrder.tag === tag && _jsx(SortButton, {}), openCol === tag && sortOrder.tag !== tag && _jsx(EmptySort, {})] }) }));
|
|
100
101
|
};
|
|
102
|
+
const colRefs = useRef({});
|
|
101
103
|
const HeadColMain = ({ col }) => {
|
|
102
104
|
const { tag, search, title, width } = col;
|
|
105
|
+
const shouldMeasure = ['duedate'].includes(tag);
|
|
103
106
|
const colTitle = title !== undefined ? title : tag;
|
|
104
107
|
const thWidth = width !== undefined ? `${width}px` : "30px";
|
|
105
|
-
return (_jsx("th", { style: { "--custom-width": thWidth }, children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search
|
|
108
|
+
return (_jsx("th", { ref: shouldMeasure ? (el) => { colRefs.current[tag] = el; } : undefined, style: { "--custom-width": thWidth }, children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search
|
|
109
|
+
? _jsx(HeadSearchBar, { content: colTitle, tag: tag })
|
|
110
|
+
: _jsx("div", { onClick: () => setOpenCol(tag), children: colTitle }) })] }) }));
|
|
106
111
|
};
|
|
112
|
+
useEffect(() => {
|
|
113
|
+
const entries = Object.entries(colRefs.current)
|
|
114
|
+
.filter(([, el]) => el !== null);
|
|
115
|
+
if (entries.length === 0)
|
|
116
|
+
return;
|
|
117
|
+
const observer = new ResizeObserver((entries) => {
|
|
118
|
+
entries.forEach((entry) => {
|
|
119
|
+
const tag = Object.keys(colRefs.current)
|
|
120
|
+
.find(k => colRefs.current[k] === entry.target);
|
|
121
|
+
if (tag) {
|
|
122
|
+
const width = entry.contentRect.width;
|
|
123
|
+
console.log(`Column "${tag}" resized to`, width);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
entries.forEach(([, el]) => observer.observe(el));
|
|
128
|
+
return () => observer.disconnect();
|
|
129
|
+
}, []);
|
|
107
130
|
const HeadCols = () => {
|
|
108
131
|
return (_jsxs(_Fragment, { children: [columns.map((col, i) => {
|
|
109
132
|
const { tag, type, width } = col;
|