Reactjs 根据用户对react表的选择动态显示/隐藏列：react+；打字稿

我正在使用react table for作为应用程序的数据网格。在这个场景中，我需要显示/隐藏列出的列，并根据用户选择显示/隐藏它们。我有什么办法可以做到这一点吗

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

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

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

从“React”导入*作为React；
从“反应表”导入反应表；
导入“react table/react table.css”；
导出默认类App扩展React.Component
构造器（道具：任何）{
超级（道具）；
这个州={
数据：[]；
}
componentDidMount（）{
//使用一些fetch调用，我获取数据并将其设置为state data属性
let data=fetch（）；//此处未描述的fetch调用
this.setState（{data}）
}
render（）{
{
返回{row.index+1}；
}
},
{
id:'姓名，
标题：“名称”，
访问者：“用户名”，
},
{
id:'dob，
标题：“DOB”，
访问者：“userDOB”，
},
{
id:'状态'，
标题：“状态”，
访问者：“userStatus”，
}
]}  
/>
}
}

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

“（row:any）=>{return{row.index+1}；}”is将迭代数据对象，而不是列对象。这意味着，如果数据行多于列，则不必要地检查所有数据行

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

类似于这里的代码--

---

这是我想出的一个超低技术解决方案，不动态地做事，但也许这可以帮助您实现目标：

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

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

2） 为列指定一个空名称，否则您将在标题中看到文本

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

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

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