useSeizenTable

The useSeizenTable hook is the foundation of Seizen Table. It creates a table instance with state management, plugin support, and event handling.

Import

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

Usage

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

interface User {
  name: string;
  age: number;
  email: string;
}

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

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

function MyTable() {
  const table = useSeizenTable({
    data,
    columns,
    plugins: [],
    enableMultiSelect: true,
  });

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

Options

data

TData[]

required

Array of row data to display in the table.

columns

SeizenTableColumn<TData>[]

required

Column definitions using TanStack Table’s ColumnDef type. Each column can have:

accessorKey: Key to access data in the row object
header: Column header text or component
cell: Custom cell renderer
id: Unique column identifier (auto-generated if not provided)
See TanStack Table Column Def for all options

plugins

SeizenTablePlugin<any>[]

default:"[]"

Array of plugins to extend table functionality. Plugins can add:

UI slots (side panels, headers, footers, inline rows, cells)
Context menu items
Event listeners
Custom behaviors

See the Plugin Development guide for details.

initialSelection

RowSelectionState

default:"{}"

Initial row selection state. Format: { [rowIndex: number]: boolean }

initialSelection={{ 0: true, 2: true }} // Select first and third rows

enableMultiSelect

boolean

default:"true"

Enable multi-row selection. When false, only one row can be selected at a time.

remote

boolean | RemoteOptions

default:"false"

Enable Remote Mode for server-side filtering, sorting, and pagination.When enabled:

Internal filtering/sorting/pagination is disabled
data is expected to be pre-processed by your server
State change methods (setFilter, setSorting, etc.) emit events AND update internal state
Use with eventBus to listen for state changes and fetch new data

Options:

true - Enable without pagination support (e.g., cursor pagination)
{ totalRowCount: number } - Enable with pagination (required for page count calculation)

// With pagination
const table = useSeizenTable({
  data,
  columns,
  remote: { totalRowCount: 1000 },
});

// Listen for pagination changes
table.eventBus.subscribe("pagination-change", (state) => {
  fetchData(state.pageIndex, state.pageSize);
});

See RemotePlugin for more details.

Return Value

Returns a SeizenTableInstance<TData> with methods to control the table.

Selection Methods

getSelectedRows

() => TData[]

Get array of currently selected row data.

const selectedRows = table.getSelectedRows();
console.log("Selected:", selectedRows);

setSelectedRows

(rows: TData[]) => void

Programmatically select specific rows.

table.setSelectedRows([data[0], data[2]]); // Select first and third rows

clearSelection

() => void

Clear all row selections.

table.clearSelection();

Filtering Methods

getFilterState

() => ColumnFiltersState

Get current column filter state.Returns array: [{ id: string, value: unknown }]

setFilter

(filter: ColumnFiltersState) => void

Set column filters programmatically.

table.setFilter([{ id: "age", value: { min: 25, max: 40 } }]);

In Remote Mode, this also emits a filter-change event.

getGlobalFilter

() => string

Get current global filter value.

setGlobalFilter

(value: string) => void

Set global filter (searches across all columns).

table.setGlobalFilter("john");

Sorting Methods

getSortingState

() => SortingState

Get current sorting state.Returns array: [{ id: string, desc: boolean }]

setSorting

(sorting: SortingState) => void

Set sorting programmatically.

table.setSorting([{ id: "age", desc: true }]); // Sort by age descending

In Remote Mode, this also emits a sorting-change event.

Pagination Methods

getPaginationState

() => PaginationState

Get current pagination state.Returns: { pageIndex: number, pageSize: number }

setPageIndex

(index: number) => void

Navigate to a specific page (0-based index).

table.setPageIndex(2); // Go to page 3

In Remote Mode, this also emits a pagination-change event.

setPageSize

(size: number) => void

Change number of rows per page.

table.setPageSize(50); // Show 50 rows per page

In Remote Mode, this also emits a pagination-change event.

Data Methods

getData

() => TData[]

Get current table data.

getColumns

() => SeizenTableColumn<TData>[]

Get column definitions.

Column Visibility Methods

getColumnVisibility

() => VisibilityState

Get column visibility state.Returns object: { [columnId: string]: boolean } where true means visible.

setColumnVisibility

(visibility: VisibilityState) => void

Set column visibility state.

table.setColumnVisibility({ email: false }); // Hide email column

toggleColumnVisibility

(columnId: string) => void

Toggle visibility of a specific column.

table.toggleColumnVisibility("email");

Column Order Methods

getColumnOrder

() => ColumnOrderState

Get current column order.Returns array of column IDs: string[]

setColumnOrder

(order: ColumnOrderState) => void

Set column order.

table.setColumnOrder(["email", "name", "age"]);

moveColumn

(columnId: string, toIndex: number) => void

Move a column to a new position.

table.moveColumn("email", 0); // Move email to first position

Plugin Properties

plugins

SeizenTablePlugin<any>[]

Array of registered plugins.

plugin

PluginControl

Plugin control interface for opening/closing plugins.

table.plugin.open("my-plugin", { row: data[0] }); // Open plugin
table.plugin.close(); // Close plugin
table.plugin.isOpen("my-plugin"); // Check if plugin is open
table.plugin.getActiveId(); // Get currently open plugin ID

eventBus

EventBus

Event bus for plugin communication and Remote Mode.Built-in events:

data-change: Emitted when table data changes
selection-change: Emitted when row selection changes
filter-change: Emitted when filters change (Remote Mode)
sorting-change: Emitted when sorting changes (Remote Mode)
pagination-change: Emitted when pagination changes (Remote Mode)
row-click: Emitted when a row is clicked
cell-context-menu: Emitted when cell context menu opens
column-context-menu: Emitted when column header context menu opens

// Subscribe to events
table.eventBus.subscribe("selection-change", (selectedRows) => {
  console.log("Selection changed:", selectedRows);
});

// Emit custom events
table.eventBus.emit("custom-event", { data: "value" });

remote

boolean | RemoteOptions

Remote Mode configuration.

false: Not in Remote Mode
true: Remote Mode without totalRowCount
{ totalRowCount: number }: Remote Mode with totalRowCount

Plugins can use this to adjust their behavior.

if (table.remote) {
  // Disable client-side search in Remote Mode
}

// Access totalRowCount for pagination
const total = typeof table.remote === "object" ? table.remote.totalRowCount : undefined;

Advanced

_tanstackTable

Table<TData>

The underlying TanStack Table instance. Use for advanced operations not exposed by SeizenTableInstance.

This is an internal API and may change. Use the high-level methods when possible.

Type Parameters

TData

generic

The type of your row data. Enables full TypeScript type safety throughout the table.

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

const table = useSeizenTable<User>({
  data: users,
  columns: [
    { accessorKey: "name", header: "Name" }, // ✅ Type-safe
    { accessorKey: "invalid", header: "Invalid" }, // ❌ Type error
  ],
});

const selected: User[] = table.getSelectedRows(); // ✅ Typed as User[]

See Core Types for:

SeizenTableColumn<TData>
SeizenTableInstance<TData>
UseSeizenTableOptions<TData>
RemoteOptions
RowSelectionState
ColumnFiltersState
SortingState
PaginationState
VisibilityState
ColumnOrderState

Core API

Plugin API

Import

Usage

Options

Return Value

Selection Methods

Filtering Methods

Sorting Methods

Data Methods

Column Visibility Methods

Column Order Methods

Plugin Properties

Advanced

Type Parameters

Build docs developers (and LLMs) love

Core API

Plugin API

Documentation Index

​Import

​Usage

​Options

​Return Value

​Selection Methods

​Filtering Methods

​Sorting Methods

​Pagination Methods

​Data Methods

​Column Visibility Methods

​Column Order Methods

​Plugin Properties

​Advanced

​Type Parameters

​Related Types

Build docs developers (and LLMs) love

Import

Usage

Options

Return Value

Selection Methods

Filtering Methods

Sorting Methods

Pagination Methods

Data Methods

Column Visibility Methods

Column Order Methods

Plugin Properties

Advanced

Type Parameters

Related Types