Hiding columns in Table does not work #374

Author: JonanOribe

src/chart/table/TableChart.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { ChartProps } from '../Chart';
 import {
   evaluateRulesOnDict,
@@ -26,7 +26,6 @@ import { extensionEnabled } from '../../utils/ReportUtils';
 const TABLE_HEADER_HEIGHT = 32;
 const TABLE_FOOTER_HEIGHT = 62;
 const TABLE_ROW_HEIGHT = 52;
-const HIDDEN_COLUMN_PREFIX = '__';
 
 const theme = createTheme({
   typography: {
@@ -160,10 +159,6 @@ export const NeoTableChart = (props: ChartProps) => {
           actionableFields.includes(key)
         );
       });
-  const hiddenColumns = Object.assign(
-    {},
-    ...columns.filter((x) => x.field.startsWith(HIDDEN_COLUMN_PREFIX)).map((x) => ({ [x.field]: false }))
-  );
 
   const getTransposedRows = (records) => {
     // Skip first key
@@ -205,6 +200,9 @@ export const NeoTableChart = (props: ChartProps) => {
 
   const pageNames = getPageNumbersAndNamesList();
 
+  const [columnVisibilityModel, setColumnVisibilityModel] =
+  React.useState<GridColumnVisibilityModel>({});
+
   return (
     <ThemeProvider theme={theme}>
       <div className={classes.root} style={{ height: '100%', width: '100%', position: 'relative' }}>
@@ -255,7 +253,10 @@ export const NeoTableChart = (props: ChartProps) => {
           rowHeight={tableRowHeight}
           rows={rows}
           columns={columns}
-          columnVisibilityModel={hiddenColumns}
+          columnVisibilityModel={columnVisibilityModel}
+          onColumnVisibilityModelChange={(newModel) =>
+            setColumnVisibilityModel(newModel)
+          }
           onCellClick={(e) =>
             performActionOnElement(e, actionsRules, { ...props, pageNames: pageNames }, 'Click', 'Table')
           }