import { useState, useCallback, useEffect, useRef } from "react"; import "./styles.css"; const createHeaders = (headers) => { return headers.map((item) => ({ text: item, ref: useRef() })); }; /* * Read the blog post here: * https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid */ const Table = ({ headers, minCellWidth, tableContent }) => { const [tableHeight, setTableHeight] = useState("auto"); const [activeIndex, setActiveIndex] = useState(null); const tableElement = useRef(null); const columns = createHeaders(headers); useEffect(() => { setTableHeight(tableElement.current.offsetHeight); }, []); const mouseDown = (index) => { setActiveIndex(index); }; const mouseMove = useCallback( (e) => { const gridColumns = columns.map((col, i) => { if (i === activeIndex) { const width = e.clientX - col.ref.current.offsetLeft; if (width >= minCellWidth) { return `${width}px`; } } return `${col.ref.current.offsetWidth}px`; }); tableElement.current.style.gridTemplateColumns = `${gridColumns.join( " " )}`; }, [activeIndex, columns, minCellWidth] ); const removeListeners = useCallback(() => { window.removeEventListener("mousemove", mouseMove); window.removeEventListener("mouseup", removeListeners); }, [mouseMove]); const mouseUp = useCallback(() => { setActiveIndex(null); removeListeners(); }, [setActiveIndex, removeListeners]); useEffect(() => { if (activeIndex !== null) { window.addEventListener("mousemove", mouseMove); window.addEventListener("mouseup", mouseUp); } return () => { removeListeners(); }; }, [activeIndex, mouseMove, mouseUp, removeListeners]); // Demo only const resetTableCells = () => { tableElement.current.style.gridTemplateColumns = ""; }; return (

{columns.map(({ ref, text }, i) => ( ))} {tableContent}

{text} mouseDown(i)} className={`resize-handle ${ activeIndex === i ? "active" : "idle" }`} />

); }; export default Table;