Table

Table is a table component equipped with column sorting, row selection, and click event features.

id	firstName	lastName	age	email
0	Anne	Rowe	45	Scottie31@gmail.com
1	Priscilla	Zieme	51	Cory.Volkman@hotmail.com
2	Jose	Schiller-Wiegand	48	Antonio50@gmail.com
3	Nick	Larkin	64	Todd.Waters@hotmail.com
4	Roslyn	Welch-Hintz	29	Latoya90@yahoo.com
5	Antwon	Heller	56	Vincent16@gmail.com
6	Blanche	Marvin	42	Herta_Pouros57@yahoo.com
7	Nigel	Johnson	51	Juliet66@hotmail.com
8	Herman	Wisoky	20	Deborah_Fadel@gmail.com
9	Eric	Quigley	59	Mathew.Wiza45@yahoo.com

interface Data {
  id: string
  age: number
  email: string
  firstName: string
  lastName: string
}

const columnHelper = createColumnHelper<Data>()

const columns = useMemo(
  () => [
    columnHelper.accessor("id", { cellProps: { numeric: true } }),
    columnHelper.accessor("firstName", { lineClamp: 1 }),
    columnHelper.accessor("lastName", { lineClamp: 1 }),
    columnHelper.accessor("age", { cellProps: { numeric: true } }),
    columnHelper.accessor("email", { lineClamp: 1 }),
  ],
  [],
)

const data = useMemo<Data[]>(
  () =>
    Array.from({ length: 10 }, (_, index) => ({
      id: index.toString(),
      age: faker.number.int({ max: 65, min: 18 }),
      email: faker.internet.email(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
    })),
  [],
)

return <Table columns={columns} data={data} withScrollArea />

Usage

import { Table } from "@yamada-ui/react"

import { Table } from "@/components/ui"

import { Table } from "@workspaces/ui"

<Table />

Table internally uses tanstack-table and NativeTable.

Change Variant

id	firstName	lastName	age	email
0	Norbert	Littel	23	Darin30@yahoo.com
1	Kaley	Walker	43	Barry43@yahoo.com
2	Braden	Jacobi	62	Orlando_Auer6@yahoo.com
3	Dewey	Carter	44	Johnnie36@yahoo.com
4	Tyrese	Schinner	65	Timothy.Zemlak@gmail.com
5	Cayla	Keebler	39	Ollie37@yahoo.com
6	Cale	Bins	50	Josie49@gmail.com
7	Brice	Kuphal	42	Irving7@hotmail.com
8	Orval	Fadel	31	Annie77@yahoo.com
9	Cora	Barton	64	Mary.Gusikowski@yahoo.com

id	firstName	lastName	age	email
0	Norbert	Littel	23	Darin30@yahoo.com
1	Kaley	Walker	43	Barry43@yahoo.com
2	Braden	Jacobi	62	Orlando_Auer6@yahoo.com
3	Dewey	Carter	44	Johnnie36@yahoo.com
4	Tyrese	Schinner	65	Timothy.Zemlak@gmail.com
5	Cayla	Keebler	39	Ollie37@yahoo.com
6	Cale	Bins	50	Josie49@gmail.com
7	Brice	Kuphal	42	Irving7@hotmail.com
8	Orval	Fadel	31	Annie77@yahoo.com
9	Cora	Barton	64	Mary.Gusikowski@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <VStack>
    <For each={["line", "outline"]}>
      {(variant, index) => (
        <Table
          key={index}
          variant={variant}
          columns={columns}
          data={data}
          withScrollArea
        />
      )}
    </For>
  </VStack>
)

Change Size

id	firstName	lastName	age	email
0	Fletcher	Casper	54	Glenn_Nader@yahoo.com
1	Bob	Ankunding	64	Lew94@gmail.com
2	Darla	Spencer	55	Sydney24@gmail.com
3	Darren	Farrell	41	Gino9@yahoo.com
4	Norma	Conn	57	Grace.Effertz88@yahoo.com
5	Emilio	Douglas	64	Geovanni83@hotmail.com
6	Trycia	Marquardt	38	Enrique23@yahoo.com
7	Tremaine	Lubowitz	44	Nicola_Rutherford@hotmail.com
8	Norbert	Rohan	24	Cedric_Farrell58@yahoo.com
9	Roman	Gibson	32	Harrison.Emard36@gmail.com

id	firstName	lastName	age	email
0	Fletcher	Casper	54	Glenn_Nader@yahoo.com
1	Bob	Ankunding	64	Lew94@gmail.com
2	Darla	Spencer	55	Sydney24@gmail.com
3	Darren	Farrell	41	Gino9@yahoo.com
4	Norma	Conn	57	Grace.Effertz88@yahoo.com
5	Emilio	Douglas	64	Geovanni83@hotmail.com
6	Trycia	Marquardt	38	Enrique23@yahoo.com
7	Tremaine	Lubowitz	44	Nicola_Rutherford@hotmail.com
8	Norbert	Rohan	24	Cedric_Farrell58@yahoo.com
9	Roman	Gibson	32	Harrison.Emard36@gmail.com

id	firstName	lastName	age	email
0	Fletcher	Casper	54	Glenn_Nader@yahoo.com
1	Bob	Ankunding	64	Lew94@gmail.com
2	Darla	Spencer	55	Sydney24@gmail.com
3	Darren	Farrell	41	Gino9@yahoo.com
4	Norma	Conn	57	Grace.Effertz88@yahoo.com
5	Emilio	Douglas	64	Geovanni83@hotmail.com
6	Trycia	Marquardt	38	Enrique23@yahoo.com
7	Tremaine	Lubowitz	44	Nicola_Rutherford@hotmail.com
8	Norbert	Rohan	24	Cedric_Farrell58@yahoo.com
9	Roman	Gibson	32	Harrison.Emard36@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size, index) => (
        <Table
          key={index}
          size={size}
          columns={columns}
          data={data}
          withScrollArea
        />
      )}
    </For>
  </VStack>
)

Change Color Scheme

id	firstName	lastName	age	email
0	Carlos	Schiller	40	Tonya.Dooley-Bosco54@yahoo.com
1	Wilbert	Torp	65	Kristy_Lind86@hotmail.com
2	Desiree	Herzog	26	Katie40@yahoo.com
3	Joanne	Sporer	47	Haven31@gmail.com
4	Simeon	Leannon	31	Kiley59@yahoo.com
5	Andres	Macejkovic	53	Parker89@gmail.com
6	Ollie	Stehr	22	Lydia39@yahoo.com
7	Al	Kiehn	45	Max.Waters89@gmail.com
8	Gilbert	Goodwin	46	Vincenza.Fahey@hotmail.com
9	Viva	Zemlak	38	Marcelino_Dach@hotmail.com

