Column visibility

Use the useColumnVisibility hook to let users show and hide columns at runtime. The hook manages visibility state and returns a modified column array you pass directly to DataTable. You bring your own toggle UI (a dropdown, a sidebar, a modal) and place it wherever fits your layout.

Column toggle menu

Click "Columns ▾" to show and hide individual columns. The hook manages the omit state. You own the UI.

Name

Department

Role

Salary

Location

Aria Chen

Engineering

Engineering Lead

$155,000

San Francisco

Marcus Webb

Product

Product Manager

$132,000

New York

Priya Kapoor

Design

Senior Designer

$118,000

Austin

Jordan Ellis

Analytics

Data Scientist

$141,000

Seattle

Sam Rivera

Engineering

DevOps Engineer

$128,000

Remote

Taylor Brooks

Sales

Account Manager

$98,000

Chicago

import DataTable, { useColumnVisibility, type TableColumn } from 'react-data-table-component';

const initialColumns: TableColumn<Employee>[] = [
  { id: 'name',       name: 'Name',       selector: r => r.name,       sortable: true },
  { id: 'department', name: 'Department', selector: r => r.department, sortable: true },
  { id: 'role',       name: 'Role',       selector: r => r.role },
  { id: 'salary',     name: 'Salary',     selector: r => r.salary,     sortable: true },
  { id: 'location',   name: 'Location',   selector: r => r.location },
];

export default function App() {
  const { columns, entries, toggleColumn, showAll } = useColumnVisibility(initialColumns);

  return (
    <div>
      {/* Your own toggle UI */}
      <ColumnMenu entries={entries} onToggle={toggleColumn} onShowAll={showAll} />

      <DataTable columns={columns} data={data} />
    </div>
  );
}

Hook API

const {
  columns,      // TableColumn<T>[] — pass directly to DataTable, omit is managed for you
  entries,      // { column, visible }[] — drive your toggle UI from this
  toggleColumn, // (columnId) => void — flip one column's visibility
  isVisible,    // (columnId) => boolean — check a specific column
  showAll,      // () => void — make all columns visible
  hideAll,      // () => void — hide all columns
} = useColumnVisibility(initialColumns);

Column IDs are required

The hook tracks visibility by column id. Columns without an id fall back to their original omit value and cannot be toggled. Set an id on every column you want to be toggleable:

{ id: 'name', name: 'Name', selector: r => r.name }

Persisting visibility state

Because you own the UI, you also own persistence. Pass a pre-configured column array with omit set from your stored preferences before calling the hook:

const saved = JSON.parse(localStorage.getItem('hiddenCols') ?? '[]') as string[];

const initialColumns: TableColumn<Employee>[] = [
  { id: 'name',   name: 'Name',   selector: r => r.name },
  { id: 'salary', name: 'Salary', selector: r => r.salary, omit: saved.includes('salary') },
];

const { columns, entries, toggleColumn } = useColumnVisibility(initialColumns);

const handleToggle = (id: string | number) => {
  toggleColumn(id);
  const next = entries
    .filter(e => (e.column.id === id ? e.visible : !e.visible))
    .map(e => e.column.id as string);
  localStorage.setItem('hiddenCols', JSON.stringify(next));
};