Bugfix/Fixing text overflow issues in table for long text (ToolJet#1948)

* updating text wrap issue in table * functionality and styling to allow text wrap feature for overflow in table * updated to include horizontal scroll action * update :: meaningfull naming update * pr review changes * updated to add hide option , code optimizing * merge conflict * fixing hide option breaking layout * overflow field for only possible fields * updating key to avoid confusion * cleanup * fixing scroll issue * merge error * hide theme updated * text wrapping avoided for column type text * typo fix
jason-liu22 · Mar 3, 2022 · f7ddae8 · f7ddae8
1 parent 3c52b6c
commit f7ddae8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
@@ -107,6 +107,11 @@ export function Table({
   }
 
   const [loadingState, setLoadingState] = useState(false);
+  const [columnProperties, setColumnProperties] = useState();
+
+  useEffect(() => {
+    setColumnProperties(component?.definition?.properties?.columns?.value);
+  }, [component?.definition?.properties]);
 
   useEffect(() => {
     const loadingStateProperty = component.definition.properties.loadingState;
@@ -595,6 +600,13 @@ export function Table({
   const leftActions = () => actions.value.filter((action) => action.position === 'left');
   const rightActions = () => actions.value.filter((action) => [undefined, 'right'].includes(action.position));
 
+  const textWrapActions = (id) => {
+    let wrapOption = columnProperties?.find((item) => {
+      return item?.id == id;
+    });
+    return wrapOption?.textWrap;
+  };
+
   const leftActionsCellData =
     leftActions().length > 0
       ? [
@@ -921,7 +933,6 @@ export function Table({
                       if (componentState.changeSet) {
                         if (componentState.changeSet[cell.row.index]) {
                           const currentColumn = columnData.find((column) => column.id === cell.column.id);
-
                           if (
                             _.get(componentState.changeSet[cell.row.index], currentColumn?.accessor, undefined) !==
                             undefined
@@ -932,12 +943,12 @@ export function Table({
                           }
                         }
                       }
-
+                      const wrapAction = textWrapActions(cell.column.id);
                       return (
                         // Does not require key as its already being passed by react-table via cellProps
                         // eslint-disable-next-line react/jsx-key
                         <td
-                          className={cx({
+                          className={cx(`${wrapAction ? wrapAction : 'wrap'}-wrapper`, {
                             'has-actions': cell.column.id === 'rightActions' || cell.column.id === 'leftActions',
                             'has-text': cell.column.columnType === 'text' || cell.column.isEditable,
                             'has-dropdown': cell.column.columnType === 'dropdown',

diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -165,6 +165,26 @@ class Table extends React.Component {
               defaultValue={column.name}
             />
           </div>
+          {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
+            <div className="field mb-2">
+              <label className="form-label">Overflow</label>
+              <SelectSearch
+                options={[
+                  { name: 'Wrap', value: 'wrap' },
+                  { name: 'Scroll', value: 'scroll' },
+                  { name: 'Hide', value: 'hide' },
+                ]}
+                value={column.textWrap}
+                search={true}
+                closeOnSelect={true}
+                onChange={(value) => {
+                  this.onColumnItemChange(index, 'textWrap', value);
+                }}
+                filterOptions={fuzzySearch}
+                placeholder="Select.."
+              />
+            </div>
+          )}
           <div className="field mb-2">
             <label className="form-label">key</label>
             <CodeHinter
@@ -545,10 +565,8 @@ class Table extends React.Component {
   onColumnItemChange = (index, item, value) => {
     const columns = this.props.component.component.definition.properties.columns;
     const column = columns.value[index];
-
     if (item === 'name') {
       const columnSizes = this.props.component.component.definition.properties.columnSizes;
-
       if (columnSizes) {
         const newColumnSizes = JSON.parse(JSON.stringify(columnSizes));
         if (newColumnSizes[column.name]) {
@@ -557,11 +575,9 @@ class Table extends React.Component {
         }
       }
     }
-
     column[item] = value;
     const newColumns = columns.value;
     newColumns[index] = column;
-
     this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties');
   };
 

diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
@@ -1603,7 +1603,16 @@ button {
   .has-actions {
     margin: 0;
   }
-
+  .wrap-wrapper{
+    white-space:normal !important;
+    word-break: break-all;
+  }
+  .scroll-wrapper{
+    overflow-x: auto;
+  }
+  .hide-wrapper{
+   overflow-x: hidden !important;
+  }
   td {
     .text-container:focus-visible,
     .text-container:focus,
@@ -1656,6 +1665,10 @@ button {
     height: 0;
     width: 0;
   }
+  td:hover::-webkit-scrollbar {
+    height: 4px;
+    width:4px;
+  }
   .th {
     white-space: normal;
   }