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.

Seizen Table gives you complete control over how your table is rendered. While the default SeizenTable component works great for most use cases, you can access the underlying TanStack Table instance for full customization.

​
When to Use Custom Rendering

Consider custom rendering when you need:
  • Custom table markup or structure
  • Integration with existing component libraries
  • Complete control over styling and layout
  • Special row or cell rendering logic
  • Advanced accessibility features

​
Accessing the TanStack Table Instance

The useSeizenTable hook returns a wrapped table instance with a _tanstackTable property that exposes the underlying TanStack Table. 
const table = useSeizenTable({ data, columns });
const tanstack = table._tanstackTable;
The _tanstackTable property is prefixed with an underscore to indicate it’s an internal API. While stable, use it when you need direct access to TanStack Table features.

​
Complete Custom Table Example

Here’s a full example showing how to render a custom table using flexRender and the TanStack Table API: 
import { useSeizenTable, flexRender, type ColumnDef } from "@izumisy/seizen-table";

function CustomTable<TData>({ data, columns }: { data: TData[]; columns: ColumnDef<TData>[] }) {
  const table = useSeizenTable({ data, columns });
  const tanstack = table._tanstackTable;

  return (
    <table>
      <thead>
        {tanstack.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {tanstack.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

​
Understanding flexRender

The flexRender utility is imported from @izumisy/seizen-table and handles rendering cell/header content that can be:
  • A React component
  • A render function
  • A string or primitive value
flexRender(contentToRender, context)
1

Import flexRender

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

Use in header cells

flexRender(header.column.columnDef.header, header.getContext())
3

Use in body cells

flexRender(cell.column.columnDef.cell, cell.getContext())

​
Key TanStack Table Methods

When working with custom rendering, you’ll commonly use these methods:

​
Header Rendering

tanstack.getHeaderGroups()
Returns an array of header groups. Each header group contains headers for that row of the table header.

​
Row Rendering

tanstack.getRowModel().rows
Returns the current row model based on filtering, sorting, and pagination state.

​
Cell Access

row.getVisibleCells()
Returns all visible cells for a row, respecting column visibility settings.

​
Advanced Example: Custom Row Styling

Here’s an example with custom row highlighting based on data: 
function HighlightedTable<TData extends { status: string }>({
  data,
  columns,
}: {
  data: TData[];
  columns: ColumnDef<TData>[];
}) {
  const table = useSeizenTable({ data, columns });
  const tanstack = table._tanstackTable;

  return (
    <table>
      <thead>
        {tanstack.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {tanstack.getRowModel().rows.map((row) => (
          <tr
            key={row.id}
            className={row.original.status === "error" ? "bg-red-50" : ""}
          >
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

​
Combining with Plugins

Custom rendering works alongside the plugin system. You can still use table.render() or access plugin state: 
import { RowDetailPlugin } from "@izumisy/seizen-table-plugins/row-detail";

function CustomTableWithPlugins<TData>({
  data,
  columns,
}: {
  data: TData[];
  columns: ColumnDef<TData>[];
}) {
  const table = useSeizenTable({
    data,
    columns,
    plugins: [
      RowDetailPlugin.configure({ width: 350 }),
    ],
  });
  const tanstack = table._tanstackTable;

  return (
    <div>
      {/* Custom table rendering */}
      <table>
        {/* ... custom table markup ... */}
      </table>
      
      {/* Plugin UI still works */}
      {table.render()}
    </div>
  );
}
When using custom rendering, you’re responsible for:
  • Proper key attributes on mapped elements
  • Handling placeholder headers
  • Applying correct column and row IDs
  • Maintaining accessibility attributes

​
Next Steps

Plugin Development

Learn how to create custom plugins

Data Adapters

Connect to backend data sources

Build docs developers (and LLMs) love

Get started for freeTalk to us