bodyRow

This component renders the body rows of the table.

Props

The body row renderer receives the following props:

children - The children of the footer renderer.
footerGroups - Similar to the array of header group but for the footer.

Preview

Name	Email	Stance
Touha	touha@example.com	mongo
Sadman	sadman@example.com	goofy
Otaku Dev	otakudev@example.com	mongo
Tony	tonny@example.com	goofy
Rodney	rodney@example.com	goofy
Kareem	kareem@example.com	mongo
Eric	bob@example.com	mongo
Bam	bam@example.com	goofy
Nyjah	nyjah@example.com	goofy
Andrew	andrew@example.com	mongo

Page

1 of 2| Go to page:

Code

<Table
  columns={columns}
  data={data}
  renders={{
    bodyRow: ({ children, row }) => (
      <tr
        onClick={() =>
          toast.success(
            `You clicked on ${row.getValue<
              (typeof columns)[number]["accessorKey"]
            >("name")}`
          )
        }
        className="cursor-pointer border-b border-neutral-500"
      >
        {children}
      </tr>
    ),
  }}
/>

<Table
  columns={columns}
  data={data}
  renders={{
    bodyRow: ({ children, row }) => (
      <tr
        onClick={() =>
          toast.success(
            `You clicked on ${row.getValue<
              (typeof columns)[number]["accessorKey"]
            >("name")}`
          )
        }
        className="cursor-pointer border-b border-neutral-500"
      >
        {children}
      </tr>
    ),
  }}
/>

Data

type Data = {
  name: string
  email: string
  stance: "mongo" | "goofy"
}
 
const [data, setData] = React.useState<Data[]>([
  { name: "Touha", email: "touha@example.com", stance: "mongo" },
  { name: "Sadman", email: "sadman@example.com", stance: "goofy" },
  { name: "Otaku Dev", email: "otakudev@example.com", stance: "mongo" },
  {
    name: "Tony",
    email: "tonny@example.com",
    stance: "goofy",
  },
  {
    name: "Rodney",
    email: "rodney@example.com",
    stance: "goofy",
  },
  {
    name: "Kareem",
    email: "kareem@example.com",
    stance: "mongo",
  },
  {
    name: "Eric",
    email: "bob@example.com",
    stance: "mongo",
  },
  {
    name: "Bam",
    email: "bam@example.com",
    stance: "goofy",
  },
  {
    name: "Nyjah",
    email: "nyjah@example.com",
    stance: "goofy",
  },
  {
    name: "Andrew",
    email: "andrew@example.com",
    stance: "mongo",
  },
  {
    name: "Lizzie",
    email: "lizzie@example.com",
    stance: "goofy",
  },
  { name: "Leticia", email: "leticia@example.com", stance: "goofy" },
])

type Data = {
  name: string
  email: string
  stance: "mongo" | "goofy"
}
 
const [data, setData] = React.useState<Data[]>([
  { name: "Touha", email: "touha@example.com", stance: "mongo" },
  { name: "Sadman", email: "sadman@example.com", stance: "goofy" },
  { name: "Otaku Dev", email: "otakudev@example.com", stance: "mongo" },
  {
    name: "Tony",
    email: "tonny@example.com",
    stance: "goofy",
  },
  {
    name: "Rodney",
    email: "rodney@example.com",
    stance: "goofy",
  },
  {
    name: "Kareem",
    email: "kareem@example.com",
    stance: "mongo",
  },
  {
    name: "Eric",
    email: "bob@example.com",
    stance: "mongo",
  },
  {
    name: "Bam",
    email: "bam@example.com",
    stance: "goofy",
  },
  {
    name: "Nyjah",
    email: "nyjah@example.com",
    stance: "goofy",
  },
  {
    name: "Andrew",
    email: "andrew@example.com",
    stance: "mongo",
  },
  {
    name: "Lizzie",
    email: "lizzie@example.com",
    stance: "goofy",
  },
  { name: "Leticia", email: "leticia@example.com", stance: "goofy" },
])

Columns

const columns = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "stance", header: "Stance" },
] satisfies ColumnDef<Data, unknown>[]

const columns = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "stance", header: "Stance" },
] satisfies ColumnDef<Data, unknown>[]

Body Body Cell