根据用户对 react-table 的选择动态 show/hide 列：React+Typescript

Question

我正在使用 react-table 作为应用程序的数据网格。在这种情况下，我需要 show/hide 列出的列，并且根据用户选择，我需要 show/hide 它们。有什么办法可以实现吗？

基本上需要有一些设置类型的图标，点击相同的图标我需要显示所有可用的列，并根据复选框选择我需要 show/hide 它们。

如何让 react-table 中的所有列值显示在此下拉列表中？

如何将此设置图标添加为列 header 的一部分（我将在该列下显示 ID），但是此列的 header 将是旁边的设置图标"Edit" 标签


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',
                    }
              ]}  
        />

    }
}

Answer 1

我看到的第一个问题是您计划将所有列名存储在一行中 'Edit' - 但是函数

'(row:any) => { return {row.index+1}; }' 将遍历数据对象 - 而不是列对象。这意味着，如果数据行多于列，则您将不必要地遍历所有数据行。

相反，将列对象状态存储在 React State 中。将 'show' 属性列更新为 hide/show 列。

类似于这里的代码 -- https://eim52.codesandbox.io/

Answer 2

这是我想出的一个技术含量极低的解决方案，不是动态执行的，但也许这可以帮助您实现目标：

要以静态方式隐藏列，请执行以下操作：

1) 给该列赋值hidden，会隐藏该列而不是header.

列

2) 为该列指定一个空名称，否则您将在 header.

中看到文本

3) 将列宽设置为-1。宽度为 0 会留下一个小的空 header 列，但显然是 -1 'hides'。不确定它为什么有效，我不是 css 大师，但它有效。

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

根据用户对 react-table 的选择动态 show/hide 列：React+Typescript

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

typescript

reactjs

react-table