如何在 React Table 上显示和隐藏某些列？

Posted 2023-02-19

【中文标题】如何在 React Table 上显示和隐藏某些列？

【英文标题】：How to show and hide some columns on React Table?

【发布时间】：2019-05-07 08:44:52

【问题描述】：

我创建了一个反应表。我想通过用户操作隐藏或显示表中的某些列。默认情况下，所有列都应该是可见的，但我们会有一些复选框来隐藏或显示某些列。

Image of my table

假设我想显示 8 列中的 4 列。请建议我一种简单的技术来实现这一点。

我的列头数组是

  const columns = [
  
Header: 'Column 1',
    columns: [
       
           Header: 'S Column 1',
           accessor: 'firstName'
       
  ]
    ,
   
  Header: 'Column 2',
   columns: [
     
        Header: 'S Column 2',
        accessor: 'firstName'
      
   ]
       ,
     
        Header: 'Column 3',
        columns: [
     
        Header: 'S Column 3',
        accessor: 'firstName'
      
     ]
     ,
       
      Header: 'Column 4',
      columns: [
        
        Header: 'S column 4',
        accessor: 'firstName'
       
      ]
       ,
     
 Header: 'Column 5',
columns: [
     
Header: 'S column 5',
 accessor: 'firstName'
    
   ]
  ,
  
 Header: 'Column 6',
 columns: [
 
    Header: 'S column 6a',
    accessor: 'firstName'
  ,
    
    Header: 'S column 6b',
    accessor: 'firstName'
   ,
   
    Header: 'S column 6c',
    accessor: 'firstName'
     ,
   
     Header: 'S column 6d',
     accessor: 'firstName'
     
  ]
    ,
  
 Header: 'Column 7',
 columns: [
 
  Header: 'S column 7',
     accessor: 'firstName'
   
     ]
    ,
    
    Header: 'Column 8',
    columns: [
  
   Header: 'S Column 8a',
   accessor: 'firstName'
  ,
 
   Header: 'S Column 8b',
   accessor: 'firstName'
   ,
   
Header: 'S Column 8c',
accessor: 'firstName'
  ,
  
  Header: 'S Column 8d',
  accessor: 'firstName'
  
 ]
  ,
  ];

请帮助我以最简单的技术实现此功能。

如果可以的话，你可以在codesandbox上展示一个demo。

【问题讨论】：

视觉上隐藏的样式 css 不起作用吗？

不，我认为它不能仅由 css 工作。如果可以的话，你可以展示一个演示。

【参考方案1】：

在列中有一个属性show.show: true, // can be used to hide a column. 使其为 false 以隐藏特定列。将用户的复选框值保持在状态中。 https://react-table.js.org/#/story/readme

注意：列属性show已弃用。请改用initialstate.hiddenColumns。

检查：https://github.com/tannerlinsley/react-table/issues/1804

【讨论】：

你能给我看一个关于代码沙盒的演示吗？我是 React 的初学者。

您能否以某种方式展示一个演示，如果未选中复选框，我如何禁用列？

非常感谢。还有一个问题。您已使用“名字”复选框。但我想为整个名字做。如果我禁用名称，名字和姓氏都将被禁用。您能否在演示中进行最后一次更改？

大声笑。 @Scooby，您应该真正研究一下反应及其概念；）我在沙箱中进行了更改。 codesandbox.io/s/03x3r0vx1l 。看看吧！

谢谢！为我节省了一些搜索时间 - 以前的故事书文档似乎已经消失了

【参考方案2】：

代码示例：

 const columns = useMemo(
        () => [           
            
                Header: 'DeviceId',
                accessor: 'DeviceId',                
            ,
            
                Header: 'Serial_Number',
                accessor: 'Serial_Number',
            ,
            
                Header: 'Type',
                accessor: 'Type',
            ,            
        ],
        []
    );

const initialState =  hiddenColumns: ['DeviceId'] ;

useTable(
        columns,
        data,
        initialState
    ,
        useSortBy
    )