column-visibility

Users can customize the visibility of columns in their tables. The default visibility of columns is determined by the column configuration, with the defaultHidden key.

When a user hides or shows columns, their preferences are saved in local storage so that the next time they visit the table, their custom column visibility choices are preserved.

Hide Columns by Default

You can hide specific columns by default by setting the defaultHidden key to true in the column definition.

const columns: Columns<Cat> = [
  {
    header: 'Name',
    accessorKey: 'name',
  },
  {
    accessorKey: 'sex',
    defaultHidden: true,
    header: 'Sex',
  },
]

In the Kitchen Sink example, there are multiple columns that are hidden by default, including sex like shown above.