Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/IzumiSy/seizen-table/llms.txt

Use this file to discover all available pages before exploring further.

​
Quick Start

This guide will help you create your first Seizen Table in just a few minutes.

​
Basic Table

Let’s start with a simple table displaying user data.
1

Import the essentials

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

Define your data type

Create a TypeScript type for your data:
type Person = {
  name: string;
  age: number;
  email: string;
};
3

Configure columns

Define the columns for your table:
const columns: ColumnDef<Person>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "age", header: "Age" },
  { accessorKey: "email", header: "Email" },
];
4

Prepare your data

Create sample data:
const data: Person[] = [
  { 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" },
];
5

Create the table

Use the useSeizenTable hook and render with SeizenTable:
function App() {
  const table = useSeizenTable({ data, columns });
  
  return <SeizenTable table={table} />;
}

​
Complete Example

Here’s the full working code:
App.tsx
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: "john@example.com" },
  { name: "Jane Smith", age: 25, email: "jane@example.com" },
  { name: "Bob Wilson", age: 35, email: "bob@example.com" },
];

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

export default App;

​
Accessing Table State

The hook pattern gives you full access to table state and methods. Here’s how to add bulk actions: 
function UsersPage() {
  const table = useSeizenTable({
    data,
    columns,
  });

  const handleBulkDelete = () => {
    const selectedRows = table.getSelectedRows();
    console.log("Deleting:", selectedRows);
    // deleteUsers(selectedRows);
    table.clearSelection();
  };

  const handleExport = () => {
    const currentFilter = table.getFilterState();
    console.log("Exporting with filter:", currentFilter);
    // exportWithFilter(currentFilter);
  };

  return (
    <div>
      <div className="toolbar">
        <button onClick={handleBulkDelete}>Delete Selected</button>
        <button onClick={handleExport}>Export</button>
        <span>{table.getSelectedRows().length} selected</span>
      </div>
      <SeizenTable table={table} />
    </div>
  );
}

​
Adding Plugins

Extend your table with plugins for additional features: 
import { useSeizenTable, SeizenTable } from "@izumisy/seizen-table";
import { RowDetailPlugin } from "@izumisy/seizen-table-plugins/row-detail";

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

  return <SeizenTable table={table} />;
}
Plugins are optional packages. Install @izumisy/seizen-table-plugins to use them.

​
Listening to Events

Subscribe to table events using useSeizenTableEvent: 
import { useSeizenTable, SeizenTable, useSeizenTableEvent } from "@izumisy/seizen-table";

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

  // Subscribe to row clicks
  useSeizenTableEvent(table, "row-click", (row) => {
    console.log("Row clicked:", row);
  });

  // Subscribe to selection changes
  useSeizenTableEvent(table, "selection-change", (selectedRows) => {
    console.log("Selection changed:", selectedRows.length, "rows selected");
  });

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

​
Available Events

Seizen Table emits these built-in events:
  • data-change - Table data changes
  • selection-change - Row selection changes
  • filter-change - Column filters change
  • sorting-change - Sorting changes
  • pagination-change - Pagination changes
  • row-click - Table row is clicked

​
Next Steps

Now that you have a working table, explore more features:

Theming

Customize appearance with CSS variables

Pagination

Add pagination to your table

Remote Data

Connect to external data sources

Plugins

Explore available plugins

Build docs developers (and LLMs) love

Get started for freeTalk to us