Make wrapping in table optional, enabled by default (#872)

* Make wrapping in table optional, enabled by default

* Make wrapping disabled by default

---------

Co-authored-by: Marius Conjeaud <[email protected]>

Author: mariusconjeaud

src/chart/table/TableChart.tsx

@@ -46,11 +46,9 @@ function renderAsButtonWrapper(renderer) {
       return <></>;
     }
     return (
-      <Button
-        style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }}
-        variant='contained'
-        color='primary'
-      >{outputValue}</Button>
+      <Button style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }} variant='contained' color='primary'>
+        {outputValue}
+      </Button>
     );
   };
 }
@@ -73,6 +71,7 @@ export const generateSafeColumnKey = (key) => {
 
 export const NeoTableChart = (props: ChartProps) => {
   const transposed = props.settings && props.settings.transposed ? props.settings.transposed : false;
+  const wrapContent = props.settings && props.settings.wrapContent ? props.settings.wrapContent : false;
   const allowDownload =
     props.settings && props.settings.allowDownload !== undefined ? props.settings.allowDownload : false;
 
@@ -214,6 +213,49 @@ export const NeoTableChart = (props: ChartProps) => {
     : Math.floor(availableRowHeight) - pageSizeReducer;
 
   const pageNames = getPageNumbersAndNamesList();
+  const commonGridProps = {
+    key: 'tableKey',
+    headerHeight: 32,
+    density: compact ? 'compact' : 'standard',
+    rows: rows,
+    columns: columns,
+    columnVisibilityModel: columnVisibilityModel,
+    onColumnVisibilityModelChange: (newModel) => setColumnVisibilityModel(newModel),
+    onCellClick: (e) => performActionOnElement(e, actionsRules, { ...props, pageNames: pageNames }, 'Click', 'Table'),
+    onCellDoubleClick: (e) => {
+      let rules = getRule(e, actionsRules, 'doubleClick');
+      if (rules !== null) {
+        rules.forEach((rule) => executeActionRule(rule, e, { ...props, pageNames: pageNames }, 'table'));
+      } else {
+        setNotificationOpen(true);
+        navigator.clipboard.writeText(e.value);
+      }
+    },
+    checkboxSelection: hasCheckboxes(actionsRules),
+    selectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter),
+    onSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter),
+    pageSize: tablePageSize > 0 ? tablePageSize : 5,
+    rowsPerPageOptions: rows.length < 5 ? [rows.length, 5] : [5],
+    disableSelectionOnClick: true,
+    components: {
+      ColumnSortedDescendingIcon: () => <></>,
+      ColumnSortedAscendingIcon: () => <></>,
+    },
+    getRowClassName: (params) => {
+      return ['row color', 'row text color']
+        .map((e) => {
+          return `rule${evaluateRulesOnDict(params.row, styleRules, [e])}`;
+        })
+        .join(' ');
+    },
+    getCellClassName: (params) => {
+      return ['cell color', 'cell text color']
+        .map((e) => {
+          return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [e])}`;
+        })
+        .join(' ');
+    },
+  };
 
   return (
     <ThemeProvider theme={theme}>
@@ -259,61 +301,21 @@ export const NeoTableChart = (props: ChartProps) => {
           <></>
         )}
 
-        <DataGrid
-          key={'tableKey'}
-          headerHeight={32}
-          density={compact ? 'compact' : 'standard'}
-          getRowHeight={() => 'auto'}
-          rows={rows}
-          columns={columns}
-          columnVisibilityModel={columnVisibilityModel}
-          onColumnVisibilityModelChange={(newModel) => setColumnVisibilityModel(newModel)}
-          onCellClick={(e) =>
-            performActionOnElement(e, actionsRules, { ...props, pageNames: pageNames }, 'Click', 'Table')
-          }
-          onCellDoubleClick={(e) => {
-            let rules = getRule(e, actionsRules, 'doubleClick');
-            if (rules !== null) {
-              rules.forEach((rule) => executeActionRule(rule, e, { ...props, pageNames: pageNames }, 'table'));
-            } else {
-              setNotificationOpen(true);
-              navigator.clipboard.writeText(e.value);
-            }
-          }}
-          checkboxSelection={hasCheckboxes(actionsRules)}
-          selectionModel={getCheckboxes(actionsRules, rows, props.getGlobalParameter)}
-          onSelectionModelChange={(selection) =>
-            updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter)
-          }
-          pageSize={tablePageSize > 0 ? tablePageSize : 5}
-          rowsPerPageOptions={rows.length < 5 ? [rows.length, 5] : [5]}
-          disableSelectionOnClick
-          components={{
-            ColumnSortedDescendingIcon: () => <></>,
-            ColumnSortedAscendingIcon: () => <></>,
-          }}
-          getRowClassName={(params) => {
-            return ['row color', 'row text color']
-              .map((e) => {
-                return `rule${evaluateRulesOnDict(params.row, styleRules, [e])}`;
-              })
-              .join(' ');
-          }}
-          getCellClassName={(params) => {
-            return ['cell color', 'cell text color']
-              .map((e) => {
-                return `rule${evaluateRulesOnDict({ [params.field]: params.value }, styleRules, [e])}`;
-              })
-              .join(' ');
-          }}
-          sx={{
-            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' },
-            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell:has(button)': { py: '0px' },
-            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
-            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
-            '&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' },
-          }}
-        />
+        {wrapContent ? (
+          <DataGrid
+            {...commonGridProps}
+            getRowHeight={() => 'auto'}
+            sx={{
+              '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' },
+              '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell:has(button)': { py: '0px' },
+              '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
+              '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
+              '&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' },
+            }}
+          />
+        ) : (
+          <DataGrid {...commonGridProps} rowHeight={tableRowHeight} />
+        )}
       </div>
     </ThemeProvider>
   );

src/config/ReportConfig.tsx

@@ -46,6 +46,12 @@ const _REPORT_TYPES = {
         values: [true, false],
         default: false,
       },
+      wrapContent: {
+        label: 'Wrap overflowing content',
+        type: SELECTION_TYPES.LIST,
+        values: [true, false],
+        default: false,
+      },
       columnWidthsType: {
         label: 'Column Widths Specification',
         type: SELECTION_TYPES.LIST,