SeizenTable

High-level table component with built-in UI, pagination, and plugin slots

The SeizenTable component is the highest-level abstraction for rendering a table. It includes default UI, pagination, and automatic plugin slot rendering.

Import

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

Usage

Basic Usage

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

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

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

With Pagination Options

<SeizenTable
  table={table}
  paginate={{
    enable: true,
    sizeOptions: [10, 20, 50, 100],
  }}
/>

With Loading State (Remote Mode)

const [loading, setLoading] = useState(false);

<SeizenTable
  table={table}
  loading={loading}
  loaderComponent={<CustomSpinner />}
/>

Custom Styling

<SeizenTable table={table} className="my-custom-table" />

Props

table · SeizenTableInstance<TData> · required

The table instance from useSeizenTable.

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

className · string

Additional CSS class name for the table container.

<SeizenTable table={table} className="custom-table" />

paginate · PaginateOptions

Pagination configuration options.

Properties:

• enable?: boolean - Whether to show pagination (default: true)
• sizeOptions?: number[] - Page size options for dropdown (default: [10, 20, 50, 100])

<SeizenTable
  table={table}
  paginate={{
    enable: true,
    sizeOptions: [25, 50, 100, 200],
  }}
/>

To disable pagination:

<SeizenTable table={table} paginate={{ enable: false }} />

loading · boolean · default: "false"

Show loading overlay on the table. Useful for Remote Mode when fetching data.

const [loading, setLoading] = useState(false);

useEffect(() => {
  const unsubscribe = table.eventBus.subscribe("pagination-change", async (state) => {
    setLoading(true);
    await fetchData(state.pageIndex, state.pageSize);
    setLoading(false);
  });
  return unsubscribe;
}, []);

<SeizenTable table={table} loading={loading} />

loaderComponent · React.ReactNode

Custom loader component to display during loading state. Defaults to a built-in spinner.

<SeizenTable
  table={table}
  loading={loading}
  loaderComponent={<MyCustomSpinner size="lg" />}
/>

Compound Components

For more control over table layout and plugin slots, use compound components:

import { SeizenTable } from "@izumisy/seizen-table";
import { SeizenTablePlugins } from "@izumisy/seizen-table/plugin";

<SeizenTable.Root table={table}>
  <SeizenTablePlugins.SidePanel position="left" />
  
  <SeizenTable.Content>
    <SeizenTablePlugins.Header />
    
    <SeizenTable.Table before={<SeizenTable.Loader loading={loading} />}>
      <SeizenTable.Header />
      <SeizenTable.Body />
    </SeizenTable.Table>
    
    <SeizenTablePlugins.Footer />
    <SeizenTable.Paginator sizeOptions={[10, 20, 50]} />
  </SeizenTable.Content>
  
  <SeizenTablePlugins.SidePanel position="right" />
</SeizenTable.Root>

Available Compound Components

SeizenTable.Root

Root container providing table context to all child components.

Props:

• table: SeizenTableInstance<TData> (required)
• className?: string
• children: React.ReactNode

SeizenTable.Content

Main content area container (excludes side panels).

Props:

• children: React.ReactNode

SeizenTable.Table

The actual <table> element.

Props:

• before?: React.ReactNode - Content to render before the table (e.g., loading overlay)
• after?: React.ReactNode - Content to render after the table
• children: React.ReactNode

SeizenTable.Header

Table header (<thead>) with column headers.

Automatically renders:

• Column headers
• Sort indicators
• Context menu triggers
• Plugin cell slots in header

SeizenTable.Body

Table body (<tbody>) with data rows.

Automatically renders:

• Data rows
• Row selection
• Plugin inline row slots
• Plugin cell slots

SeizenTable.Row

Individual table row (<tr>). Usually not needed - Body renders rows automatically.

Props:

• row: Row<TData> - TanStack Table row object

SeizenTable.Cell

Individual table cell (<td>). Usually not needed - Row renders cells automatically.

Props:

• cell: Cell<TData, unknown> - TanStack Table cell object

SeizenTable.Paginator

Pagination controls. See Paginator for details.

Props:

• table: SeizenTableInstance<TData> (required when used standalone)
• sizeOptions?: number[]
• showPageSizeSelector?: boolean
• showPageInfo?: boolean

SeizenTable.Loader

Loading overlay component for composable UI.

Props:

• loading?: boolean (default: true)
• children?: React.ReactNode - Custom loader component

Usage:

<SeizenTable.Table before={<SeizenTable.Loader loading={isLoading} />}>
  <SeizenTable.Header />
  <SeizenTable.Body />
</SeizenTable.Table>

Plugin Slots

When using <SeizenTable>, all plugin slots are automatically rendered:

• Side Panels (left/right) - SeizenTablePlugins.SidePanel
• Header Slot - SeizenTablePlugins.Header
• Footer Slot - SeizenTablePlugins.Footer
• Inline Row Slots - Rendered between table rows
• Cell Slots - Rendered in table cells

For custom layouts, use compound components to position plugin slots manually.

See Plugin System for details.

Styling

Seizen Table uses CSS Variables for theming. Override these in your stylesheet:

:root {
  /* Table colors */
  --seizen-table-bg: #ffffff;
  --seizen-table-border: #e5e7eb;
  --seizen-table-header-bg: #f9fafb;
  --seizen-table-row-hover: #f3f4f6;
  --seizen-table-row-selected: #dbeafe;
  
  /* Text colors */
  --seizen-table-text: #111827;
  --seizen-table-text-secondary: #6b7280;
  
  /* Borders */
  --seizen-table-border-radius: 8px;
  
  /* Spacing */
  --seizen-table-cell-padding: 12px 16px;
}

See Theming for the complete list of CSS variables.

Type Parameters

TData · generic

The type of your row data, inherited from the table instance.

interface User {
  id: number;
  name: string;
}

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

// TData is automatically inferred
<SeizenTable table={table} />

Related Types

See Core Types for:

• SeizenTableProps<TData>
• PaginateOptions
• LoaderProps
• Component props for compound components

Examples

Basic Table

Simple table with default settings

Remote Data

Server-side pagination with loading states

Custom Layout

Using compound components for custom layouts

Theming

Customizing table appearance with CSS variables