fixed column resize

client/src/components/production-list-table/production-list-table.component.jsx

@@ -10,7 +10,7 @@ import {
   Statistic,
   Table,
 } from "antd";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -173,6 +173,12 @@ export function ProductionListTable({
   //   }
   // };
 
+  useEffect(
+    () => calculateColumnsWidth(columns, dataSource),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dataSource, state]
+  );
+
   if (!!!columns) return <div>No columns found.</div>;
 
   const totalHrs = data
@@ -184,6 +190,7 @@ export function ProductionListTable({
       0
     )
     .toFixed(1);
+
   return (
     <div>
       <PageHeader
@@ -266,6 +273,7 @@ export function ProductionListTable({
               filteredValue: state.filteredInfo[c.key] || null,
               sortOrder:
                 state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
+              ellipsis: true,
               title: headerItem(c),
               onHeaderCell: (column) => ({
                 width: column.width,
@@ -276,11 +284,67 @@ export function ProductionListTable({
           rowKey="id"
           loading={loading}
           dataSource={dataSource}
-          // scroll={{ x: true }}
+          scroll={{ x: 1500 }}
           onChange={handleTableChange}
         />
       </ReactDragListView.DragColumn>
     </div>
   );
 }
+
+const getTextWidth = (text, font = "14px -apple-system") => {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  context.font = font;
+  const metrics = context.measureText(text);
+  return Math.round(metrics.width + 80);
+};
+
+const calculateColumnsWidth = (columns, source, maxWidthPerCell = 500) => {
+  // First we calculate the width for each column
+  // The column width is based on its string length
+
+  const columnsWithWidth = columns.map((column) => {
+    return Object.assign(column, {
+      width: column.width ?? getTextWidth(column.title),
+    });
+  });
+
+  // Since we have a minimum width (column's width already calculated),
+  // now we are going to verify if the cell value is bigger
+  // than the column width which is already set
+
+  source.forEach((entry) => {
+    columnsWithWidth.forEach((column, indexColumn) => {
+      const columnWidth = column.width;
+      const cellValue = Object.values(entry)[indexColumn];
+
+      // Get the string width based on chars length
+      let cellWidth = getTextWidth(cellValue);
+
+      // Verify if the cell value is smaller than column's width
+      if (cellWidth < columnWidth) cellWidth = columnWidth;
+
+      // Verify if the cell value width is bigger than our max width flag
+      if (cellWidth > maxWidthPerCell) cellWidth = maxWidthPerCell;
+
+      // Update the column width
+      columnsWithWidth[indexColumn].width = cellWidth;
+    });
+  });
+
+  // Sum of all columns width to determine the table max width
+  const tableWidth = columnsWithWidth
+    .map((column) => column.width)
+    .reduce((a, b) => {
+      return a + b;
+    });
+
+  return {
+    columns: columnsWithWidth,
+    source,
+    tableWidth,
+  };
+};
+
 export default connect(mapStateToProps, null)(ProductionListTable);

client/src/components/production-list-table/production-list-table.resizeable.component.jsx

@@ -3,6 +3,11 @@ import { Resizable } from "react-resizable";
 
 export default function ResizableComponent(props) {
   const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    <th {...restProps} />;
+  }
+
   return (
     <Resizable width={width || 200} height={0} onResize={onResize}>
       <th {...restProps} />