React Table Hide Column: Simple Ways to Control Column Visibility

Managing large datasets in React applications often requires flexible tools, especially when it comes to displaying specific data. One feature that stands out in this context is the ability to hide or show columns dynamically.

In this blog, we will dive deepexplore how to efficiently manage column visibility in React using the React Table library. We will focus on hiding columns based on user interactions or predefined conditions. Understanding how to handle React Table hide column functionality will greatly improve the user experience and provide better control over how data is presented.

What is React Table and Column Visibility?

React Table is a lightweight and flexible table library that allows developers to build complex data tables with advanced features like sorting, filtering, and pagination. One of its most important features is the ability to control column visibility. This feature is crucial when you need to hide certain columns in response to user actions or default settings. Column visibility refers to the process of controlling which columns in your data table are displayed, making it easier for users to focus on relevant information.

In many situations, not all columns need to be visible at all times. By implementing column-hiding features, developers can give users more control over the displayed information, improving the overall user experience. Whether it’s hiding data columns on demand or disabling column hiding for certain columns, React Table’s flexibility allows for these features to be added seamlessly.

Implementing Column Hiding in React Table

React Table provides several methods to hide columns based on various conditions. Let's walk through an example of how to use the library’s built-in features to hide columns dynamically.

Step 1: Install React Table

To get started, you first need to install React Table into your project:

1npm install react-table

​

Step 2: Basic Table Setup

Now that React Table is installed, let’s set up a basic table structure with some sample data and column headers:

1import React from 'react';
2import { useTable } from 'react-table';
3
4const data = [
5  { name: 'John Doe', age: 28, country: 'USA' },
6  { name: 'Jane Smith', age: 22, country: 'Canada' },
7  { name: 'Sam Brown', age: 30, country: 'UK' }
8];
9
10const columns = [
11  { Header: 'Name', accessor: 'name' },
12  { Header: 'Age', accessor: 'age' },
13  { Header: 'Country', accessor: 'country' }
14];
15
16const MyTable = () => {
17  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
18
19  return (
20    <table {...getTableProps()}>
21      <thead>
22        {headerGroups.map(headerGroup => (
23          <tr {...headerGroup.getHeaderGroupProps()}>
24            {headerGroup.headers.map(column => (
25              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
26            ))}
27          </tr>
28        ))}
29      </thead>
30      <tbody {...getTableBodyProps()}>
31        {rows.map(row => {
32          prepareRow(row);
33          return (
34            <tr {...row.getRowProps()}>
35              {row.cells.map(cell => {
36                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
37              })}
38            </tr>
39          );
40        })}
41      </tbody>
42    </table>
43  );
44};
45
46export default MyTable;

Step 3: Adding Column Visibility Control

React Table offers a column visibility plugin that helps you easily manage which columns are shown or hidden. You can make use of this feature by leveraging the useColumnVisibility hook.

To demonstrate column visibility control, let’s add a state that holds the visibility of each column:

1import React, { useState } from 'react';
2import { useTable, useColumnVisibility } from 'react-table';
3import './MyTable.css';
4
5const MyTable = () => {
6
7  const columns = React.useMemo(
8    () => [
9      { Header: 'Name', accessor: 'name' },
10      { Header: 'Age', accessor: 'age' },
11      { Header: 'Country', accessor: 'country' }
12    ],
13    []
14  );
15
16  const data = React.useMemo(
17    () => [
18      { name: 'John Doe', age: 28, country: 'USA' },
19      { name: 'Jane Smith', age: 22, country: 'Canada' },
20      { name: 'Sam Brown', age: 30, country: 'UK' }
21    ],
22    []
23  );
24
25  const tableInstance = useTable(
26    {
27      columns,
28      data
29    },
30    useColumnVisibility
31  );
32
33  const {
34    getTableProps,
35    getTableBodyProps,
36    headerGroups,
37    rows,
38    prepareRow,
39    allColumns,
40    toggleHideColumn
41  } = tableInstance;
42
43const toggleColumnVisibility = column => {
44  toggleHideColumn(column);
45};
46
47return (
48  <div className="table-container">
49    <div className="column-toggles">
50      {allColumns.map(column => (
51        <button
52          key={column.id}
53          onClick={() => {
54            toggleHideColumn(column.id);
55          }}
56        >
57          {column.isVisible ? 'Hide' : 'Show'} {column.Header}
58        </button>
59      ))}
60    </div>
61
62    <table {...getTableProps()}>
63      <thead>
64        {headerGroups.map(headerGroup => (
65          <tr {...headerGroup.getHeaderGroupProps()}>
66            {headerGroup.headers.map(column => (
67              <th {...column.getHeaderProps()}>
68                {column.render('Header')}
69              </th>
70            ))}
71          </tr>
72        ))}
73      </thead>
74      <tbody {...getTableBodyProps()}>
75        {rows.map(row => {
76          prepareRow(row);
77          return (
78            <tr {...row.getRowProps()}>
79              {row.cells.map(cell => (
80                <td {...cell.getCellProps()}>
81                  {cell.render('Cell')}
82                </td>
83              ))}
84            </tr>
85          );
86        })}
87      </tbody>
88    </table>
89  </div>
90);
91
92};
93
94export default MyTable;

