headerRow

This component renders the header rows of the table.

Props

The header row renderer receives the following props:

children - The children of the header row renderer.
headerGroup - The header group array.

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={{
    headerRow: ({ children, headerGroup }) => <tr>{children}</tr>,
  }}
/>

<Table
  columns={columns}
  data={data}
  renders={{
    headerRow: ({ children, headerGroup }) => <tr>{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>[]

Header Header Cell