Column visibility

Basics

The toolbar's Columns button opens a checkbox per column, plus Show all, Hide all and Reset. Past ten columns the menu grows a search box, because scanning thirty checkboxes is not a feature.

defaultHidden starts a column off, without removing it from the menu:

col.accessor('internalId', { header: 'Internal id', defaultHidden: true });
col.accessor('audit', { header: 'Audit trail', enableHiding: false });

Hiding by screen width

hideBelow and hideAbove are responsive and deliberately not state: a column hidden because the screen is narrow does not show up as unchecked in the menu, because the reader did not uncheck it.

col.accessor('city', { hideBelow: 'md' });

That is the difference between "there is no room for this" and "I do not want this".

The column actions menu

enableColumnActions adds a menu button to each header with sort, filter, group, pin, hide, autosize and reset-size entries: the per-column versions of what the toolbar offers for the whole table.

renderColumnActionsMenuItems receives the default items, so you can add one, drop one or reorder them rather than rebuilding the menu:

renderColumnActionsMenuItems={({ column, defaultItems, closeMenu }) => [
  ...defaultItems,
  <button
    key="copy"
    type="button"
    role="menuitem"
    onClick={() => {
      copy(column.id);
      closeMenu();
    }}
  >
    Copy column
  </button>,
]}

The items are React elements: the defaults are the table's own menu items, and yours sit beside them. closeMenu closes the menu once your item has done its work.

Customization

The Columns button, the menu and the header menu are all slots, and <DataTable.ColumnsButton /> places the control outside the toolbar. Visibility is a state slice, so persisting columnVisibility remembers the reader's choice.

Limitations

• A hidden column is still computed. It keeps its filter and its aggregate; hiding is presentation. Remove it from columns to stop the work.
• hideBelow cannot be overridden by the reader, by design; there is no checkbox for it.
• Hiding every column leaves an empty table rather than an error; the menu's Hide all stops one short only when a column sets enableHiding: false.

API

• DataTableProps: enableHiding, enableColumnActions, renderColumnActionsMenuItems, onColumnVisibilityChange.
• ColumnDef: defaultHidden, enableHiding, hideBelow, hideAbove, enableColumnActions, static.
• TableInstance: setColumnVisibility, resetColumnVisibility, toggleAllColumnsVisible, getIsAllColumnsVisible, getVisibleLeafColumns.
• Column: toggleVisibility, getIsVisible, getCanHide.