React Antd Show or Hide Columns of antd table via a group of antd checkboxes

Question

I want to give the user an option to hide or show columns of Antd table via a group of checkboxes. I tried different online solutions but I didn't succeed. I want something like this, as in the below picture.

note: some columns has been checked by default, but user can also uncheck them

I am stuck with this problem from last 2 days. Here is my code.Thanks in advance!

https://stackblitz.com/edit/react-h8hoys-q2mfxy?file=demo.js

score 1 · Answer 1 · answered Nov 13 '22 at 18:57

I changed your code in 3 point:

I used setState instead of regular variables (like const)
I initialized state by baseColumns filtering for hide cars column (because it was checked at by default).
I changed onChange function for filter baseColumns and pass it to setColumn:

const baseColumns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Cars',
      dataIndex: 'cars',
      key: 'cars',
    },
    {
      title: 'Bikes',
      dataIndex: 'bikes',
      key: 'bikes',
    },
    {
      title: 'Plane',
      dataIndex: 'plane',
      key: 'plane',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  let [columns, setColumns] = useState(
    baseColumns.filter((item) => item.dataIndex !== 'cars')
  );

  let onChange = (checkedValues) => {
    console.log(checkedValues);
    setColumns(
      baseColumns.filter((item) => !checkedValues.includes(item.dataIndex))
    );
  };

to see complete code see this link

thanks @Kamran for ur response, i checked ur code, in your code if we select a checkbox then the column disappears, it should be like this, on selected it should show, & on uncheck, it should hide. — naeem, Nov 13 '22 at 19:05
I changed that code, check this link https://stackblitz.com/edit/react-h8hoys-fyfnyf?file=demo.js — Kamran Davar, Nov 14 '22 at 06:03
in the changed code, when the component first loads, it shows no data, plus onClick the Car, Bike or plane checkboxes, that particular columns are not showing in the table. Can you take a look again? — naeem, Nov 14 '22 at 06:28
I was solved that problem but seems it was not saved. I chaned it again https://stackblitz.com/edit/react-h8hoys-fyfnyf?file=demo.js — Kamran Davar, Nov 14 '22 at 07:03

score 0 · Answer 2 · answered Nov 13 '22 at 17:42

You can create a state to store the keys of columns so we can filter out the columns. I make Checkbox.Group as controlled component. When you change any checkbox value, in onChange function you will get an array of checkbox keys that are currently selected.

Hope this solve your problem.

import { useState } from 'react';
import { Checkbox, Table } from 'antd';

const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Cars', dataIndex: 'cars', key: 'cars' },
    { title: 'Bikes', dataIndex: 'bkes', key: 'bikes' },
    { title: 'Plane', dataIndex: 'plane', key: 'plane' },
    { title: 'Address', dataIndex: 'address', key: 'address' }
];

const dataSource = [
    { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
    { key: '2', name: 'John', age: 42, address: '10 Downing Street' }
];

const columnsKeys = columns.map((column) => column.key);

const App = () => {
    const [selectedColumns, setSelectedColumns] = useState(columnsKeys);
    const filteredColumns = columns.filter((column) => selectedColumns.includes(column.key));

    const onChange = (checkedValues) => {
        setSelectedColumns(checkedValues);
    };

    return (
        <>
            <Checkbox.Group onChange={onChange} value={selectedColumns}>
                {columnsKeys.map((column) => (
                    <Checkbox value={column} key={column}>
                        {column}
                    </Checkbox>
                ))}
            </Checkbox.Group>
            <Table dataSource={dataSource} columns={filteredColumns} />;
        </>
    );
};

export default App;

Thanks for your reply Nouman but i only want 3 check boxes for Car, Bike and Plane columns. And only the Car checkbox should the selected by default when the component first loads. — naeem, Nov 13 '22 at 18:58

React Antd Show or Hide Columns of antd table via a group of antd checkboxes

2 Answers2