Dynamically show/hide columns based on user selection with respect to react-table : React+Typescript

1
votes

I am using react-table for as a data grid for an application . I have this scenario where I need to show/hide columns that are listed and based on user selection I need to show/hide them . Is there any way I can achieve this?

Basically need to have a some settings kind of icon , on click of the same I need to display all the available columns and based on the checkbox selection I need to show/hide them.

How can I get all the column values from react-table to show in this dropdown?

How can I add this settings icon as a part of column header(I will be displaying id's under this column), But the header for this column would be a settings icon next to "Edit" label


import * as React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

export default class App extends React.Component<{},{}>  

    constructor(props:any){
        super(props);
        this.state={
           data : [];
    }

    componentDidMount() {
      //using some fetch Call, I get the data and set it to state data property
      let data = fetch(); // fetch call which is not described here
      this.setState({data})
    }

    render(){
       <ReactTable
           data={this.state.data}
            columns = {[
                    {
                      Header: "Edit",// here i need to add an settings icon next to "Edit" header and on click of the same need to show all the column names, then show/hide them based on selection 
                      id: "row",
                      Cell: (row:any) => {
                        return <span>{row.index+1}</span>;
                      }
                    },
                    {
                      id: 'name,
                      Header: 'Name',
                      accessor: 'username',
                    },
                    {
                      id: 'dob,
                      Header: 'DOB',
                      accessor: 'userDOB',
                    },
                    {
                      id: 'status',
                      Header: 'Status',
                      accessor: 'userStatus',
                    }
              ]}  
        />

    }
}
2
reactjstypescriptreact-table

2 Answers

2
votes

The first issue I see is you are planning to store all column names in a Row 'Edit' -but the function

'(row:any) => { return {row.index+1}; }' is will iterate over data object - not columns object. That means, if data rows more then columns you are unnecessarily going over all the data rows.

Instead, store columns object state in React State. Update 'show' property of the columns to hide/show columns.

Something like this code here -- https://eim52.codesandbox.io/

1
votes

This is a super low tech solution that I figured out, and not doing things dynamically, but perhaps this can help you achieve your goal:

To hide a column in a static way do the following:

1) Give the column a value of hidden, which will hide the column but not the column header.

2) Give the column an empty name or else you will see text in the header.

3) Give the column a width of -1. A width of 0 leaves a small empty header column, but -1 'hides' it apparently. Not sure why it works, im not a css master, but it works.

const columnTemplate = [
  {
    {
      key: "costCenter",
      name: "",
      width: -1,
      hidden: true
    }
}
];