​

In the code above, the toggleColumnVisibility function is responsible for toggling the visibility of the age and country columns by changing the columnVisibility state.

Step 4: Hide Data Columns Dynamically

With this approach, you can easily hide or show any column in your table. You may also want to apply certain logic to disable hiding specific columns for administrative reasons or based on business rules. The column hiding feature of React Table is designed to be flexible enough to handle these cases, making it easy to disable hiding specific columns while keeping others dynamic.

Managing Column Visibility with the Columns Menu

To offer users even more control over which data columns they can see, you can integrate a columns menu that allows users to toggle the visibility of columns interactively. This feature enhances the usability of your table by providing a simple UI to show or hide columns as needed.

Example: Adding a Column Actions Menu

1import React, { useState } from 'react';
2import { useTable, useColumnVisibility } from 'react-table';
3import './MyTableWithMenu.css';
4
5const MyTableWithMenu = () => {
6  const columns = React.useMemo(
7    () => [
8      { Header: 'Name', accessor: 'name' },
9      { Header: 'Age', accessor: 'age' },
10      { Header: 'Country', accessor: 'country' }
11    ],
12    []
13  );
14
15  const data = React.useMemo(
16    () => [
17      { name: 'John Doe', age: 28, country: 'USA' },
18      { name: 'Jane Smith', age: 22, country: 'Canada' },
19      { name: 'Sam Brown', age: 30, country: 'UK' }
20    ],
21    []
22  );
23
24  const {
25    getTableProps,
26    getTableBodyProps,
27    headerGroups,
28    rows,
29    prepareRow,
30    toggleHideColumn, // Changed from setColumnVisibility
31    state: { hiddenColumns }, // Changed from columnVisibility
32  } = useTable(
33    {
34      columns,
35      data,
36      initialState: {
37        hiddenColumns: [] // Changed from columnVisibility
38      }
39    },
40    useColumnVisibility
41  );
42
43  return (
44    <div>
45      <div className="columns-menu">
46        <label>
47          <input
48            type="checkbox"
49            checked={!hiddenColumns.includes('age')}
50            onChange={() => toggleHideColumn('age')}
51          />
52          Toggle Age Column
53        </label>
54        <label>
55          <input
56            type="checkbox"
57            checked={!hiddenColumns.includes('country')}
58            onChange={() => toggleHideColumn('country')}
59          />
60          Toggle Country Column
61        </label>
62      </div>
63      <table {...getTableProps()}>
64        <thead>
65          {headerGroups.map(headerGroup => (
66            <tr {...headerGroup.getHeaderGroupProps()}>
67              {headerGroup.headers.map(column => (
68                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
69              ))}
70            </tr>
71          ))}
72        </thead>
73        <tbody {...getTableBodyProps()}>
74          {rows.map(row => {
75            prepareRow(row);
76            return (
77              <tr {...row.getRowProps()}>
78                {row.cells.map(cell => {
79                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
80                })}
81              </tr>
82            );
83          })}
84        </tbody>
85      </table>
86    </div>
87  );
88};
89
90export default MyTableWithMenu;

The Bottom Line!

The React Table hide column feature provides an intuitive and powerful way to manage table columns dynamically. By using the column actions menu and controlling column visibility, you can tailor the table’s display based on user preferences or business logic. The column hiding feature allows for the seamless integration of data filtering in your table, ensuring that users only see what is relevant to them.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.