Defining a Sub Component in React TanStack Table

This example demonstrates how to define a sub component for a specific row in React TanStack Table to display more detailed information about an item when the row is expanded.
import { useExpanded, useTable } from '@tanstack/react-table';
First, import the necessary hooks from '@tanstack/react-table' to manage table state and row expansion.
const table = useTable(
    getSubRows: (row) => row.subRows,
  useExpanded // Use the useExpanded plugin hook
Initialize the table instance with 'useTable' and configure it to handle sub-rows by specifying the 'getSubRows' option. Additionally, use the 'useExpanded' plugin to enable row expansion functionality.
// Custom toggle component
const SubRowToggle = ({ row }) => (
    {row.isExpanded ? '-' : '+'}
Define a 'SubRowToggle' component that uses 'row.getToggleRowExpandedProps()' to manage the expanded state. It displays '+' or '-' based on whether the row is expanded.
{table.getRowModel() => (
  <React.Fragment key={}>
        <SubRowToggle row={row} />
      {row.getVisibleCells().map(cell => (
        <td key={}>{cell.renderCell()}</td>
    {row.isExpanded ? (
        <td colSpan={row.cells.length}>SubComponent Content Here</td>
    ) : null}
Render each row with the 'SubRowToggle' component. When a row is expanded, a new table row is added below it to display more detailed information or sub-components.