Rows

BlazeTable’s row system allows you to manage selection, actions, expansion, and dynamic behavior on a per-row basis — making it easy to handle interactive data tables.

🧾 Rendering Rows

Rows are automatically generated from your data array when using TableRoot:

const data = [
  { id: 1, name: "Alice", role: "Developer" },
  { id: 2, name: "Bob", role: "Designer" },
];

Inside your table body:

<TableBody />

This will automatically loop over the data array and render a <TableRow> for each item.

✅ Row Selection

You can enable multi or single row selection using BlazeTable’s selection plugin.

const table = useTable({
  data,
  columns,
  enableRowSelection: true,
});

In your table body:

<TableRow>
  <TableCell>
    <input type="checkbox" {...row.getToggleSelectedHandler()} />
  </TableCell>
  {/* your data cells */}
</TableRow>

BlazeTable will automatically manage the selected state.

🔽 Row Expansion

For expandable rows (useful for sub-details, nested tables, or extra context):

const table = useTable({
  data,
  columns,
  getRowCanExpand: () => true,
});

And in your table:

<TableRow>
  {row.getIsExpanded() && (
    <tr>
      <td colSpan={columns.length}>{/* Render extra content */}</td>
    </tr>
  )}
</TableRow>

⚡ Row Actions

You can define action handlers directly on row data or via UI buttons:

<TableRow>
  <TableCell>
    <Button onClick={() => handleEdit(row.original)}>Edit</Button>
  </TableCell>
</TableRow>

This allows for actions like edit, delete, or duplicate at the row level.

🎯 Conditional Row Styling

You can customize the look of rows based on their data or state:

<TableRow className={row.original.status === "inactive" ? "opacity-50" : ""}>
  {/* cells */}
</TableRow>

This makes it easy to highlight or gray-out specific rows.

🎉 Next Steps

Explore Pro Usage to learn about server-side features, real-time updates, and advanced behaviors!