fixed column resize

client/package.json

@@ -45,7 +45,7 @@
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
-    "react-drag-listview": "^0.2.1",
+    "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.0",
     "react-grid-layout": "^1.3.4",
     "react-i18next": "^12.2.0",
@@ -53,7 +53,7 @@
     "react-image-lightbox": "^5.1.4",
     "react-number-format": "^5.1.3",
     "react-redux": "^8.0.5",
-    "react-resizable": "^3.0.4",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^5.0.1",
     "react-sticky": "^6.0.3",

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} />

client/src/index.css

@@ -12,3 +12,18 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+}

client/yarn.lock

@@ -11105,10 +11105,10 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-drag-listview@^0.2.1:
+react-drag-listview@^2.0.0:
-  version "0.2.1"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-drag-listview/-/react-drag-listview-0.2.1.tgz#922fa3c37ed4d84f2a349a93b01a623ac565f7dc"
+  resolved "https://registry.yarnpkg.com/react-drag-listview/-/react-drag-listview-2.0.0.tgz#b8e7ec5f980ecbbf3abb85f50db0b03cd764edbf"
-  integrity sha512-LFR/14CpmiieITCywfe2rxAg1szAqsynpqgquSgirT9cansDwJdpqAVEjzIRSEql/DRIYTvBYLvMI/HJcVeU4w==
+  integrity sha512-7Apx/1Xt4qu+JHHP0rH6aLgZgS7c2MX8ocHVGCi03KfeIWEu0t14MhT3boQKM33l5eJrE/IWfExFTvoYq22fsg==
   dependencies:
     babel-runtime "^6.26.0"
     prop-types "^15.5.8"
@@ -11256,6 +11256,14 @@ react-resizable@^3.0.4:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
+react-resizable@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1"
+  integrity sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==
+  dependencies:
+    prop-types "15.x"
+    react-draggable "^4.0.3"
+
 react-resize-detector@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c"