Plugin System

Extend SeizenTable with powerful pre-built features using the plugin system

Plugins are modular components that extend SeizenTable with advanced features like filtering, column controls, data export, and more. Each plugin is configured through the plugins array when initializing the table.

Installation

Plugins are available in a separate package:

npm install @izumisy/seizen-table-plugins
# or
pnpm add @izumisy/seizen-table-plugins

Basic Usage

Plugins are added to your table by passing them to the plugins option in useSeizenTable:

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

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

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

Available Plugins

FilterPlugin

Advanced column filtering with type-aware operators in a side panel

ColumnControlPlugin

Column visibility controls and multi-column sorting

FileExportPlugin

Export table data to CSV, JSONL, TSV, and custom formats

RowDetailPlugin

Display detailed row information in a side panel

useRemoteData

Hook for managing remote data fetching with pagination and sorting

PresetFilterPlugin

Quick filter buttons and global search in the table header

Plugin Configuration

Each plugin has its own configuration options passed through the .configure() method:

FilterPlugin.configure({
  width: 320,
  disableGlobalSearch: false,
})

Interacting with Plugins

Plugins can be controlled programmatically using the table.plugin API:

// Open a plugin's side panel
table.plugin.open("filter");

// Close a plugin's side panel
table.plugin.close("filter");

// Open with data (e.g., RowDetailPlugin)
table.plugin.open("row-detail", { row: selectedRow });

Plugin Events

Plugins can emit custom events that you can subscribe to using useSeizenTableEvent:

import { useSeizenTableEvent } from "@izumisy/seizen-table";

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

  // Open row detail panel when a row is clicked
  useSeizenTableEvent(table, "row-click", (row) => {
    table.plugin.open("row-detail", { row });
  });

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

Multiple Plugins

You can use multiple plugins together. They will render in the order they are configured:

const table = useSeizenTable({
  data,
  columns,
  plugins: [
    PresetFilterPlugin.configure({
      presets: [
        { id: "active", label: "Active", filters: [...] },
      ],
    }),
    FilterPlugin.configure({ width: 320 }),
    ColumnControlPlugin.configure({ width: 280 }),
    FileExportPlugin.configure({
      filename: "export",
      exporters: [CsvExporter, JsonlExporter],
    }),
    RowDetailPlugin.configure({ width: 350 }),
  ],
});

Creating Custom Plugins

You can create your own plugins to extend SeizenTable with custom functionality. See the Plugin Development guide for details.