Skip to content
Seizen Table

Row Detail

SeizenTable supports row detail view through the RowDetailPlugin from @izumisy/seizen-table-plugins.

Try It

Section titled “Try It”

Click on any row to see its details in the side panel.

Installation

Section titled “Installation”
Terminal window
npm install @izumisy/seizen-table-plugins

Basic Usage

Section titled “Basic Usage”
import { useSeizenTable, SeizenTable, useSeizenTableEvent } from "@izumisy/seizen-table";
import { RowDetailPlugin } from "@izumisy/seizen-table-plugins/row-detail";


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


  // Open side panel when a row is clicked
  useSeizenTableEvent(table, "row-click", (row) => {
    table.plugin.open("row-detail", { row });
  });


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

How It Works

Section titled “How It Works”
  1. User clicks on a table row
  2. The row-click event is emitted
  3. Your event handler opens the row-detail plugin with the clicked row
  4. The side panel displays all fields of the row

Features

Section titled “Features”
  • Auto-update - Clicking a different row while the panel is open updates the content
  • JSON formatting - Object and array values are formatted as JSON
  • Scroll support - Long content is scrollable within the panel

Configuration Options

Section titled “Configuration Options”
OptionTypeDefaultDescription
widthnumber320Width of the side panel

Opening Programmatically

Section titled “Opening Programmatically”

You can open the row detail panel programmatically for any row:

// Open for a specific row
table.plugin.open("row-detail", { row: myRowData });


// Close the panel
table.plugin.close("row-detail");