How to hide columns for which rows do not hold any data in devextreme react grid?

Question

I am using https://devexpress.github.io/devextreme-reactive/react/grid/ for a data table, I have column visibility filter, and hundreds of rows and around 15 columns. I want to hide those columns for which any row does not have any data. How can I do this without manually checking every row against every column (O(n^2))and creating a map and using that info? Any direct attribute or something else?

Narendra Jadhav Narendra Jadhav · Accepted Answer · 2019-08-22T18:31:38

You could use Column Visibility.

A Grid component with the TableColumnVisibility and ColumnChooser plugins provides the capability to hide or show table columns at runtime.

But this you need to check which column don't have any value for all rows and once you get all those column, you just need to pass props inside of TableColumnVisibility. Please check below example

Code Snippet

render() {
    const { rows, columns } = this.state;
    //Check if all column value is blak for all row then need to push value in hiddenColumnNames.
    let hiddenColumnNames = columns.reduce((r,v)=>{
      if(!rows.find(obj=>obj[v.name] !== "")){
        r.push(v.name);
      }
      return r;
    },[]);//Hidden column will be [age,city]

    return (
      <Paper>
        <Grid rows={rows} columns={columns}>
          <Table />
          <TableHeaderRow />
          <TableColumnVisibility
          hiddenColumnNames={hiddenColumnNames}
        />
        </Grid>
      </Paper>
    );
  }

You can check here with working CodeSandbox

How to hide columns for which rows do not hold any data in devextreme react grid?

1 Answers