如何在 React Table 上显示和隐藏某些列? [英] How to show and hide some columns on React Table?

问题描述

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

I have created a React Table. I want to hide or show some columns in my table by user action. By default all columns should be visible but we will have some check boxes to hide or show some columns.

我的桌子图片

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

Suppose I want to show 4 of the 8 columns. Please suggest me an easy technique to achieve this.

我的列标题数组是

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

请帮我用最简单的技术实现这个功能.

Please help me to achieve this feature by easiest technique.

如果可以，您可以在 codeandbox 上展示演示.

If you can, you can show a demo on codesandbox.

推荐答案

列中有一个属性show.
show: true,//可用于隐藏列.
将隐藏特定列设为 false.将用户的复选框值保留在状态中.https://react-table.js.org/#/story/readme

注意:列属性 show 已弃用.改用 initialstate.hiddenColumns.

Note: The column property showis deprecated. Use initialstate.hiddenColumns instead.

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

这篇关于如何在 React Table 上显示和隐藏某些列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！