column resizing ok

CaduGimenes · Aug 23, 2020 · 3ff5821 · 3ff5821
1 parent 9c32f97
commit 3ff5821
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 27 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -428,15 +428,15 @@ class App extends Component {
         filterPlaceholder: "Adı filter",
         tooltip: "This is tooltip text",
         editPlaceholder: "This is placeholder",
-        width: "20%",
+        maxWidth: 50,
       },
       {
-        width: 100,
         title: "Soyadı",
         field: "surname",
         initialEditValue: "test",
         tooltip: "This is tooltip text",
         editable: "never",
+        resizable: false,
       },
       { title: "Evli", field: "isMarried" },
       {
@@ -454,12 +454,6 @@ class App extends Component {
       },
       { title: "Kayıt Tarihi", field: "insertDateTime", type: "datetime" },
       { title: "Zaman", field: "time", type: "time" },
-      {
-        title: "Adı",
-        field: "name",
-        filterPlaceholder: "Adı filter",
-        tooltip: "This is tooltip text",
-      },
     ],
     remoteColumns: [
       {
@@ -490,7 +484,7 @@ class App extends Component {
                 <MaterialTable
                   tableRef={this.tableRef}
                   columns={this.state.columns}
-                  data={[] || this.state.data}
+                  data={this.state.data}
                   title="Demo Title"
                   onFilterChange={(appliedFilter) => {
                     console.log("selected Filters : ", appliedFilter);
@@ -511,6 +505,7 @@ class App extends Component {
                   // }}
                   options={{
                     tableLayout: "fixed",
+                    columnResizable: true,
                     headerSelectionProps: {
                       color: "primary",
                     },

diff --git a/src/components/m-table-body-row.js b/src/components/m-table-body-row.js
@@ -44,6 +44,7 @@ export default class MTableBodyRow extends React.Component {
               rowData={this.props.data}
               cellEditable={this.props.cellEditable}
               onCellEditFinished={this.props.onCellEditFinished}
+              scrollWidth={this.props.scrollWidth}
             />
           );
         } else {
@@ -68,6 +69,7 @@ export default class MTableBodyRow extends React.Component {
                 columnDef.editable !== "never" && !!this.props.cellEditable
               }
               onCellEditStarted={this.props.onCellEditStarted}
+              scrollWidth={this.props.scrollWidth}
             />
           );
         }

diff --git a/src/components/m-table-body.js b/src/components/m-table-body.js
@@ -101,6 +101,7 @@ class MTableBody extends React.Component {
             onEditingApproved={this.props.onEditingApproved}
             getFieldValue={this.props.getFieldValue}
             onBulkEditRowChanged={this.props.onBulkEditRowChanged}
+            scrollWidth={this.props.scrollWidth}
           />
         );
       } else {
@@ -137,6 +138,7 @@ class MTableBody extends React.Component {
             cellEditable={this.props.cellEditable}
             onCellEditStarted={this.props.onCellEditStarted}
             onCellEditFinished={this.props.onCellEditFinished}
+            scrollWidth={this.props.scrollWidth}
           />
         );
       }
@@ -177,6 +179,7 @@ class MTableBody extends React.Component {
         onCellEditStarted={this.props.onCellEditStarted}
         onCellEditFinished={this.props.onCellEditFinished}
         onBulkEditRowChanged={this.props.onBulkEditRowChanged}
+        scrollWidth={this.props.scrollWidth}
       />
     ));
   }
@@ -221,6 +224,7 @@ class MTableBody extends React.Component {
             filterCellStyle={this.props.options.filterCellStyle}
             filterRowStyle={this.props.options.filterRowStyle}
             hideFilterIcons={this.props.options.hideFilterIcons}
+            scrollWidth={this.props.scrollWidth}
           />
         )}
         {this.props.showAddRow &&
@@ -247,6 +251,7 @@ class MTableBody extends React.Component {
               onEditingCanceled={this.props.onEditingCanceled}
               onEditingApproved={this.props.onEditingApproved}
               getFieldValue={this.props.getFieldValue}
+              scrollWidth={this.props.scrollWidth}
             />
           )}
 
@@ -277,6 +282,7 @@ class MTableBody extends React.Component {
             onEditingCanceled={this.props.onEditingCanceled}
             onEditingApproved={this.props.onEditingApproved}
             getFieldValue={this.props.getFieldValue}
+            scrollWidth={this.props.scrollWidth}
           />
         )}
         {this.renderEmpty(emptyRowCount, renderData)}
@@ -318,6 +324,7 @@ MTableBody.propTypes = {
   renderData: PropTypes.array,
   initialFormData: PropTypes.object,
   selection: PropTypes.bool.isRequired,
+  scrollWidth: PropTypes.number.isRequired,
   showAddRow: PropTypes.bool,
   treeDataMaxLevel: PropTypes.number,
   localization: PropTypes.object,

diff --git a/src/components/m-table-cell.js b/src/components/m-table-cell.js
@@ -3,6 +3,8 @@ import * as React from "react";
 import TableCell from "@material-ui/core/TableCell";
 import PropTypes from "prop-types";
 import parseISO from "date-fns/parseISO";
+import * as CommonValues from "../utils/common-values";
+
 /* eslint-enable no-unused-vars */
 
 /* eslint-disable no-useless-escape */
@@ -115,9 +117,16 @@ export default class MTableCell extends React.Component {
   };
 
   getStyle = () => {
+    const width = CommonValues.reducePercentsInCalc(
+      this.props.columnDef.tableData.width,
+      this.props.scrollWidth
+    );
+
     let cellStyle = {
       color: "inherit",
-      width: this.props.columnDef.tableData.width,
+      width,
+      maxWidth: this.props.columnDef.maxWidth,
+      minWidth: this.props.columnDef.minWidth,
       boxSizing: "border-box",
       fontSize: "inherit",
       fontFamily: "inherit",

diff --git a/src/components/m-table-group-row.js b/src/components/m-table-group-row.js
@@ -49,6 +49,7 @@ export default class MTableGroupRow extends React.Component {
             cellEditable={this.props.cellEditable}
             onCellEditStarted={this.props.onCellEditStarted}
             onCellEditFinished={this.props.onCellEditFinished}
+            scrollWidth={this.props.scrollWidth}
           />
         ));
       } else {
@@ -71,6 +72,7 @@ export default class MTableGroupRow extends React.Component {
                 onEditingApproved={this.props.onEditingApproved}
                 getFieldValue={this.props.getFieldValue}
                 onBulkEditRowChanged={this.props.onBulkEditRowChanged}
+                scrollWidth={this.props.scrollWidth}
               />
             );
           } else {
@@ -97,6 +99,7 @@ export default class MTableGroupRow extends React.Component {
                 cellEditable={this.props.cellEditable}
                 onCellEditStarted={this.props.onCellEditStarted}
                 onCellEditFinished={this.props.onCellEditFinished}
+                scrollWidth={this.props.scrollWidth}
               />
             );
           }
@@ -189,6 +192,7 @@ MTableGroupRow.propTypes = {
   onEditingApproved: PropTypes.func,
   options: PropTypes.object,
   path: PropTypes.arrayOf(PropTypes.number),
+  scrollWidth: PropTypes.number.isRequired,
   cellEditable: PropTypes.object,
   onCellEditStarted: PropTypes.func,
   onCellEditFinished: PropTypes.func,

diff --git a/src/components/m-table-header.js b/src/components/m-table-header.js
@@ -45,9 +45,14 @@ export class MTableHeader extends React.Component {
       return;
     }
 
-    const additionalWidth =
+    let additionalWidth =
       this.state.lastAdditionalWidth + e.clientX - this.state.lastX;
 
+    additionalWidth = Math.min(
+      this.state.resizingColumnDef.maxWidth || additionalWidth,
+      additionalWidth
+    );
+
     if (
       this.state.resizingColumnDef.tableData.additionalWidth !== additionalWidth
     ) {
@@ -63,16 +68,24 @@ export class MTableHeader extends React.Component {
   };
 
   getCellStyle = (columnDef) => {
+    const width = CommonValues.reducePercentsInCalc(
+      columnDef.tableData.width,
+      this.props.scrollWidth
+    );
+
     const style = {
       ...this.props.headerStyle,
       ...columnDef.headerStyle,
       boxSizing: "border-box",
-      width: columnDef.tableData.width,
+      width,
+      maxWidth: columnDef.maxWidth,
+      minWidth: columnDef.minWidth,
     };
 
     if (
-      this.props.options.tableLayout === "resizable" ||
-      this.props.options.tableLayout === "fixed"
+      this.props.options.tableLayout === "fixed" &&
+      this.props.options.columnResizable &&
+      columnDef.resizable !== false
     ) {
       style.paddingRight = 2;
     }
@@ -153,8 +166,9 @@ export class MTableHeader extends React.Component {
         }
 
         if (
-          this.props.options.tableLayout === "resizable" ||
-          this.props.options.tableLayout === "fixed"
+          this.props.options.tableLayout === "fixed" &&
+          this.props.options.columnResizable &&
+          columnDef.resizable !== false
         ) {
           content = (
             <div style={{ display: "flex", alignItems: "center" }}>
@@ -163,19 +177,12 @@ export class MTableHeader extends React.Component {
               <this.props.icons.Resize
                 style={{
                   cursor: "e-resize",
-                  transition: "all ease 400ms",
                   color:
                     this.state.resizingColumnDef &&
                     this.state.resizingColumnDef.tableData.id ===
                       columnDef.tableData.id
                       ? this.props.theme.palette.primary.main
                       : "inherit",
-                  transform:
-                    this.state.resizingColumnDef &&
-                    this.state.resizingColumnDef.tableData.id ===
-                      columnDef.tableData.id
-                      ? "scale(1.25)"
-                      : "none",
                 }}
                 onMouseDown={(e) => this.handleMouseDown(e, columnDef)}
               />

diff --git a/src/default-props.js b/src/default-props.js
@@ -160,8 +160,12 @@ export const defaultProps = {
       </Icon>
     )),
     Resize: React.forwardRef((props, ref) => (
-      <Icon {...props} ref={ref}>
-        more_vert
+      <Icon
+        {...props}
+        ref={ref}
+        style={{ ...props.style, transform: "rotate(90deg)" }}
+      >
+        drag_handle
       </Icon>
     )),
     Search: React.forwardRef((props, ref) => (

diff --git a/src/material-table.js b/src/material-table.js
@@ -864,6 +864,7 @@ export default class MaterialTable extends React.Component {
           treeDataMaxLevel={this.state.treeDataMaxLevel}
           options={props.options}
           onColumnResized={this.onColumnResized}
+          scrollWidth={this.state.width}
         />
       )}
       <props.components.Body
@@ -903,6 +904,7 @@ export default class MaterialTable extends React.Component {
         onCellEditFinished={this.onCellEditFinished}
         bulkEditOpen={this.dataManager.bulkEditOpen}
         onBulkEditRowChanged={this.dataManager.onBulkEditRowChanged}
+        scrollWidth={this.state.width}
       />
     </Table>
   );

diff --git a/src/utils/common-values.js b/src/utils/common-values.js
@@ -8,3 +8,24 @@ export const actionsColumnWidth = (props) =>
   rowActions(props).length * baseIconSize(props);
 export const selectionMaxWidth = (props, maxTreeLevel) =>
   baseIconSize(props) + 9 * maxTreeLevel;
+
+export const reducePercentsInCalc = (calc, fullValue) => {
+  let index = calc.indexOf("%");
+  while (index !== -1) {
+    let leftIndex = index - 1;
+    while (leftIndex >= 0 && "0123456789.".indexOf(calc[leftIndex]) !== -1) {
+      leftIndex--;
+    }
+    leftIndex++;
+
+    const value = Number.parseFloat(calc.substring(leftIndex, index));
+    calc =
+      calc.substring(0, leftIndex) +
+      (value * fullValue) / 100 +
+      "px" +
+      calc.substring(index + 1);
+    index = calc.indexOf("%");
+  }
+
+  return calc;
+};
diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js
@@ -436,8 +436,8 @@ export default class DataManager {
     column.tableData.additionalWidth = additionalWidth;
     column.tableData.width = `calc(${column.tableData.initialWidth} + ${column.tableData.additionalWidth}px)`;
 
-    nextColumn.tableData.additionalWidth = -1 * additionalWidth;
-    nextColumn.tableData.width = `calc(${nextColumn.tableData.initialWidth} + ${nextColumn.tableData.additionalWidth}px)`;
+    // nextColumn.tableData.additionalWidth = -1 * additionalWidth;
+    // nextColumn.tableData.width = `calc(${nextColumn.tableData.initialWidth} + ${nextColumn.tableData.additionalWidth}px)`;
 
     // console.log("F i: " + column.tableData.initialWidth);
     // console.log("F a: " + column.tableData.additionalWidth);

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -196,6 +196,7 @@ export interface Column<RowData extends object> {
     | "never"
     | ((columnDef: Column<RowData>, rowData: RowData) => boolean);
   removable?: boolean;
+  resizable?: boolean;
   validate?: (
     rowData: RowData
   ) => { isValid: boolean; helperText?: string } | string | boolean;
@@ -295,6 +296,7 @@ export interface Options<RowData extends object> {
   actionsColumnIndex?: number;
   addRowPosition?: "first" | "last";
   columnsButton?: boolean;
+  columnResizable?: boolean;
   defaultExpanded?: boolean | ((rowData: any) => boolean);
   debounceInterval?: number;
   detailPanelType?: "single" | "multiple";