bodyCell

This component renders the body cells of the table.

Props

The body cell renderer receives the following props:

children - The children of the body cell renderer.
cell - See cell.
props - The props passed to the body cell renderer.

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={{
    bodyCell: ({ cell, children, props }) => (
      <td
        {...props}
        className={cn(
          "px-4 py-2.5",
          cell.getValue() === "mongo" && "text-red-500",
          cell.getValue() === "goofy" && "text-blue-500"
        )}
      >
        {children}
      </td>
    ),
  }}
/>

<Table
  columns={columns}
  data={data}
  renders={{
    bodyCell: ({ cell, children, props }) => (
      <td
        {...props}
        className={cn(
          "px-4 py-2.5",
          cell.getValue() === "mongo" && "text-red-500",
          cell.getValue() === "goofy" && "text-blue-500"
        )}
      >
        {children}
      </td>
    ),
  }}
/>

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>[]

Utils

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 Row Footer