fit table columns to content

web/src/CalendarForm.js

@@ -31,6 +31,7 @@ const Form = styled.form`
 
 const defaultColumnProperties = {
   editable: true,
+  resizable: true,
 };
 
 const columnTooltipRenderer = (value) => {
@@ -205,7 +206,7 @@ export default function CalendarForm() {
         tooltip={tableTooltip}
         startingRows={subjectsRows}
         defaultRow={defaultSubjectsRow}
-        cols={subjectsColumns}
+        columns={subjectsColumns}
         onChange={setSubjects}
       />
 
@@ -214,7 +215,7 @@ export default function CalendarForm() {
         tooltip={tableTooltip}
         startingRows={schedulesRows}
         defaultRow={defaultSchedulesRow}
-        cols={schedulesColumns}
+        columns={schedulesColumns}
         onChange={setSchedules}
       />
 

web/src/InputTable.js

@@ -12,8 +12,10 @@ import { Editors, Menu } from "react-data-grid-addons";
 import DataContextMenu, { deleteRow, insertRow } from './DataContextMenu';
 const { ContextMenuTrigger } = Menu;
 
-export default function InputTable({ title, tooltip, startingRows, defaultRow, cols, onChange }) {
+export default function InputTable({ title, tooltip, startingRows, defaultRow, columns, onChange }) {
     const [values, setValues] = useState(startingRows);
+    const [canvas, setCanvas] = useState(null);
+    const [context, setContext] = useState(null);
 
     const onTableUpdated = ({ fromRow, toRow, updated }) => {
         const r = values.slice();
@@ -22,10 +24,79 @@ export default function InputTable({ title, tooltip, startingRows, defaultRow, c
         }
         setValues(r);
 
+        let newCols = formatColumns(columns, r);
+        console.log(newCols);
+        setCols(newCols);
+
         // Callback
         onChange(r);
     };
 
+    const formatColumns = (cols, values) => {
+        // const gridWidth = parseInt(document.querySelector("#root").clientWidth, 10); //selector for grid
+        let combinedColumnWidth = 0;
+
+        for (let i = 0; i < cols.length; i++) {
+            cols[i].width = getTextWidth(cols, values, i);
+            combinedColumnWidth += cols[i].width;
+        }
+
+        // if (combinedColumnWidth < gridWidth) {
+        //     data.columns = distributeRemainingSpace(
+        //         combinedColumnWidth,
+        //         data.columns,
+        //         gridWidth
+        //     );
+        // }
+        return cols;
+    }
+
+    const getTextWidth = (cols, values, i) => {
+        const rowValues = [];
+        const reducer = (a, b) => (a.length > b.length ? a : b);
+        const cellPadding = 16;
+        const arrowWidth = 18;
+        let longestCellData,
+            longestCellDataWidth,
+            longestColName,
+            longestColNameWidth,
+            longestString;
+
+        for (let row of values) {
+            rowValues.push(row[cols[i].key]);
+        }
+
+        longestCellData = rowValues.reduce(reducer);
+        longestColName = cols[i].name;
+        longestCellDataWidth = Math.ceil(
+            getCanvas().measureText(longestCellData).width
+        );
+        longestColNameWidth =
+            Math.ceil(getCanvas("bold ").measureText(longestColName).width) +
+            arrowWidth;
+
+        longestString = Math.max(longestCellDataWidth, longestColNameWidth);
+
+        return longestString + cellPadding;
+    };
+
+    const getCanvas = (fontWeight = "") => {
+        let ctx = context;
+
+        if (!canvas) {
+            let c = document.createElement("canvas");
+            setCanvas(c);
+            ctx = c.getContext("2d")
+            setContext(ctx);
+        }
+
+        ctx.font = `${fontWeight}24px`;
+
+        return ctx;
+    };
+
+    const [cols, setCols] = useState(formatColumns(columns, values));
+
     return (
         <div className="col-12">
             <label htmlFor={title.toLowerCase()} className="form-label">{title}</label>