Introduction to Seizen Table

A rich, enterprise-grade Table component for React, powered by TanStack Table

Seizen Table

A rich, enterprise-grade Table component for React, powered by TanStack Table.

Seizen Table provides everything you need to build powerful data tables with minimal code. From simple data displays to complex enterprise applications with filtering, sorting, pagination, and custom plugins.

Why Seizen Table?

CSS Variables Theming

Customize appearance by simply defining CSS variables. No complex styling configuration needed.

TypeScript First

Full type safety out of the box with comprehensive TypeScript support.

Data Adapters

Connect to Supabase, Firestore, Hasura, and more with zero boilerplate.

Plugin System

Add search panels, side panels, column customization with a single line.

Built-in Pagination

Both offset-based and cursor-based pagination supported out of the box.

Event Bus

Subscribe to table events and plugin-defined custom events with full type safety.

Key Features

The Hook + Component Pattern

Seizen Table uses a unique pattern where useSeizenTable and SeizenTable work together:

function App() {
  const table = useSeizenTable({ data, columns });
  return <SeizenTable table={table} />;
}

This pattern provides:

• Full control - Access table state and methods from the hook
• Flexibility - Trigger actions from outside the table component
• Composability - Share table instance across multiple components

Enterprise-Ready

Built for serious applications that need:

• Row selection with bulk actions
• Advanced filtering and sorting
• Custom cell rendering
• Remote data integration
• Plugin extensibility
• Event-driven architecture

Quick Example

Here’s a complete working table in just a few lines:

import { useSeizenTable, SeizenTable, type ColumnDef } from "@izumisy/seizen-table";
import "@izumisy/seizen-table/styles.css";

type Person = {
  name: string;
  age: number;
  email: string;
};

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

const data: Person[] = [
  { name: "John Doe", age: 30, email: "[e-mail]" },
  { name: "Jane Smith", age: 25, email: "[e-mail]" },
];

function App() {
  const table = useSeizenTable({ data, columns });
  return <SeizenTable table={table} />;
}

Next Steps

Installation

Install Seizen Table and get your environment set up

Quick Start

Build your first table in under 5 minutes