footer
This component renders the footer of the table.
Prerequisites: You need to enable the showFooter prop of the table to render the footer.
Learn more about showFooter.
Props
The footer 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 |
| Name | Stance |
Page
1 of 2Code
<Table
columns={columns}
data={data}
// Renders the footer
showFooter={true}
renders={{
footer: ({ children, footerGroups }) => (
<tfoot className="text-left">{children}</tfoot>
),
}}
/><Table
columns={columns}
data={data}
// Renders the footer
showFooter={true}
renders={{
footer: ({ children, footerGroups }) => (
<tfoot className="text-left">{children}</tfoot>
),
}}
/>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", footer: 'Name' },
{ accessorKey: "email", header: "Email", footer: 'Email' },
{ accessorKey: "stance", header: "Stance", footer: 'Stance' },
] satisfies ColumnDef<Data, unknown>[]const columns = [
{ accessorKey: "name", header: "Name", footer: 'Name' },
{ accessorKey: "email", header: "Email", footer: 'Email' },
{ accessorKey: "stance", header: "Stance", footer: 'Stance' },
] satisfies ColumnDef<Data, unknown>[]