Skip to content

Column Control

SeizenTable supports column visibility management and multi-column sorting through the ColumnControlPlugin from @izumisy/seizen-table-plugins.

Try It

Click the columns icon in the side panel to toggle column visibility and manage sorting.

Installation

npm
pnpm

npm install @izumisy/seizen-table-plugins

pnpm add @izumisy/seizen-table-plugins

Basic Usage

import { useSeizenTable, SeizenTable } from "@izumisy/seizen-table";
import { ColumnControlPlugin } from "@izumisy/seizen-table-plugins/column-control";

function MyTable() {
  const table = useSeizenTable({
    data,
    columns,
    plugins: [ColumnControlPlugin.configure({ width: 280 })],
  });

  return <SeizenTable table={table} />;
}

Features

Visibility Tab

Toggle visibility - Show/hide columns with checkboxes
Search - Quickly find columns by name
Drag & drop - Reorder columns by dragging

Sorter Tab

Multi-column sorting - Sort by multiple columns with priority
Direction toggle - Switch between ascending/descending
Drag & drop - Change sort priority order

Right-click on a column header to access quick actions:

Action	Description
Hide column	Hide the clicked column
Sort ascending	Sort by this column (A→Z, 1→9)
Sort descending	Sort by this column (Z→A, 9→1)
Clear sort	Remove sorting for this column

Configuration Options

Option	Type	Default	Description
`width`	`number`	`280`	Width of the side panel