id	firstName	lastName	age	email
0	Carlos	Schiller	40	Tonya.Dooley-Bosco54@yahoo.com
1	Wilbert	Torp	65	Kristy_Lind86@hotmail.com
2	Desiree	Herzog	26	Katie40@yahoo.com
3	Joanne	Sporer	47	Haven31@gmail.com
4	Simeon	Leannon	31	Kiley59@yahoo.com
5	Andres	Macejkovic	53	Parker89@gmail.com
6	Ollie	Stehr	22	Lydia39@yahoo.com
7	Al	Kiehn	45	Max.Waters89@gmail.com
8	Gilbert	Goodwin	46	Vincenza.Fahey@hotmail.com
9	Viva	Zemlak	38	Marcelino_Dach@hotmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <VStack>
    <For each={["green", "orange"]}>
      {(colorScheme, index) => (
        <Table
          key={index}
          colorScheme={colorScheme}
          variant="outline"
          columns={columns}
          data={data}
          withScrollArea
        />
      )}
    </For>
  </VStack>
)

Add Outer Border

To add an outer border, set withBorder to true.

id	firstName	lastName	age	email
0	Francis	O'Conner	25	Javonte.Rutherford@hotmail.com
1	Monique	Marquardt	41	Emmet.Johnson77@gmail.com
2	Theresia	Schumm	38	Jeff_Schoen12@gmail.com
3	Alden	Champlin	42	Alton_Labadie18@yahoo.com
4	Bonnie	Yost	58	Vicky.Jakubowski@hotmail.com
5	Doris	O'Keefe	59	Fredy17@hotmail.com
6	Rosalia	Cremin	22	June4@hotmail.com
7	Destini	Fay	55	Jeanette.Gutmann65@hotmail.com
8	Doreen	Friesen	55	Hertha.Klocko@hotmail.com
9	Eldora	Rolfson	26	Sylvia_Rath@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} withBorder withScrollArea />

Add Column Separators

To add column separators, set withColumnBorders to true.

id	firstName	lastName	age	email
0	Kelly	Cummerata	20	Gary.Raynor@yahoo.com
1	Jovany	Mertz	46	Sim48@hotmail.com
2	Elijah	Hammes	58	Darrick_Feil67@hotmail.com
3	Elizabeth	Moore	43	Willa_Mante76@yahoo.com
4	Leif	Lynch	20	Clarence37@hotmail.com
5	Amos	Sanford	42	Evan.Tillman5@hotmail.com
6	Laila	Cole	28	Pierce68@yahoo.com
7	Napoleon	Bednar	45	Victor_Bartoletti@gmail.com
8	Joshua	Wintheiser	22	Landen_Emard@hotmail.com
9	Dwayne	Lebsack	48	Muriel.Hoppe@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} withColumnBorders withScrollArea />

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

id	firstName	lastName	age	email
0	Odell	Harber	24	Armando82@gmail.com
1	William	Hintz	26	Xavier_Schaden62@yahoo.com
2	Danika	Pacocha	32	Zola.Rau26@hotmail.com
3	Tabitha	Wunsch	24	Dan83@hotmail.com
4	Clara	Mertz	51	Ramon70@gmail.com
5	Rupert	Marks	18	Audrey.Dickinson65@gmail.com
6	Erica	Altenwerth	43	Carol.Kohler@gmail.com
7	Kerry	Leffler	27	Reggie.DuBuque@gmail.com
8	Jean	Hickle	38	Celia.Cremin@yahoo.com
9	Evangeline	Olson	59	Keaton_Carter22@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} highlightOnHover withScrollArea />

Striped

To enable striped rows, set striped to true.

id	firstName	lastName	age	email
0	Emile	Jacobs	32	Taylor_DAmore@yahoo.com
1	Carlos	Douglas	29	Bill40@hotmail.com
2	Liliana	Little-Bergstrom	31	Sharon_Cummings-Sauer17@yahoo.com
3	Erik	Cole	45	Misael.Schuster@yahoo.com
4	Myron	Bahringer	31	Al22@hotmail.com
5	Bret	Reichel	20	Stacey.Shields@yahoo.com
6	Wayne	Koch	60	Stewart_Champlin@hotmail.com
7	Van	Heller	32	Irene88@hotmail.com
8	Stewart	Hahn	47	Telly.Larkin@gmail.com
9	Timothy	Becker	21	Dave_Jacobi@hotmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} striped withScrollArea />

Scroll Area

To enable scroll area, set withScrollArea to true.

id	firstName	lastName	age	email	phone	role	status	createdAt	updatedAt
0	Jessie	O'Connell	56	Lorna_Corkery@hotmail.com	443.421.4419 x0530	user	active	10/30/2025	1/20/2026
1	Chanel	Schowalter	52	Marcellus.Ebert-Feest@gmail.com	973.726.5604 x93902	admin	active	11/22/2025	9/3/2025
2	Ruby	Barrows	33	Brown18@yahoo.com	(507) 519-8010 x5430	admin	active	7/23/2025	3/22/2025
3	Deanna	Pfeffer	42	Elena6@gmail.com	527.305.8212 x545	admin	active	7/20/2025	11/19/2025
4	Emanuel	Mayert	33	Richmond_Wiegand@gmail.com	640-862-6070 x8362	user	inactive	8/19/2025	9/8/2025
5	Nicholas	Vandervort	28	Earnest.Barrows23@yahoo.com	597-719-5318	admin	inactive	10/14/2025	3/19/2025
6	Julia	Pouros	54	Flossie.Lockman17@hotmail.com	676-399-8387 x8448	user	active	12/21/2025	4/5/2025
7	Lana	Willms	57	Dale31@yahoo.com	300.876.8478 x010	admin	active	1/8/2026	10/7/2025
8	Esteban	Miller	28	Jaeden.Schulist72@hotmail.com	787-786-6636	user	inactive	3/31/2025	6/16/2025
9	Tracey	Cummings	24	Shari.Barton@hotmail.com	848.477.2897 x992	admin	inactive	7/29/2025	4/22/2025

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columnsFull} data={data} withScrollArea />

Header Groups

id	user
	name		age	email
	firstName	lastName	age	email
0	Kristy	Herman	37	Sophia31@yahoo.com
1	Edith	Goldner	48	Joy5@yahoo.com
2	Jody	Halvorson	23	Elvis50@hotmail.com
3	Alexanne	Gottlieb	37	Christine.King17@gmail.com
4	Rosa	Kub	65	Thomas55@hotmail.com
5	Sadie	Ondricka	51	Arnulfo8@yahoo.com
6	Milton	Douglas	20	Amelia87@gmail.com
7	Lonnie	Nader	23	Hazel.Smitham28@gmail.com
8	Esteban	Hermann	52	Renee_Beatty@gmail.com
9	Misty	Bashirian	33	Maudie94@gmail.com

const columns = useMemo(
  () => [
    columnHelper.accessor("id", {
      footer: (info) => info.column.id,
      cellProps: { numeric: true },
    }),
    columnHelper.group({
      id: "user",
      columns: [
        columnHelper.group({
          id: "name",
          columns: [
            columnHelper.accessor("firstName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
            columnHelper.accessor("lastName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
          ],
          footer: (info) => info.column.id,
          header: (info) => info.column.id,
        }),
        columnHelper.accessor("age", {
          footer: (info) => info.column.id,
          cellProps: { numeric: true },
        }),
        columnHelper.accessor("email", {
          footer: (info) => info.column.id,
          lineClamp: 1,
        }),
      ],
      footer: (info) => info.column.id,
      header: (info) => info.column.id,
    }),
  ],
  [],
)
const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    withBorder
    withColumnBorders
    withScrollArea
  />
)

id	user
	name		age	email
	firstName	lastName	age	email
0	Herminia	McLaughlin	35	Blair_Grimes@gmail.com
1	Gust	Ankunding	59	Maria.Denesik63@yahoo.com
2	Fredrick	Jakubowski	19	Dimitri.Toy64@gmail.com
3	Ollie	Hagenes	21	Cruz39@hotmail.com
4	Michale	Connelly	25	Marcia63@hotmail.com
5	Sylvia	Bartell	59	Edgar92@hotmail.com
6	Hellen	Hartmann	65	Hobart5@hotmail.com
7	Shannon	Jacobs	47	Randy_Rippin@yahoo.com
8	Allison	Pouros	51	Bert.Herman45@gmail.com
9	Daron	Sipes	24	Mona.Christiansen4@yahoo.com
id	firstName	lastName	age	email
	name		age	email
	user

const columns = useMemo(
  () => [
    columnHelper.accessor("id", {
      footer: (info) => info.column.id,
      cellProps: { numeric: true },
    }),
    columnHelper.group({
      id: "user",
      columns: [
        columnHelper.group({
          id: "name",
          columns: [
            columnHelper.accessor("firstName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
            columnHelper.accessor("lastName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
          ],
          footer: (info) => info.column.id,
          header: (info) => info.column.id,
        }),
        columnHelper.accessor("age", {
          footer: (info) => info.column.id,
          cellProps: { numeric: true },
        }),
        columnHelper.accessor("email", {
          footer: (info) => info.column.id,
          lineClamp: 1,
        }),
      ],
      footer: (info) => info.column.id,
      header: (info) => info.column.id,
    }),
  ],
  [],
)
const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    withBorder
    withColumnBorders
    withFooterGroups
    withScrollArea
  />
)

To disable keyboard navigation, set enableKeyboardNavigation to false. The default is true.

id	firstName	lastName	age	email
0	Lloyd	Hirthe	36	Adelbert_Ritchie@yahoo.com
1	Raphaelle	Metz-Wolff	47	Dayne_Lang97@hotmail.com
2	Cullen	Friesen	43	Samuel_Paucek80@hotmail.com
3	Jackie	Pfannerstill	19	Candace.Pagac@yahoo.com
4	Ronald	Lockman	64	Abel_Kessler@gmail.com
5	Jayda	Mante	27	Aaron.Okuneva@hotmail.com
6	Samson	Labadie	20	Naomi_Klein73@hotmail.com
7	Monica	Block	25	Ryan_Haley@hotmail.com
8	Megan	Bashirian	25	Gregg.Keeling63@yahoo.com
9	Bailee	Rippin	19	Jakayla.Ward@hotmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableKeyboardNavigation={false}
    withScrollArea
  />
)

Set Initial Focusable Cell

To set the initial focusable cell, set initialFocusableCell to an object with the column and row indices ({ colIndex: number, rowIndex: number }). The default is { colIndex: 0, rowIndex: 0 }.

id	firstName	lastName	age	email
0	Jasper	Bailey	22	Bobbie91@yahoo.com
1	Doug	Bradtke	52	Easter_Funk@hotmail.com
2	Kurt	Schuster	30	Howard58@hotmail.com
3	Rusty	O'Reilly	58	Domingo0@yahoo.com
4	Morris	Maggio	65	Cicero_Witting65@gmail.com
5	Lena	Quigley	52	Debra79@yahoo.com
6	Courtney	Stamm	30	Gabriel38@hotmail.com
7	Roxanne	Stracke	46	Darlene71@hotmail.com
8	Nya	King	46	Louisa.Botsford39@hotmail.com
9	Elian	Hartmann	22	Erin.Bechtelar@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    initialFocusableCell={{ colIndex: 1, rowIndex: 0 }}
    withScrollArea
  />
)

Handle Row Click Event

To handle the row click event, use onRowClick.

id	firstName	lastName	age	email
0	Donnie	Schinner	50	Salma_Lind45@yahoo.com
1	Aubrey	Runolfsdottir	24	Priscilla84@gmail.com
2	Jeffery	Towne	38	Ramon_Dibbert@yahoo.com
3	Obie	Hayes	44	Norene71@gmail.com
4	Carson	Tromp	37	Willie.Padberg@gmail.com
5	Tracey	Yost	38	Ervin.Prosacco@hotmail.com
6	Hilda	Quigley	54	Rebekah.Koch99@gmail.com
7	Juanita	Cartwright	30	Nicholas.Ward@gmail.com
8	Destany	Fritsch	43	Erika_Altenwerth@gmail.com
9	Tyler	Gutkowski	43	Adrienne_Toy@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    onRowClick={(row) => console.log(row)}
    withScrollArea
  />
)

If you use this code, you need to add "use client" to the top of the file.

Handle Row Double Click Event

To handle the row double click event, use onRowDoubleClick.

id	firstName	lastName	age	email
0	Rebecca	Hills	35	Yolanda_Bins32@hotmail.com
1	Dortha	Frami	33	Casimer_Goyette@hotmail.com
2	Daniel	Howell	49	Juanita_Kling31@yahoo.com
3	Yadira	Harber	29	Brain.Rowe@hotmail.com
4	Henry	Spencer	18	Verla_Nitzsche@yahoo.com
5	Dolly	Wehner	24	Zachary_OConnell19@hotmail.com
6	Norma	Breitenberg	20	Stacy_Runolfsson-Vandervort86@gmail.com
7	Sunny	Monahan	62	Gerard_McKenzie@hotmail.com
8	Mikel	Treutel	20	Liliane_Rempel51@yahoo.com
9	Casey	Carter	38	Ellis73@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    onRowDoubleClick={(row) => console.log(row)}
    withScrollArea
  />
)

If you use this code, you need to add "use client" to the top of the file.

Set Default Sorting

To set the default sorting, set defaultSorting to an array of objects with the column id and direction.

id	firstName	lastName	age	email
2	Lana	Hodkiewicz	63	Iris56@yahoo.com
3	Charlotte	Mann	61	Walter.Considine@yahoo.com
5	Sandra	Keebler	54	Jeffery40@gmail.com
8	Erma	Robel	51	Carson4@yahoo.com
0	Clinton	Hudson	50	Camryn8@gmail.com
1	Daniel	Predovic	39	Jonathan66@gmail.com
9	Ollie	Cummings	36	Christie_Schaefer@hotmail.com
6	Eriberto	Leannon	29	Moses46@yahoo.com
7	Branson	Hills	25	Zula_Baumbach-Schaefer47@hotmail.com
4	Torrey	Sipes	19	Kayla.Homenick48@hotmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    defaultSorting={[{ id: "age", desc: true }]}
    withScrollArea
  />
)

Disable Sorting

To disable sorting, set enableSorting to false. The default is true.

id	firstName	lastName	age	email
0	Matt	Jaskolski	36	Emelia.Terry@yahoo.com
1	Lee	Bode	49	Brett88@yahoo.com
2	Karl	Hammes	60	Myrna_Lubowitz7@gmail.com
3	Celestine	Adams	60	Elisha.Rogahn@gmail.com
4	Leah	Hayes	30	Carroll70@gmail.com
5	Gwen	Sporer	57	Ellen_Koss15@gmail.com
6	Sheila	Dibbert	61	Lowell21@hotmail.com
7	Brad	Cummerata	22	Noemy.Batz-Prosacco40@hotmail.com
8	Archie	Auer	21	Judy85@hotmail.com
9	Lula	Lindgren	37	Armani.Davis91@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table columns={columns} data={data} enableSorting={false} withScrollArea />
)

Disable Multi Sorting

To disable multi sorting, set enableMultiSort to false. The default is true.

id	firstName	lastName	age	email
0	Chelsea	Pagac	19	Mittie_Smitham83@yahoo.com
1	Mitchell	Oberbrunner-Turner	25	Margot.Ritchie67@yahoo.com
2	Ernesto	Maggio-Cronin	51	Krista.Nienow-OConnell@gmail.com
3	Zion	Mante-Armstrong	61	Lelia_Armstrong77@yahoo.com
4	Marty	Lind	36	Richard.Zemlak@yahoo.com
5	Bill	Russel	45	Karen21@gmail.com
6	Grace	Weissnat	47	Cornelius.Mann@yahoo.com
7	Sandra	Nikolaus	42	Timothy.Auer@yahoo.com
8	Terry	Osinski	42	Edward_Howe65@yahoo.com
9	Rachel	Sawayn	55	Demario_Schimmel67@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table columns={columns} data={data} enableMultiSort={false} withScrollArea />
)

Set Maximum Sortable Columns

To set the maximum sortable columns, set maxMultiSortColCount to a number.

id	firstName	lastName	age	email
0	Geoffrey	Gutkowski	29	Viva_Schoen42@yahoo.com
1	Kariane	Dicki	35	Emanuel.Hayes@hotmail.com
2	Sherman	Hyatt	21	Lourdes_Friesen53@yahoo.com
3	Frederick	Effertz	40	Lila23@hotmail.com
4	Marisa	Moore	21	Dennis51@hotmail.com
5	Caleb	Powlowski	55	Arlie.MacGyver21@hotmail.com
6	Elisha	Wisozk	35	Angelina.Lehner12@hotmail.com
7	Jenna	Hoeger	48	Ada_Murazik@gmail.com
8	Tricia	Doyle	28	Debbie95@gmail.com
9	Johnnie	Wiegand	42	Delta4@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    maxMultiSortColCount={2}
    withScrollArea
  />
)

Manual Sorting

To use manual sorting, set manualSorting to true. The default is false.

id	firstName	lastName	age	email
0	Brooke	Parker	62	Jermaine67@yahoo.com
1	Orie	Turner	34	Velda.Grant@yahoo.com
2	Jayne	Rowe	31	Susana_Casper@hotmail.com
3	Julie	Jast	65	Sister98@yahoo.com
4	Mazie	Haley	46	Alysa.Graham@hotmail.com
5	Gwen	Quitzon	31	Mario99@hotmail.com
6	Joseph	Stark-Littel	49	Rodrigo.Quitzon75@yahoo.com
7	Santos	Feil	51	Gina_Hermiston33@yahoo.com
8	Raphaelle	Glover	52	Damon73@hotmail.com
9	Verona	Stamm	30	Ellis.Connelly@yahoo.com

const defaultData = useMemo<Data[]>(() => createTableData(), [])
const [data, setData] = useState<Data[]>(defaultData)

return (
  <Table
    columns={columns}
    data={data}
    withScrollArea
    enableMultiSort={false}
    manualSorting
    onSortingChange={(sorting) => {
      if (sorting.length) {
        const { id, desc } = sorting[0]!

        setData((prev) =>
          prev.toSorted((a, b) => {
            if (isNumber(a[id]) && isNumber(b[id])) {
              return desc ? a[id] - b[id] : b[id] - a[id]
            } else if (isString(a[id]) && isString(b[id])) {
              return desc
                ? a[id].localeCompare(b[id])
                : b[id].localeCompare(a[id])
            }

            return 0
          }),
        )
      } else {
        setData(defaultData)
      }
      console.log(sorting)
    }}
  />
)

If you use this code, you need to add "use client" to the top of the file.

By default, when sorting is enabled, it starts in ascending order. If you want to start in descending order, set sortDescFirst to true. If you want to set it only for specific columns, set sortDescFirst to true for each column in columns. The default is false.

id	firstName	lastName	age	email
0	Lydia	Heidenreich	64	Lloyd_Vandervort29@gmail.com
1	Jaunita	Dach	31	Tina35@yahoo.com
2	Tia	Gleichner	50	Antwon_Jast67@gmail.com
3	Shaun	Goyette	35	Rolando.Wintheiser81@yahoo.com
4	Fannie	Connelly	58	Cesar.Wolff@yahoo.com
5	Carl	Feil	19	Ken29@gmail.com
6	Kenneth	Smitham	32	Priscilla50@gmail.com
7	Bridget	Schoen	46	Pat75@hotmail.com
8	Julia	Witting	40	Shane.Kulas48@gmail.com
9	Olga	Armstrong	38	Doug_Bernhard62@hotmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} sortDescFirst withScrollArea />

Control Sorting

id	firstName	lastName	age	email
0	Jazmin	Johnston	28	Kevon36@yahoo.com
1	Helen	Kautzer	47	Mike97@yahoo.com
2	Germaine	Schmeler	42	Laura_Wilderman@hotmail.com
3	Jon	Monahan	64	Jeremy42@hotmail.com
4	Fannie	Macejkovic	30	Judith48@yahoo.com
5	Tracey	Jones	51	Kellie_Kassulke15@gmail.com
6	Eddie	Feil	37	Sally_Spinka73@yahoo.com
7	Santino	Considine	34	Drew52@hotmail.com
8	Lana	Klein	51	Alexandra22@yahoo.com
9	Celine	Smitham	25	Glen3@gmail.com

const [sorting, setSorting] = useState<SortingState<Data>>([
  { id: "age", desc: true },
])
const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} withScrollArea />

If you use this code, you need to add "use client" to the top of the file.

Enable Pagination

To enable pagination, set enablePagination to true and set the component that controls the pagination to header or footer. The default is false.

id	firstName	lastName	age	email
0	Vernie	West	60	Edyth.Kirlin3@gmail.com
1	Brandon	Harber	54	Alanna96@yahoo.com
2	Alayna	Predovic	56	Rick.Smitham@hotmail.com
3	Jacob	O'Kon-Klocko	58	Ana.Franey@gmail.com
4	Jana	Feeney	39	Shaun_Russel79@hotmail.com
5	Kenny	Volkman	37	Lysanne.Wehner@gmail.com
6	Irma	Jerde	23	Delbert63@hotmail.com
7	Ada	Larkin-Gorczany	61	Shanon.Cole82@yahoo.com
8	Haley	Hahn	35	Barrett.Friesen-Gottlieb@yahoo.com
9	Earl	Tillman	53	Jeannette_Kerluke92@yahoo.com
10	Jerrell	Rohan	38	Carol.Maggio6@hotmail.com
11	Hettie	Schiller	44	Gertrude.Douglas@hotmail.com
12	Bryan	Weber	31	Laurie75@gmail.com
13	Margarita	Corwin	45	Rossie_Pacocha99@hotmail.com
14	Nadia	Hettinger	24	Amanda.Leuschke@gmail.com
15	Geoffrey	Harber	26	Carolyne16@yahoo.com
16	Erika	Collier	26	Michael59@hotmail.com
17	Max	Marvin	30	Amy.Wiza@gmail.com
18	Tami	Maggio	65	Garry79@hotmail.com
19	Yvonne	Bins	27	Billie_Armstrong@yahoo.com

