Question

我正在使用react-table作为应用程序的数据网格。在这种情况下，我需要显示/隐藏列出的列，并且根据用户选择，我需要显示/隐藏它们。我有什么办法可以做到这一点？

基本上需要具有某种设置类型的图标，单击相同的图标，我需要显示所有可用的列，并基于复选框的选择，需要显示/隐藏它们。

如何从react-table中获取所有列值以显示在此下拉列表中？

如何将此设置图标添加为列标题的一部分（我将在此列下方显示ID），但是此列的标题将是“编辑”标签旁边的设置图标


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

我看到的第一个问题是您打算将所有列名存储在“编辑”行中-但是函数

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

相反，将列对象状态存储在React State中。更新列的“显示”属性以隐藏/显示列。

类似于此处的代码- https://eim52.codesandbox.io/

Answer 2

这是我发现的一种超低技术含量的解决方案，它不会动态执行操作，但这也许可以帮助您实现目标：

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

1）为列指定一个hidden值，这将隐藏该列，但不隐藏列标题。

2）为该列提供一个空名称，否则您将在标题中看到文本。

3）将列的宽度设置为-1。宽度为0时会留下一个小的空白标题列，但显然会“ -1”“隐藏”它。不知道为什么它起作用，不是css主机，但是它起作用。

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

根据用户对react-table的选择，动态显示/隐藏列：React + Typescript

2 个答案: