headerCell

This component renders the header cells of the table.

Props

The header cell renderer receives the following props:

  • children - The children of the header cell renderer.
  • props - The props passed to the header cell renderer.

Preview

Name
Email
Stance
Touhatouha@example.commongo
Sadmansadman@example.comgoofy
Otaku Devotakudev@example.commongo
Tonytonny@example.comgoofy
Rodneyrodney@example.comgoofy
Kareemkareem@example.commongo
Ericbob@example.commongo
Bambam@example.comgoofy
Nyjahnyjah@example.comgoofy
Andrewandrew@example.commongo
Page
1 of 2

Code

<Table
  columns={columns}
  data={data}
  renders={{
    headerCell: ({ children, props }) => (
      <th
        {...props}
        className="border-collapse border px-4 pb-3.5 pt-10 text-left text-sm font-bold tracking-wide"
      >
        {children}
      </th>
    ),
  }}
/>
<Table
  columns={columns}
  data={data}
  renders={{
    headerCell: ({ children, props }) => (
      <th
        {...props}
        className="border-collapse border px-4 pb-3.5 pt-10 text-left text-sm font-bold tracking-wide"
      >
        {children}
      </th>
    ),
  }}
/>
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>[]
Header RowHeader Row pageFilter InputFilter Input page