const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createTableData(40), [])

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      enablePagination
      footer={(table) => {
        const page = table.getState().pagination.pageIndex + 1
        const pageSize = table.getState().pagination.pageSize
        const total = table.getPageCount()

        return (
          <Grid templateColumns="1fr 1fr 1fr" w="full">
            <Pagination.Root
              size={{ base: "sm", sm: "xs" }}
              gridColumn="2 / 3"
              page={page}
              total={total}
              onChange={(page) => table.setPageIndex(page - 1)}
            />

            <Select.Root
              size={{ base: "sm", sm: "xs" }}
              aria-label={t("Page size")}
              items={[
                { label: "10", value: "10" },
                { label: "20", value: "20" },
                { label: "30", value: "30" },
                { label: "40", value: "40" },
                { label: "50", value: "50" },
              ]}
              value={pageSize.toString()}
              rootProps={{ justifySelf: "end", w: "5xs" }}
              onChange={(value) => table.setPageSize(Number(value))}
            />
          </Grid>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Set Default Page Index and Page Size

To set the default page index and page size, set defaultPagination to an object with the pageIndex and pageSize.

id	firstName	lastName	age	email
10	Ronaldo	Walsh	40	Raul45@hotmail.com
11	Frankie	Jaskolski	56	Cody89@gmail.com
12	Webster	Ziemann	33	Berry_Orn@hotmail.com
13	Mamie	Gulgowski	33	Jody.Gislason45@hotmail.com
14	Tammy	Lubowitz	55	Myrna.Predovic34@hotmail.com
15	Jefferey	Dickinson	20	Armando16@hotmail.com
16	Kenton	Lang	25	Elsie88@hotmail.com
17	Andres	Schultz	27	Joann.Bergstrom@hotmail.com
18	Aliyah	Mayert	23	Samanta.Ernser53@yahoo.com
19	Randolph	Ritchie	51	Brent_Hamill@yahoo.com

const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createTableData(20), [])

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      enablePagination
      defaultPagination={{ pageIndex: 1, pageSize: 10 }}
      footer={(table) => {
        const page = table.getState().pagination.pageIndex + 1
        const pageSize = table.getState().pagination.pageSize
        const total = table.getPageCount()

        return (
          <Grid templateColumns="1fr 1fr 1fr" w="full">
            <Pagination.Root
              size={{ base: "sm", sm: "xs" }}
              gridColumn="2 / 3"
              page={page}
              total={total}
              onChange={(page) => table.setPageIndex(page - 1)}
            />

            <Select.Root
              size={{ base: "sm", sm: "xs" }}
              aria-label={t("Page size")}
              items={[
                { label: "10", value: "10" },
                { label: "20", value: "20" },
                { label: "30", value: "30" },
                { label: "40", value: "40" },
                { label: "50", value: "50" },
              ]}
              value={pageSize.toString()}
              rootProps={{ justifySelf: "end", w: "5xs" }}
              onChange={(value) => table.setPageSize(Number(value))}
            />
          </Grid>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Use Manual Pagination

To use manual pagination, set manualPagination to true. The default is false.

id	firstName	lastName	age	email
0	Nathaniel	Maggio	31	Greg49@gmail.com
1	Alexander	Kuphal	64	Laurence.Schowalter@hotmail.com
2	Michele	Koss	52	Monroe17@hotmail.com
3	Christopher	Feeney	61	Tressie.Powlowski44@gmail.com
4	Mildred	Luettgen	31	Annie.Hammes@gmail.com
5	Jackie	O'Hara	33	Cathrine21@yahoo.com
6	Felicita	Medhurst	32	Darnell60@hotmail.com
7	Trevor	Streich	28	Taryn_Schoen22@gmail.com
8	Lesley	Donnelly	23	Birdie_Nader91@hotmail.com
9	Guiseppe	Toy	37	Rodolfo46@gmail.com
10	Odie	Stiedemann	52	Cecilia34@yahoo.com
11	Perry	Littel	61	Terri.Prosacco@yahoo.com
12	Jermaine	Zieme	36	Aletha36@hotmail.com
13	Violette	Klein	48	Drew57@hotmail.com
14	Sara	Raynor	62	Raul.Quigley@gmail.com
15	Arjun	Buckridge	59	Duane.Von87@yahoo.com
16	Eric	Boyer	18	Alexander.Balistreri@gmail.com
17	Keith	Rowe	30	Curt1@hotmail.com
18	Buck	O'Connell	45	Nicola_OConner@hotmail.com
19	Antonio	Gottlieb	27	Jim_Franey@yahoo.com

const { t } = useI18n("table")
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const rowCount = 40
const defaultData = useMemo<Data[]>(() => createTableData(rowCount), [])
const data = useMemo<Data[]>(
  () =>
    defaultData.slice(
      pagination.pageIndex * pagination.pageSize,
      (pagination.pageIndex + 1) * pagination.pageSize,
    ),
  [defaultData, pagination],
)

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      enablePagination
      manualPagination
      pagination={pagination}
      rowCount={rowCount}
      onPaginationChange={setPagination}
      footer={(table) => {
        const page = table.getState().pagination.pageIndex + 1
        const pageSize = table.getState().pagination.pageSize
        const total = table.getPageCount()

        return (
          <Grid templateColumns="1fr 1fr 1fr" w="full">
            <Pagination.Root
              size={{ base: "sm", sm: "xs" }}
              gridColumn="2 / 3"
              page={page}
              total={total}
              onChange={(page) => table.setPageIndex(page - 1)}
            />

            <Select.Root
              size={{ base: "sm", sm: "xs" }}
              aria-label={t("Page size")}
              items={[
                { label: "10", value: "10" },
                { label: "20", value: "20" },
                { label: "30", value: "30" },
                { label: "40", value: "40" },
                { label: "50", value: "50" },
              ]}
              value={pageSize.toString()}
              rootProps={{ justifySelf: "end", w: "5xs" }}
              onChange={(value) => table.setPageSize(Number(value))}
            />
          </Grid>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Control Pagination

id	firstName	lastName	age	email
0	Emely	Bogisich	19	Wade98@gmail.com
1	Doug	Will	40	Franz75@yahoo.com
2	Megan	Maggio	35	Avery_Ebert@hotmail.com
3	Neal	Fadel	19	Courtney95@hotmail.com
4	Margarita	Treutel	22	Bart.Vandervort92@hotmail.com
5	Fannie	Murphy	59	Marguerite41@gmail.com
6	Melody	Botsford	57	Garry.Brakus@hotmail.com
7	Jacquelyn	Padberg	56	Joanne82@yahoo.com
8	Maxine	Harris	44	Gerald16@yahoo.com
9	Brennon	Rowe	47	Adam_Abshire@gmail.com
10	Johanna	Wolff	53	Marie61@gmail.com
11	Jane	Runte	36	Katelynn.Bogan95@yahoo.com
12	Domenica	Berge	41	Isaac.Koelpin16@yahoo.com
13	Leslie	McCullough	26	Evert24@hotmail.com
14	Sonya	Grimes	52	Domingo.Hickle@hotmail.com
15	Frieda	Fisher	26	Reyna_Connelly@hotmail.com
16	Madeline	Block	26	Trevor_Streich@hotmail.com
17	Daren	Mosciski	31	Fredy.Rau@yahoo.com
18	Jimmie	Dickinson	49	Meghan99@yahoo.com
19	Mercedes	Russel	24	Meta32@gmail.com

const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createTableData(40), [])

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      enablePagination
      pagination={pagination}
      onPaginationChange={setPagination}
      footer={(table) => {
        const page = table.getState().pagination.pageIndex + 1
        const pageSize = table.getState().pagination.pageSize
        const total = table.getPageCount()

        return (
          <Grid templateColumns="1fr 1fr 1fr" w="full">
            <Pagination.Root
              size={{ base: "sm", sm: "xs" }}
              gridColumn="2 / 3"
              page={page}
              total={total}
              onChange={(page) => table.setPageIndex(page - 1)}
            />

            <Select.Root
              size={{ base: "sm", sm: "xs" }}
              aria-label={t("Page size")}
              items={[
                { label: "10", value: "10" },
                { label: "20", value: "20" },
                { label: "30", value: "30" },
                { label: "40", value: "40" },
                { label: "50", value: "50" },
              ]}
              value={pageSize.toString()}
              rootProps={{ justifySelf: "end", w: "5xs" }}
              onChange={(value) => table.setPageSize(Number(value))}
            />
          </Grid>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Enable Row Selection

To enable row selection, set enableRowSelection to true. The default is false.

id	firstName	lastName	age	email
0	Kayleigh	Greenholt	24	Drew68@hotmail.com
1	Bessie	Schimmel	27	Tate_Koelpin@hotmail.com
2	Bryan	Green	64	Angel91@yahoo.com
3	Emilio	Sanford	57	Kristie.Barton2@hotmail.com
4	Donnie	Bednar	32	Lindsey.Wilkinson13@yahoo.com
5	Rylan	Schiller	19	Johnnie.Bednar@hotmail.com
6	Georgianna	Witting	29	Natalia59@hotmail.com
7	Jamie	Little	37	Stephanie72@yahoo.com
8	Omar	Hauck	37	Rafael54@gmail.com
9	Rosalind	Zulauf	18	Bethel37@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return <Table columns={columns} data={data} enableRowSelection withScrollArea />

Set Default Selected Rows

To set the default selected rows, set defaultRowSelection to an object with the index of the data as the key.

id	firstName	lastName	age	email
0	Ginger	Romaguera-Welch	65	Lacy_Huels@yahoo.com
1	Brannon	Erdman	61	Carli.Cronin@gmail.com
2	Cory	Purdy	55	Zella.Klocko39@gmail.com
3	Shelley	Ernser	45	Deven_Tremblay57@yahoo.com
4	Monica	Doyle	59	Daisy99@hotmail.com
5	Charlene	Hilpert	18	Dan46@yahoo.com
6	Rochelle	Wilkinson	19	George.Wunsch72@hotmail.com
7	Eloy	Sawayn	31	Lazaro_Balistreri@gmail.com
8	Colin	Runolfsdottir	61	Lowell_Lesch76@hotmail.com
9	Allene	Kertzmann	31	Darryl75@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableRowSelection
    defaultRowSelection={{ 0: true }}
    withScrollArea
  />
)

Enable Row Selection on Click

To enable row selection on click, set selectOnClickRow to true. The default is false.

id	firstName	lastName	age	email
0	Letitia	Balistreri	50	Domingo_Frami@yahoo.com
1	Craig	Hermann	18	Cecelia_Metz@gmail.com
2	Maurice	Cronin	47	Elisabeth68@gmail.com
3	Nikko	Morar	29	Delores.Daniel@yahoo.com
4	Kim	Okuneva	24	Alexandro.Bednar16@yahoo.com
5	Jaclyn	Carter	52	Martin.Kuhlman@gmail.com
6	Harry	Rogahn	19	Gwendolyn_Armstrong@yahoo.com
7	Phil	Feil	48	Grover.Gusikowski@yahoo.com
8	Creola	Sauer	23	Oscar97@yahoo.com
9	Jacky	Borer	39	Nicola.Daugherty58@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableRowSelection
    selectOnClickRow
    withScrollArea
  />
)

Hide Checkbox

To hide the checkbox, set withCheckbox to false. The default is true.

id	firstName	lastName	age	email
0	Milton	Breitenberg	31	Aliza80@yahoo.com
1	Letitia	Steuber	33	Clifton_Hackett@gmail.com
2	Carl	Simonis	60	Debra.Mertz@yahoo.com
3	Dallas	Reinger	26	Claire59@hotmail.com
4	Summer	Marquardt	34	Dan19@yahoo.com
5	Tommy	Stokes	57	Lowell_Ruecker58@gmail.com
6	Clovis	Boyer	59	Karl.Wilderman73@yahoo.com
7	Domingo	Heathcote	20	Santos_Howell@yahoo.com
8	Willis	Bruen	38	Dock.Thompson@hotmail.com
9	Frankie	Schumm	36	Emily95@yahoo.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableRowSelection
    selectOnClickRow
    withCheckbox={false}
    withScrollArea
  />
)

Disable Row

To disable a row, set enableRowSelection to a function that returns a boolean.

id	firstName	lastName	age	email
0	Pablo	Osinski-Kihn	36	Golda_Schulist@gmail.com
1	Ian	Wehner	61	Dejuan.Kutch35@gmail.com
2	Dawn	Raynor	46	Jordan.Bailey@hotmail.com
3	Ryder	Walsh	36	Matt5@hotmail.com
4	Erick	Sawayn	23	Billie_Mann@hotmail.com
5	Sheldon	Dibbert	49	Bryana.Gottlieb55@yahoo.com
6	Kyle	Towne	51	Rhianna.Klocko70@gmail.com
7	Sophie	Windler	56	Brenda79@hotmail.com
8	Kim	Maggio	29	Doris.Collins91@hotmail.com
9	Marie	Lesch	20	Jennifer75@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableRowSelection={(row) => row.id !== "1"}
    withScrollArea
  />
)

If you use this code, you need to add "use client" to the top of the file.

Control Row Selection

id	firstName	lastName	age	email
0	Silvia	Huel	22	Erika_Krajcik@yahoo.com
1	Alma	Emard	56	Ella.Gottlieb@yahoo.com
2	Toby	Hayes	62	Kristoffer31@yahoo.com
3	Dagmar	Romaguera-Hahn	18	Marilyn_Haag3@gmail.com
4	Larry	Keebler	57	Loren.Ward@hotmail.com
5	Ronald	Hills	18	America26@gmail.com
6	Angela	Koelpin	20	Jean_Frami@yahoo.com
7	Turner	Rice	37	Buford_Tremblay30@hotmail.com
8	Rogelio	Williamson	34	Taya98@hotmail.com
9	Ryan	Schumm	56	Adrienne.Runolfsson-Stark13@hotmail.com

const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableRowSelection
    rowSelection={rowSelection}
    onRowSelectionChange={setRowSelection}
    withScrollArea
  />
)

If you use this code, you need to add "use client" to the top of the file.

Use Filter

To use a filter, set the component that controls the filter to header or footer.

id	firstName	lastName	age	email
0	Caleb	Friesen-Farrell	57	Aron.Spencer25@hotmail.com
1	Jay	Kozey	36	Archie6@gmail.com
2	Fausto	Schimmel	33	Giuseppe26@yahoo.com
3	Lucia	Wiza	60	Brad_Pacocha8@hotmail.com
4	Donald	Nienow	41	Ray98@hotmail.com
5	Arthur	Wolf	40	Adam.Wunsch@gmail.com
6	Essie	Bruen	39	Aaron.Torphy@hotmail.com
7	Andy	Kshlerin	33	Curtis.Roob56@gmail.com
8	Modesto	Swift	59	Ernesto30@yahoo.com
9	Jordyn	Beatty	49	Craig99@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      header={(table) => {
        const value =
          (table.getColumn("email")?.getFilterValue() as string | undefined) ??
          ""

        return (
          <InputGroup.Root>
            <InputGroup.Element>
              <SearchIcon />
            </InputGroup.Element>

            <Input
              placeholder="Filter emails"
              value={value}
              onChange={(ev) =>
                table.getColumn("email")?.setFilterValue(ev.target.value)
              }
            />
          </InputGroup.Root>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Set Default Filter

To set the default filter, set defaultColumnFilters to an array of objects with the id and value of the column to filter.

id	firstName	lastName	age	email
0	Victoria	Boyer	50	Constantin71@gmail.com
3	Maggie	Ortiz	41	Julie12@gmail.com
7	Milford	Spencer	34	Alyssa.Shanahan@gmail.com
8	Glen	Powlowski	18	Jada.Yundt25@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      defaultColumnFilters={[{ id: "email", value: "gmail" }]}
      header={(table) => {
        const value =
          (table.getColumn("email")?.getFilterValue() as string | undefined) ??
          ""

        return (
          <InputGroup.Root>
            <InputGroup.Element>
              <SearchIcon />
            </InputGroup.Element>

            <Input
              placeholder="Filter emails"
              value={value}
              onChange={(ev) =>
                table.getColumn("email")?.setFilterValue(ev.target.value)
              }
            />
          </InputGroup.Root>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Control Filter

id	firstName	lastName	age	email
0	Brigitte	Von	49	Martin3@yahoo.com
1	Jean	Wiegand	30	Nick.Rowe71@hotmail.com
2	Elias	Considine	48	Judith_Walter@yahoo.com
3	Jordan	Ryan	41	Krystal68@hotmail.com
4	Janelle	Thiel	25	Vickie.Cummerata44@gmail.com
5	Zoila	Mertz	23	Braeden_Watsica6@gmail.com
6	Ignacio	Bruen	62	Libby_Grady42@yahoo.com
7	Jacquelyn	Tromp	53	Una_Cole@hotmail.com
8	Maddison	Dach	38	Natasha55@hotmail.com
9	Unique	MacGyver	60	Jeremy12@yahoo.com

const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([
  { id: "email", value: "" },
])
const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      columnFilters={columnFilters}
      onColumnFiltersChange={setColumnFilters}
      header={(table) => {
        const value =
          (table.getColumn("email")?.getFilterValue() as string | undefined) ??
          ""

        return (
          <InputGroup.Root>
            <InputGroup.Element>
              <SearchIcon />
            </InputGroup.Element>

            <Input
              placeholder="Filter emails"
              value={value}
              onChange={(ev) =>
                table.getColumn("email")?.setFilterValue(ev.target.value)
              }
            />
          </InputGroup.Root>
        )
      }}
      withScrollArea
    />
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Enable Column Resizing

To enable column resizing, set enableColumnResizing to true. The default is false.

id	firstName	lastName	age	email
0	Omari	Gutkowski	51	Joyce9@gmail.com
1	Alvis	Hane	64	Harold.Balistreri74@hotmail.com
2	Paulette	Abbott	28	Zander_Kutch-Gusikowski98@yahoo.com
3	Robyn	Ratke	47	Kaitlyn_Koch@gmail.com
4	Kelley	Cummings	59	Luther.Bergnaum26@gmail.com
5	Fannie	Heidenreich	28	April_Kris-Bahringer98@yahoo.com
6	Allan	Rippin	56	Leonor.Beer25@gmail.com
7	Lenora	Boyle	27	Lynn60@gmail.com
8	Della	Wolff	41	Stephen87@gmail.com
9	Harold	Smith	19	Elinore.McLaughlin@gmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableColumnResizing
    withBorder
    withColumnBorders
  />
)

Change Column Resizing Method

By default, the column resizing timing is changed while dragging. If you want to change it when the drag is finished, set columnResizeMode to "onEnd".

id	firstName	lastName	age	email
0	Patrick	Upton	34	Lillie_Nader3@yahoo.com
1	Salvador	Pouros-Ryan	57	Melanie68@hotmail.com
2	Lorena	Abbott	50	Cicero_Jenkins-Kohler@hotmail.com
3	Jude	Schmidt	54	Jeffery.Kuphal@hotmail.com
4	Kyle	Conroy	34	Roscoe27@yahoo.com
5	Era	Ledner	49	Jan.Stokes80@gmail.com
6	Shelley	Wilkinson	30	Myron_Ritchie8@gmail.com
7	Shana	Glover	65	Suzanne_Rohan89@gmail.com
8	Mable	Medhurst-Nicolas	36	Maxine_Kertzmann@hotmail.com
9	Gordon	Stiedemann	35	Mamie81@hotmail.com

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    enableColumnResizing
    columnResizeMode="onEnd"
    withBorder
    withColumnBorders
  />
)

Props

Prop	Default	Type / Description
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	-	`"line" \| "outline"` The variant of the component.
`cellProps`	-	`TransformProps<NativeTable.TdProps, Cell<Y, unknown>>` The props for the table cell.
`checkboxProps`	-	`CheckboxProps` The props for the checkbox.
`columnFilters`	-	`ColumnFiltersState` The column filters state of the table.
`defaultColumnFilters`	-	`ColumnFiltersState` The default column filters state of the table.
`defaultPagination`	-	`PaginationState` The default pagination state of the table.
`defaultRowSelection`	-	`RowSelectionState` The default row selection state of the table.
`defaultSorting`	-	`SortingState<Y>` The default sorting state of the table.
`enableAutoResizeTableWidth`	`false`	`boolean` If `true`, the table width will be automatically resized to the content.
`enableKeyboardNavigation`	`true`	`boolean` If `true`, the keyboard navigation will be enabled.
`enablePagination`	`false`	`boolean` If `true`, the pagination will be enabled.
`footer`	-	`ReactNodeOrFunction<ReactTable<Y>>` The footer of the table.
`footerGroupProps`	-	`TransformProps<NativeTable.TrProps, HeaderGroup<Y>>` The props for the table footer group.
`footerProps`	-	`TransformProps<NativeTable.ThProps, Header<Y, unknown>>` The props for the table footer.
`header`	-	`ReactNodeOrFunction<ReactTable<Y>>` The header of the table.
`headerCheckboxProps`	-	`TransformProps<CheckboxProps, Header<Y, unknown>>` The props for the table header checkbox.
`headerGroupProps`	-	`TransformProps<NativeTable.TrProps, HeaderGroup<Y>>` The props for the table header group.
`headerProps`	-	`TransformProps<NativeTable.ThProps, Header<Y, unknown>>` The props for the table header.
`initialFocusableCell`	`{rowIndex: 0, colIndex: 0}`	`{ colIndex: number; rowIndex: number }` The initial focusable cell of the table.
`layout`	-	`"-moz-initial" \| "auto" \| "fixed" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" ...` The CSS `table-layout` property.
`onColumnFiltersChange`	-	`(columnFilters: ColumnFiltersState) => void` The callback invoked when the column filters state changes.
`onPaginationChange`	-	`(pagination: PaginationState) => void` The callback invoked when the pagination state changes.
`onRowClick`	-	`(row: Row<Y>) => void` The callback invoked when the row is clicked.
`onRowDoubleClick`	-	`(row: Row<Y>) => void` The callback invoked when the row is double clicked.
`onSortingChange`	-	`(sorting: SortingState<Y>) => void` The callback invoked when the sorting state changes.
`pagination`	-	`PaginationState` The pagination state of the table.
`resizableTriggerProps`	-	`TransformProps<Omit<ResizableTriggerProps, "resizing">, Header<Y, unknown>>` The props for the resizable trigger.
`rowCheckboxProps`	-	`TransformProps<CheckboxProps, Row<Y>>` The props for the table row checkbox.
`rowProps`	-	`TransformProps<NativeTable.TrProps, Row<Y>>` The props for the table row.
`rowSelection`	-	`RowSelectionState` The row selection state of the table.
`scrollAreaProps`	-	`NativeTableAreaProps` The props for the scroll area.
`selectOnClickRow`	`false`	`boolean` If `true`, the row will be selected when the row is clicked.
`sorting`	-	`SortingState<Y>` The sorting state of the table.
`sortingIcon`	-	`ReactNodeOrFunction<false \| SortDirection>` The sorting icon of the table.
`sortingIconProps`	-	`TransformProps<Omit<SortingIconProps, "sorted">, Header<Y, unknown>>` The props for the sorting icon.
`tableProps`	-	`NativeTable.RootProps` The props for the table.
`tbodyProps`	-	`NativeTable.TbodyProps` The props for the table tbody.
`tfootProps`	-	`NativeTable.TfootProps` The props for the table tfoot.
`theadProps`	-	`NativeTable.TheadProps` The props for the table thead.
`withCheckbox`	`true`	`boolean` If `true`, the table will have a checkbox column.
`withFooterCheckbox`	`false`	`boolean` If `true`, the table will have a checkbox in the footer.
`withFooterGroups`	`false`	`boolean` If `true`, the table will have footer groups.
`withScrollArea`	`false`	`boolean` Whether to enable the scroll area.

Accessibility

The Table follows the WAI-ARIA - Table Pattern for accessibility.

Setting an aria-label on the tableProps allows it to be read by screen readers.

const data = useMemo<Data[]>(() => createTableData(), [])

return (
  <Table
    columns={columns}
    data={data}
    tableProps={{ "aria-label": "User list" }}
  />
)

Key	Description	State
`ArrowLeft`	Moves focus one cell to the left. If focus is on the left-most cell in the row, focus does not move.	-
`ArrowRight`	Moves focus one cell to the right. If focus is on the right-most cell in the row, focus does not move.	-
`ArrowUp`	Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.	-
`ArrowDown`	Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.	-
`Home`	Moves focus to the first cell in the row that contains focus.	-
`End`	Moves focus to the last cell in the row that contains focus.	-
`PageUp`	Moves to the previous page.	`enablePagination={true}`
`PageDown`	Moves to the next page.	`enablePagination={true}`

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`NativeTable.Root`	`role="grid"`	Indicates that the element is a grid.
	`aria-rowcount`	Indicates the total number of rows in the table.
	`aria-colcount`	Indicates the total number of columns in the table.
	`aria-multiselectable`	Set to `"true"` if `enableRowSelection` is set.
`NativeTable.Thead`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`NativeTable.Tr`	`role="row"`	Indicates that the element is a row.
	`aria-rowindex`	Indicates which row the element is in the table.
	`aria-disabled`	When `enableRowSelection` is provided as a function, set `"true"` for rows that return `false`.
	`aria-selected`	Set to `"true"` if the row is selected, `"false"` if not selected.
`NativeTable.Th`	`role="columnheader"`	Indicates that the element is a columnheader.
	`aria-rowindex`	Indicates which row the element is in the table.
	`aria-colindex`	Indicates which column the element is in the table.
	`aria-sort`	Set to `"ascending"` for ascending order, `"descending"` for descending order, and `"none"` if no order is specified.
`NativeTable.Tbody`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`NativeTable.Td`	`role="gridcell"`	Indicates that the element is a gridcell.
	`aria-colindex`	Indicates which column the element is in the table.
	`aria-rowindex`	Indicates which row the element is in the table.
`NativeTable.Tfoot`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`Checkbox`	`aria-label`	Set to `"Select all rows"` for the header, and `"Select row"` for body rows.
`SortingIcon`	`aria-label`	Set to `"Sort ascending"` for ascending order, `"Sort descending"` for descending order, and `"Clear sorting"` when no order is specified.

Table

Usage

Change Variant

Change Size

Change Color Scheme

Add Outer Border

Add Column Separators

Highlight on Row Hover

Striped

Scroll Area

Header Groups

Footer Groups

Disable Keyboard Navigation

Set Initial Focusable Cell

Handle Row Click Event

Handle Row Double Click Event

Set Default Sorting

Disable Sorting

Disable Multi Sorting

Set Maximum Sortable Columns

Manual Sorting

Change Sorting Toggle

Control Sorting

Set Default Page Index and Page Size

Enable Row Selection

Set Default Selected Rows

Enable Row Selection on Click

Hide Checkbox

Disable Row

Control Row Selection

Use Filter

Set Default Filter

Control Filter

Enable Column Resizing

Change Column Resizing Method

Props

Accessibility

Keyboard Navigation

ARIA Roles and Attributes