Revert "fixed column resize"

This reverts commit 6e7d1abd70.

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

@@ -10,7 +10,7 @@ import {
   Statistic,
   Table,
 } from "antd";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import ReactDragListView from "react-drag-listview";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -173,12 +173,6 @@ 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
@@ -190,7 +184,6 @@ export function ProductionListTable({
       0
     )
     .toFixed(1);
-
   return (
     <div>
       <PageHeader
@@ -273,7 +266,6 @@ 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,
@@ -284,67 +276,11 @@ export function ProductionListTable({
           rowKey="id"
           loading={loading}
           dataSource={dataSource}
-          scroll={{ x: 1500 }}
+          // scroll={{ x: true }}
           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,11 +3,6 @@ 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,18 +12,3 @@ 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;
-}