ColumnsButton

Lets the user choose the visible columns in a <DataTable>, and reorder them.

Installation

pnpm dlx shadcn@latest add @shadmin/columns-button

Usage

Use it in conjunction with a <DataTable> inside a <List>:

import {
  List,
  DataTable,
  EditButton,
  CreateButton,
  ExportButton,
  ColumnsButton,
} from "@/components/admin";
 
const PostsList = () => (
  <List
    actions={
      <>
        <ColumnsButton />
        <CreateButton />
        <ExportButton />
      </>
    }
  >
    <DataTable>
      <DataTable.Col source="title" />
      <DataTable.Col source="body" />
      <DataTable.Col source="updated_at" />
      <EditButton />
    </DataTable>
  </List>
);

It persists the user choices in the Store (usually in localStorage).

If yoa page has multiple <DataTable> components, use the storeKey prop to associate each button with its data table:

<List
  actions={
    <>
      <ColumnsButton storeKey="posts-list" />
      <CreateButton />
      <ExportButton />
    </>
  }
>
  <DataTable storeKey="posts-list">...</DataTable>
</List>

Props

Prop	Required	Type	Default	Description
`icon`	Optional	`ReactNode`	Columns icon	Custom icon
`label`	Optional	`string`	`ra.action.columns`	Button label key
`resource`	Optional	`string`	inferred	Resource name for i18n
`storeKey`	Optional	`string`	-	Key for persisted column visibility state