ehscan-react-table 0.0.19 → 0.0.21

package/dist/cells/TableCellDueDate.js

@@ -8,5 +8,5 @@ export const TableCellDueDate = ({ content, id, col, clickRow }) => {
             ? '-'
             : _jsx("span", { className: `${styles.dateTag} ${styles[calcDateDiff(valDate)]}`, children: formatToDDMMYYYY(valDate) });
     };
-    return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), children: _jsx(DateContent, { value: content }) }));
+    return (_jsx("div", { onClick: () => clickRow({ id, col, type: 'default' }), style: { width: "100%", textAlign: "center" }, children: _jsx(DateContent, { value: content }) }));
 };

package/dist/elements/Table.js

@@ -32,6 +32,7 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
         const calculateHeight = () => {
             if (headerRef.current) {
                 const { bottom } = headerRef.current.getBoundingClientRect();
+                console.log(bottom);
                 setWrapperBottom(bottom);
             }
         };
@@ -98,12 +99,34 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
     const HeadColSort = ({ tag }) => {
         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, {})] }) }));
     };
+    const colRefs = useRef({});
     const HeadColMain = ({ col }) => {
         const { tag, search, title, width } = col;
+        const shouldMeasure = ['duedate'].includes(tag);
         const colTitle = title !== undefined ? title : tag;
         const thWidth = width !== undefined ? `${width}px` : "30px";
-        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 ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { onClick: () => setOpenCol(tag), children: colTitle }) })] }) }));
+        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
+                            ? _jsx(HeadSearchBar, { content: colTitle, tag: tag })
+                            : _jsx("div", { onClick: () => setOpenCol(tag), children: colTitle }) })] }) }));
     };
+    useEffect(() => {
+        const entries = Object.entries(colRefs.current)
+            .filter(([, el]) => el !== null);
+        if (entries.length === 0)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                const tag = Object.keys(colRefs.current)
+                    .find(k => colRefs.current[k] === entry.target);
+                if (tag) {
+                    const width = entry.contentRect.width;
+                    console.log(`Column "${tag}" resized to`, width);
+                }
+            });
+        });
+        entries.forEach(([, el]) => observer.observe(el));
+        return () => observer.disconnect();
+    }, []);
     const HeadCols = () => {
         return (_jsxs(_Fragment, { children: [columns.map((col, i) => {
                     const { tag, type, width } = col;

package/dist/elements/table.module.css

@@ -205,15 +205,27 @@ svg.removesearchsvg{
     background: transparent;
     border-radius: var(--ext-search-wrapper-padding, 4px);
     height: var(--ext-search-wrapper-height, 25px);
+    --input-padding: 1px 5px 3px 0;
 }
 
-.searchwrapper:hover{
-    background: rgba(0,0,0,0.2);
-}
 
 .focused {
     border: var(--ext-search-wrapper-focused-border, 1px dashed white);
     color: white;
+    --input-padding: 1px 5px 3px 10px;
+}
+
+input.headsearch {
+    border: none;
+    border-radius: 4px;
+    width: 98%;
+    padding: var(--input-padding);
+    box-sizing: border-box;
+    background-color: transparent;
+}
+
+.searchwrapper:hover{
+    background: rgba(0,0,0,0.2);
 }
 
 svg {
@@ -241,15 +253,6 @@ svg {
     color: var(--ext-table-cell-clr, lightslategrey);
 }
 
-input.headsearch {
-    border: none;
-    border-radius: 4px;
-    width: 98%;
-    padding: 1px 6px 3px 6px;
-    box-sizing: border-box;
-    background-color: transparent;
-}
-
 input.headsearch:hover {
     border: none;
     cursor: pointer;
@@ -332,14 +335,14 @@ input.headsearch:focus {
     background-color: var(--ext-table-header-bkc-clr, darkgoldenrod);
     color: var(--ext-table-header-clr, darkslategrey);
     border-radius: 4px;
-    padding: 2px 5px;
+    padding: 0 5px;
     opacity: 0;
     transition: opacity 0.3s ease, margin-top 0.3s ease;
 }
 
 .show {
     opacity: 1;
-    margin-top: -6px;
+    margin-top: -5px;
     z-index: 999;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-table",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",