Installation

Installation

npm

npm install @izumisy/seizen-table

pnpm

pnpm add @izumisy/seizen-table

yarn

yarn add @izumisy/seizen-table

Quick Start

Here’s a basic SeizenTable in action:

import { useSeizenTable, SeizenTable } from "@izumisy/seizen-table";

const columns = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "age", header: "Age" },
  { accessorKey: "email", header: "Email" },
];

const data = [
  { name: "John Doe", age: 30, email: "john@example.com" },
  { name: "Jane Smith", age: 25, email: "jane@example.com" },
  { name: "Bob Wilson", age: 35, email: "bob@example.com" },
];

function BasicDemo() {
  const table = useSeizenTable({ data, columns });

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

Enable Features

Seizen Table follows a plugin-first architecture — all features, including official ones, are provided as plugins. This keeps the core lightweight while allowing you to add only what you need.

import { useSeizenTable, SeizenTable } from "@izumisy/seizen-table";
import { RowDetail } from "@izumisy/seizen-table-plugins/row-detail";
import { Filter } from "@izumisy/seizen-table-plugins/filter";

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

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

Official Plugins

Plugin	Description
Row Detail	Expandable panel to show detailed row information
Filtering	Build complex filters with an intuitive UI
Column Control	Toggle column visibility and reorder columns
Data Export	Export table data to CSV, JSON, and more

Learn more about the Plugin System to create your own custom plugins.

Further Reading

• Learn about the Plugin System to add features like filtering, row details, and more
• Explore Remote Data API for connecting to external data sources