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.

​
Overview

The SeizenTable component provides a high-level, all-in-one table UI with built-in pagination, loading states, and plugin support. It uses semantic HTML table elements styled with CSS Variables.

​
Basic Usage

import { useSeizenTable, SeizenTable, type ColumnDef } from '@izumisy/seizen-table';

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' },
];

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

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

​
Props

​
table
SeizenTableInstance<TData>
required
The table instance from useSeizenTable
​
className
string
Additional CSS class name for the table container
​
paginate
PaginateOptions
Pagination configuration
​
paginate.enable
boolean
default:"true"
Whether to enable pagination
​
paginate.sizeOptions
number[]
default:"[10, 20, 50, 100]"
Page size options to display in the paginator dropdown
​
loading
boolean
default:"false"
Show loading overlay on the table. Useful for Remote Mode when fetching data.
​
loaderComponent
React.ReactNode
Custom loader component. Defaults to a built-in spinner.

​
Pagination

Pagination is enabled by default. To disable it: 
<SeizenTable table={table} paginate={{ enable: false }} />
Customize page size options: 
<SeizenTable 
  table={table} 
  paginate={{ sizeOptions: [25, 50, 100, 250] }} 
/>

​
Loading State

Show a loading overlay when fetching data: 
function RemoteTable() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

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

  return <SeizenTable table={table} loading={loading} />;
}
With a custom loader: 
<SeizenTable 
  table={table} 
  loading={isLoading}
  loaderComponent={<MySpinner size="lg" />}
/>

​
Compound Components

For more control over the table layout, use compound components: 
import { SeizenTable, SeizenTablePlugins } from '@izumisy/seizen-table';

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

  return (
    <SeizenTable.Root table={table}>
      <SeizenTablePlugins.SidePanel position="left" />
      <SeizenTable.Content>
        <SeizenTablePlugins.Header />
        <SeizenTable.Table>
          <SeizenTable.Header />
          <SeizenTable.Body />
        </SeizenTable.Table>
        <SeizenTablePlugins.Footer />
        <SeizenTable.Paginator />
      </SeizenTable.Content>
      <SeizenTablePlugins.SidePanel position="right" />
    </SeizenTable.Root>
  );
}

​
Available Compound Components

​
SeizenTable.Root
Component
Root container that provides table context
​
SeizenTable.Content
Component
Main content container for table and pagination
​
SeizenTable.Table
Component
The actual <table> element wrapper
​
SeizenTable.Header
Component
Table header (<thead>) with column headers
​
SeizenTable.Body
Component
Table body (<tbody>) with data rows
​
SeizenTable.Row
Component
Individual table row component
​
SeizenTable.Cell
Component
Individual table cell component
​
SeizenTable.Paginator
Component
Pagination controls
​
SeizenTable.Loader
Component
Loading overlay component

​
Custom Loader Component

The Loader component can be used in Composable UI mode: 
<SeizenTable.Table before={<SeizenTable.Loader loading={isLoading} />}>
  <SeizenTable.Header />
  <SeizenTable.Body />
</SeizenTable.Table>
With custom loader content: 
<SeizenTable.Loader loading={isLoading}>
  <div className="custom-spinner">
    <LoadingAnimation />
  </div>
</SeizenTable.Loader>

​
Plugin UI Slots

Use SeizenTablePlugins components to render plugin-provided UI:
  • SeizenTablePlugins.SidePanel - Side panels (left/right)
  • SeizenTablePlugins.Header - Header area above table
  • SeizenTablePlugins.Footer - Footer area below table
  • SeizenTablePlugins.InlineRow - Expandable row content
  • SeizenTablePlugins.Cell - Custom cell overlays
See the Plugin System documentation for more details.

​
Pattern: Hook + Component

Seizen Table follows a hook + component pattern: 
function UsersPage() {
  // 1. Create table instance with the hook
  const table = useSeizenTable({
    data: users,
    columns,
    plugins: [FilterPlugin.configure()],
  });

  // 2. Access table state and methods
  const handleDelete = () => {
    const selected = table.getSelectedRows();
    deleteUsers(selected);
    table.clearSelection();
  };

  // 3. Render with the component
  return (
    <div>
      <button onClick={handleDelete}>Delete Selected</button>
      <SeizenTable table={table} />
    </div>
  );
}
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
The SeizenTable component is the highest-level abstraction. For maximum control, use compound components or access the TanStack Table instance directly via table._tanstackTable.

Build docs developers (and LLMs) love

Get started for freeTalk to us