Table

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

id	firstName	lastName	age	email
0	Elwyn	Kuhlman	42	Jennyfer16@hotmail.com
1	Kelly	Powlowski	50	Nels18@yahoo.com
2	Aliya	Waters	49	Tess_Gibson53@yahoo.com
3	Delfina	Daugherty	23	Ted_Hettinger@yahoo.com
4	Casimer	Jacobi	59	Brain_Emmerich@hotmail.com
5	Sophie	Corwin	26	Marina.Rutherford76@yahoo.com
6	Cyril	Johnson	32	Keegan.Windler86@gmail.com
7	Annie	Renner	49	Alisha_Lockman30@yahoo.com
8	Angela	Bergstrom	44	Ali52@hotmail.com
9	Price	Cruickshank	26	Branson_Jacobson33@hotmail.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	Ressie	Jacobson	35	Mozell.Prosacco-Crist@hotmail.com
1	Kellen	Ruecker	45	Ima.Wehner@yahoo.com
2	Walker	Turner	53	Estevan15@yahoo.com
3	Edison	Hoeger	65	Aliya13@hotmail.com
4	Isobel	Williamson	32	Ardith_Spencer@gmail.com
5	Monte	Botsford-Wiegand	56	Cara12@yahoo.com
6	Mariane	Fritsch	63	Jayme.Ritchie@gmail.com
7	Elenora	Balistreri	35	Verna_Koepp@gmail.com
8	Amos	Franecki	32	Felix_Welch@yahoo.com
9	Louvenia	Zemlak	37	Wellington.Blick@gmail.com

id	firstName	lastName	age	email
0	Ressie	Jacobson	35	Mozell.Prosacco-Crist@hotmail.com
1	Kellen	Ruecker	45	Ima.Wehner@yahoo.com
2	Walker	Turner	53	Estevan15@yahoo.com
3	Edison	Hoeger	65	Aliya13@hotmail.com
4	Isobel	Williamson	32	Ardith_Spencer@gmail.com
5	Monte	Botsford-Wiegand	56	Cara12@yahoo.com
6	Mariane	Fritsch	63	Jayme.Ritchie@gmail.com
7	Elenora	Balistreri	35	Verna_Koepp@gmail.com
8	Amos	Franecki	32	Felix_Welch@yahoo.com
9	Louvenia	Zemlak	37	Wellington.Blick@gmail.com

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

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	Hassie	Stehr	34	River_Grant@gmail.com
1	Camron	Reynolds	36	Reta_Reynolds@gmail.com
2	Victor	Schmeler	34	Casandra30@gmail.com
3	Lysanne	Sauer	40	Verla.Keeling@yahoo.com
4	Braxton	Stamm	27	Shawna_Bernier52@yahoo.com
5	Yesenia	Tillman	26	Michale.Ruecker3@yahoo.com
6	Erick	Jast	63	Beatrice.Murray11@yahoo.com
7	Jamir	Effertz	51	Hermann1@hotmail.com
8	Herta	Fritsch	34	Dock.Trantow79@gmail.com
9	Maximilian	Berge	46	Lonny92@gmail.com

id	firstName	lastName	age	email
0	Hassie	Stehr	34	River_Grant@gmail.com
1	Camron	Reynolds	36	Reta_Reynolds@gmail.com
2	Victor	Schmeler	34	Casandra30@gmail.com
3	Lysanne	Sauer	40	Verla.Keeling@yahoo.com
4	Braxton	Stamm	27	Shawna_Bernier52@yahoo.com
5	Yesenia	Tillman	26	Michale.Ruecker3@yahoo.com
6	Erick	Jast	63	Beatrice.Murray11@yahoo.com
7	Jamir	Effertz	51	Hermann1@hotmail.com
8	Herta	Fritsch	34	Dock.Trantow79@gmail.com
9	Maximilian	Berge	46	Lonny92@gmail.com

id	firstName	lastName	age	email
0	Hassie	Stehr	34	River_Grant@gmail.com
1	Camron	Reynolds	36	Reta_Reynolds@gmail.com
2	Victor	Schmeler	34	Casandra30@gmail.com
3	Lysanne	Sauer	40	Verla.Keeling@yahoo.com
4	Braxton	Stamm	27	Shawna_Bernier52@yahoo.com
5	Yesenia	Tillman	26	Michale.Ruecker3@yahoo.com
6	Erick	Jast	63	Beatrice.Murray11@yahoo.com
7	Jamir	Effertz	51	Hermann1@hotmail.com
8	Herta	Fritsch	34	Dock.Trantow79@gmail.com
9	Maximilian	Berge	46	Lonny92@gmail.com

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

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	Jay	Stoltenberg	54	Martina58@gmail.com
1	Napoleon	Halvorson	40	Jaunita52@yahoo.com
2	Louvenia	Keebler	51	Shanny.Prosacco97@hotmail.com
3	Alize	White	30	Melyna27@gmail.com
4	Emilio	Streich	59	Esmeralda29@hotmail.com
5	Jessie	Gutkowski	31	Germaine46@hotmail.com
6	Augusta	Murazik	51	Emmanuelle_OHara@yahoo.com
7	Lynn	Yundt	19	Imelda_Parisian@gmail.com
8	Pat	Tromp	47	Katrina_Bins16@hotmail.com
9	Cathy	Larson-Jacobi	28	Christelle18@gmail.com

id	firstName	lastName	age	email
0	Jay	Stoltenberg	54	Martina58@gmail.com
1	Napoleon	Halvorson	40	Jaunita52@yahoo.com
2	Louvenia	Keebler	51	Shanny.Prosacco97@hotmail.com
3	Alize	White	30	Melyna27@gmail.com
4	Emilio	Streich	59	Esmeralda29@hotmail.com
5	Jessie	Gutkowski	31	Germaine46@hotmail.com
6	Augusta	Murazik	51	Emmanuelle_OHara@yahoo.com
7	Lynn	Yundt	19	Imelda_Parisian@gmail.com
8	Pat	Tromp	47	Katrina_Bins16@hotmail.com
9	Cathy	Larson-Jacobi	28	Christelle18@gmail.com

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

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	Dana	Moen	61	Bud_Connelly@hotmail.com
1	Ruthie	Hayes	56	Tyrese61@gmail.com
2	Jaime	McKenzie	58	Johathan.Schmidt95@yahoo.com
3	Kayleigh	Jacobi	28	Andy_Cruickshank40@gmail.com
4	Ford	Bradtke	42	Berneice64@hotmail.com
5	Lacey	Davis	27	Chad62@gmail.com
6	Kimberly	Shanahan	49	Jamel_Glover@gmail.com
7	Margie	Funk	33	Wilson.Mayert68@hotmail.com
8	Viva	Feest	46	Ava15@gmail.com
9	Gus	Pollich	38	Judd_Gottlieb@gmail.com

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

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	Lesly	Schumm	32	Jewell.Cummerata94@hotmail.com
1	Leda	Kemmer	45	Demarco70@yahoo.com
2	Maureen	Hills-Kris	57	Jarred88@gmail.com
3	Isidro	Morissette	38	Kailee78@gmail.com
4	Bessie	Cummerata	36	Shanie_VonRueden9@gmail.com
5	Eliane	Berge	59	Maybell22@gmail.com
6	Hilma	Hoppe	38	Alanis38@gmail.com
7	Dortha	Luettgen	46	Brandyn_Paucek@yahoo.com
8	Sylvester	Rath	29	Niko85@gmail.com
9	Candice	Botsford	53	Adah82@yahoo.com

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

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	Miller	Gleichner	40	Greta46@gmail.com
1	Leonie	O'Kon	35	Kathleen4@hotmail.com
2	Emery	Carroll	52	Madaline57@hotmail.com
3	Lupe	Denesik	24	Violette.Kerluke73@yahoo.com
4	Tyree	Von	18	Vernice19@yahoo.com
5	Yvonne	Hartmann	65	Julian_Jakubowski31@hotmail.com
6	Perry	Nader	20	Jaquan25@yahoo.com
7	Kevin	Kshlerin	58	Alexandrea_Hettinger@hotmail.com
8	Mckayla	Kassulke	47	Kathryn.Schmidt20@gmail.com
9	Ora	Crona	36	Juanita.Keebler@hotmail.com

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

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

Striped

To enable striped rows, set striped to true.

id	firstName	lastName	age	email
0	Victoria	Heaney	29	Fermin.Mitchell17@hotmail.com
1	Tanner	Batz	58	Dallas_Purdy98@hotmail.com
2	Odessa	Becker	41	Celestine.Jacobi@hotmail.com
3	Jefferey	Sporer-Bayer	49	Darren73@gmail.com
4	Nikolas	Schneider	31	Marta_Walter@hotmail.com
5	Dahlia	Dietrich	27	Adolf37@gmail.com
6	Trace	Davis	39	Nolan.Little@yahoo.com
7	Alexie	Kovacek	63	Makenzie_Frami95@gmail.com
8	Camren	Powlowski	44	Leanne_Schmitt72@gmail.com
9	Carley	Weissnat	25	Abraham.Maggio@yahoo.com

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

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	Yvonne	Boyer	51	Krystina.Jacobson@hotmail.com	579-334-1495 x1535	admin	inactive	3/5/2025	1/21/2026
1	Anthony	Gulgowski	42	Dallin83@yahoo.com	953.699.1533 x159	user	active	11/29/2025	12/15/2025
2	Eve	Hane-Bailey	20	Ernestina_Hansen@yahoo.com	1-663-404-8495 x3020	user	inactive	1/10/2026	9/5/2025
3	Brielle	Hamill-Herzog	53	Javonte57@yahoo.com	497-464-2559 x140	admin	inactive	3/2/2025	9/22/2025
4	Lou	Cormier	36	Janie.Fisher20@yahoo.com	(507) 317-1153 x3829	admin	inactive	8/26/2025	5/28/2025
5	Vilma	Hoppe	31	Emilia_Nikolaus@hotmail.com	602.534.9912 x70466	user	active	5/22/2025	11/30/2025
6	Julio	Kohler	65	Anabelle.Bechtelar@yahoo.com	1-873-428-2006 x88049	user	active	3/30/2025	7/9/2025
7	Darion	Kerluke	50	Edwin.Predovic63@gmail.com	848-926-7374 x14119	admin	active	12/4/2025	3/20/2025
8	Baylee	Stanton	23	Caleigh68@yahoo.com	560-262-1123 x36197	admin	inactive	3/10/2025	12/1/2025
9	Pearlie	Howe	45	Curtis57@gmail.com	(272) 462-4219 x6498	user	active	5/10/2025	2/28/2025

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

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

Header Groups

id	user
	name		age	email
	firstName	lastName	age	email
0	Keith	Heathcote	49	Chanelle98@yahoo.com
1	Aliyah	Beer	50	Antonia.Toy@hotmail.com
2	Elijah	Hartmann	33	Jay22@hotmail.com
3	Irma	Corwin	37	Celestino2@gmail.com
4	Deanna	Wiza	20	Parker.Heller69@gmail.com
5	Candice	Waelchi	48	Clara_Reichert@gmail.com
6	Paula	Osinski	65	Keeley.Hahn67@yahoo.com
7	Naomi	Okuneva	53	Blair_Jenkins@hotmail.com
8	Ofelia	Bins	31	Otis.Legros@yahoo.com
9	Trinity	Durgan	36	Cydney_Moore10@hotmail.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[]>(() => createData(), [])

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

id	user
	name		age	email
	firstName	lastName	age	email
0	Thea	Rau	34	Jillian52@hotmail.com
1	Roxanne	Wiza	47	Ewell.Hammes91@gmail.com
2	Cyril	Davis	62	Gladyce.Prohaska@hotmail.com
3	Orin	Heidenreich	39	Brian_Lehner39@gmail.com
4	Lavern	Beatty	65	Cleora_Ritchie@hotmail.com
5	Sadye	Marquardt	54	Zackery11@yahoo.com
6	Emma	Walker	45	Milan28@yahoo.com
7	Raul	Armstrong	42	Efren27@hotmail.com
8	Devin	Nolan	43	Miguel75@gmail.com
9	Jensen	Mante	35	Carissa.Gleichner78@hotmail.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[]>(() => createData(), [])

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	Jacey	Sipes	20	Wilber93@yahoo.com
1	Quinten	Franecki	64	Marisol.Ebert@hotmail.com
2	Moises	Kilback	56	Colten89@hotmail.com
3	Jennyfer	Kuhn	23	Noemy.Heathcote@gmail.com
4	Mac	Kemmer	61	Amani_Runolfsdottir95@yahoo.com
5	Mary	Upton	55	Janice.Goyette64@gmail.com
6	Jameson	Gibson	49	Raoul72@gmail.com
7	Danielle	Schneider	63	Fletcher35@yahoo.com
8	Arturo	Reichel	56	Orpha_Casper83@gmail.com
9	Sage	Sawayn	43	Clifford33@yahoo.com

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

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	Burley	Turcotte	65	Carol88@hotmail.com
1	Lucinda	Schulist	63	Marisa_Romaguera66@yahoo.com
2	Garrison	Kilback	58	Doug.Leffler-Von@yahoo.com
3	Collin	Feest	49	Priscilla31@hotmail.com
4	Rene	Reynolds	40	Erika34@yahoo.com
5	Drake	Brakus	47	Javonte_Stroman9@yahoo.com
6	Keyshawn	Beahan	52	Trisha57@yahoo.com
7	Alphonso	Thiel	47	Lelia3@hotmail.com
8	Shayna	Jaskolski	29	Miguel.Douglas@hotmail.com
9	Kale	Schowalter	54	Marcos.Nienow54@gmail.com

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

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	Neva	Bode	36	Ellis36@hotmail.com
1	Lamar	Kuhic	60	Viviane50@gmail.com
2	Vella	Shanahan	59	Quinn.Cassin43@yahoo.com
3	Felton	Strosin-Labadie	47	Felipe_Nikolaus@hotmail.com
4	Addie	Moore	54	Leslie.Ritchie69@yahoo.com
5	Judge	Muller	30	Erna.Rutherford@hotmail.com
6	Marco	Paucek-Walker	63	Candida29@gmail.com
7	Columbus	Reichel	59	Jaclyn.Kreiger4@yahoo.com
8	Tracey	Larkin	28	Jordane10@hotmail.com
9	Moriah	Sporer	31	Trudie72@gmail.com

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

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	Ignatius	Schuster	56	Juliet22@gmail.com
1	Mariano	Nienow	41	Brenna43@gmail.com
2	Elody	Maggio	42	Davion_Murray71@gmail.com
3	Audrey	Breitenberg	45	Breana48@gmail.com
4	Elva	Kris	58	Donny34@yahoo.com
5	Grady	Streich	27	Jade_Larkin56@yahoo.com
6	Rosie	Tremblay	49	Karen.Beatty41@gmail.com
7	Kamryn	Miller	51	Selina_Tromp@gmail.com
8	Cora	Wisoky	38	Shaylee.Hickle@hotmail.com
9	Carolyne	Shanahan	37	Burley.Kuhic@yahoo.com

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

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
8	Heidi	Swift	65	Jaydon_Glover@hotmail.com
4	Clifford	Jenkins	62	Darrick79@gmail.com
2	Morgan	Schuster	50	Delphine23@yahoo.com
1	Karlie	Beatty	45	Delmer_Tillman@hotmail.com
7	Stephan	King	43	Jennifer_Watsica80@gmail.com
0	Lynn	Harris	40	Jamaal_Turcotte@yahoo.com
3	Jack	Greenholt	40	Edgar.Wintheiser@hotmail.com
5	Jakob	Hermiston	35	Isac_Kuhn@hotmail.com
9	Pat	Harvey	26	Shanie24@hotmail.com
6	Toni	Kuhic	18	Kraig_Mohr@gmail.com

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

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	Jarvis	Hagenes	39	Norval.Nikolaus@yahoo.com
1	Keaton	Parisian	52	Pierre_Mante@gmail.com
2	Casandra	Wiza	20	Sonya.Gerlach37@yahoo.com
3	Tyshawn	Aufderhar	58	Thomas_Zulauf@hotmail.com
4	Clyde	Torphy	31	Junior34@gmail.com
5	Asa	Jones	48	Keven.Crona@gmail.com
6	Eli	Pfannerstill	34	Max.Orn22@yahoo.com
7	Ericka	Hauck-Douglas	42	Madie1@yahoo.com
8	Chaya	Monahan	50	Clark.Toy30@yahoo.com
9	Darion	Schultz	57	Sandra_Bayer63@hotmail.com

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

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	Carolyn	Cole	45	Ari_Cassin3@hotmail.com
1	Tracy	Bartell	36	Serena.Beer@hotmail.com
2	Percival	Funk	19	Jennings_Gusikowski@hotmail.com
3	Jackson	Mills	39	Dana_Bruen12@hotmail.com
4	Letitia	Jacobson	40	Zachary15@gmail.com
5	Briana	O'Keefe	32	Otis.Greenfelder@gmail.com
6	Retta	Cummings	34	Nolan48@gmail.com
7	Jake	Cremin	57	Krista4@gmail.com
8	Marcos	Ledner	64	Aylin27@hotmail.com
9	Jordi	Sipes	57	Bethany32@hotmail.com

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

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	Gertrude	Batz	19	Roselyn38@yahoo.com
1	Major	Rowe	49	Kailee22@gmail.com
2	Aaliyah	McDermott-Runolfsson	23	Lera_Koss2@yahoo.com
3	Cyrus	Dicki-Reichel	55	Brown.Gulgowski@hotmail.com
4	Matilda	Howe	53	Margarett46@gmail.com
5	Forrest	Bednar	18	Nina_Murazik-Toy@hotmail.com
6	Orval	Streich	25	Shaun.Nikolaus-Ondricka@hotmail.com
7	Kadin	Schoen	18	Bonita.Howell47@gmail.com
8	Drew	Glover	57	Scarlett_Lind@yahoo.com
9	Victor	Rippin	61	Estel_Wolf@yahoo.com

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

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	O'Reilly	42	Freda_Robel98@gmail.com
1	Giovani	Mertz	18	Judson99@gmail.com
2	Wilhelmine	Hintz	22	Edgardo.Rempel68@gmail.com
3	Macie	Casper	30	Emmy11@gmail.com
4	Albina	Roob	61	Dewitt_Ritchie@yahoo.com
5	Cheyanne	Hintz	40	Seth.Kutch@yahoo.com
6	Harmony	Pagac	45	Alejandra87@hotmail.com
7	Shane	Nader	45	America.Marks67@gmail.com
8	Alisa	Bashirian	47	Noe97@hotmail.com
9	Francisca	Schumm	23	Wilhelmine_Halvorson9@yahoo.com

const defaultData = useMemo<Data[]>(() => createData(), [])
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	Donnie	Schimmel	39	Breanne48@hotmail.com
1	Elvis	Hand	28	Xzavier_Wiza@gmail.com
2	Grayce	Wyman	47	Mac.OKeefe@yahoo.com
3	Antonio	Toy	54	Stanford83@hotmail.com
4	Reese	MacGyver	61	Mertie.Dickens@gmail.com
5	Clementine	Cole	45	Perry68@gmail.com
6	Bertrand	Russel	40	Bennie_Bergnaum23@gmail.com
7	Jewell	Pollich	65	Nyasia_Barrows@gmail.com
8	Rowland	Pfeffer	62	Myah_Keeling-Runte41@gmail.com
9	Leonor	Schmeler	36	Darwin91@gmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Elenor	Grady	65	Amanda37@gmail.com
1	Hayley	Ratke	27	Tyshawn_Satterfield52@yahoo.com
2	Dandre	Kub	37	Anabelle.Batz78@yahoo.com
3	Rosa	Ledner	37	Alan_Pfannerstill@gmail.com
4	Roslyn	Rodriguez	53	Margarett.Jakubowski29@gmail.com
5	Frederic	Shields	52	Kailey.Hoeger73@gmail.com
6	Cecelia	Walsh	52	Sidney49@yahoo.com
7	Chance	Kunde	18	Trace45@hotmail.com
8	Luisa	Marvin	40	Melvin46@gmail.com
9	Ted	Ferry	43	Jaylon71@hotmail.com

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

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	Crawford	Bergnaum	22	Dangelo2@hotmail.com
1	Melba	McGlynn	47	Reilly8@gmail.com
2	Maximillia	Nitzsche	18	Kirstin.Deckow95@gmail.com
3	Gregg	Zemlak	38	Gregorio70@yahoo.com
4	Geoffrey	Bode-Leffler	25	Katarina.Kulas72@gmail.com
5	Juliana	Parisian	29	Muriel_Rodriguez76@hotmail.com
6	Leif	Pfannerstill	18	Lilly_Christiansen4@gmail.com
7	Aiden	Beer	34	Laurie9@hotmail.com
8	Darrell	Osinski	62	Wendell19@gmail.com
9	Clemens	Rempel	18	Jamarcus_Koelpin@hotmail.com
10	Milford	Abernathy	58	Myriam_Gorczany@hotmail.com
11	Abdul	Mohr	51	Beulah30@yahoo.com
12	Jay	Anderson	36	Peyton51@hotmail.com
13	Robert	Berge	60	Casandra50@hotmail.com
14	Abby	Huels-McKenzie	21	Valerie1@yahoo.com
15	Mariah	Tremblay	56	Felipe92@hotmail.com
16	Juana	Adams	63	Deontae.Bradtke6@hotmail.com
17	Casandra	Ziemann	28	Barton96@yahoo.com
18	Mitchel	Smitham-Predovic	54	Letitia52@hotmail.com
19	Curt	Ortiz	54	Kory.Dach0@gmail.com

const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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	Malvina	Wuckert	35	Matilde48@gmail.com
11	Darlene	Strosin	50	Piper30@yahoo.com
12	Mitchel	Conroy	24	Oscar_Kertzmann@yahoo.com
13	Douglas	Dicki	64	Katheryn22@hotmail.com
14	Jameson	Turner	19	Diego.Hyatt7@yahoo.com
15	Modesta	Blanda	61	Zaria25@gmail.com
16	Gabe	Sawayn-Schaden	38	Aron_Mohr@gmail.com
17	Lilyan	Rutherford	53	Ari58@hotmail.com
18	Thurman	Ernser	31	Morgan.Goyette@hotmail.com
19	Marlon	Yundt	23	Peyton_Rolfson@gmail.com

const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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	Providenci	Borer	44	Ayana.Pfannerstill97@hotmail.com
1	Lukas	Wintheiser	39	Vesta_Von@hotmail.com
2	Jermey	Adams	61	Lenna0@gmail.com
3	Marina	Boyer	22	Ruthie9@hotmail.com
4	Edd	Turcotte	56	Hudson89@hotmail.com
5	Amely	Franecki-Auer	27	Ezekiel_Crona@hotmail.com
6	Webster	Koepp-Dibbert	55	Everett19@hotmail.com
7	Kenneth	Kub	62	Brennan63@yahoo.com
8	Kirstin	Bradtke	33	Nichole28@yahoo.com
9	Lelia	Witting	63	Palma_Rohan@yahoo.com
10	Ross	Kunze	34	Ronny_Rogahn14@gmail.com
11	Naomie	Hessel	53	Kiara50@hotmail.com
12	Leon	Lynch	29	Toy72@gmail.com
13	Thad	Gibson	52	Warren.Schultz@yahoo.com
14	Dana	Barton	49	Sydni_Jakubowski4@yahoo.com
15	Ismael	Wisozk	38	Euna.Spinka25@gmail.com
16	Garret	Hodkiewicz	30	Hanna.DAmore@yahoo.com
17	Lincoln	Schinner	62	Marquise.Stanton@gmail.com
18	Liana	Satterfield-Frami	41	Marianne.Strosin@gmail.com
19	Cleora	Mosciski-Towne	34	Jerrell23@hotmail.com

const { t } = useI18n("table")
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const rowCount = 40
const defaultData = useMemo<Data[]>(() => createData(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	Audra	Schultz	54	Xander15@gmail.com
1	Kristopher	Hand	62	Gerson.Cormier@yahoo.com
2	Mariam	Grady	25	Jade85@hotmail.com
3	Ansley	Gutmann	30	Tomasa27@hotmail.com
4	Amara	Sawayn	32	Roberto80@yahoo.com
5	Jada	Brekke	65	Adah.Hoeger@hotmail.com
6	Roderick	Feest	31	Tommie6@yahoo.com
7	Arnoldo	Corwin	57	Ashlynn_Bechtelar99@hotmail.com
8	Palma	Powlowski	23	Orie_Kautzer@hotmail.com
9	Henderson	Reynolds-Franecki	25	Enoch.Rippin@gmail.com
10	Kody	Grady	47	Garnet96@gmail.com
11	Arnulfo	Casper	56	Jaylen33@hotmail.com
12	Romaine	Carroll	26	Leland_Wolf5@hotmail.com
13	Dell	Brown	25	Jesse64@yahoo.com
14	Serena	Watsica	25	Vladimir.Bayer@gmail.com
15	Emmalee	Leuschke	26	Garth77@yahoo.com
16	Abbey	Lakin	39	Clarissa_Torp27@yahoo.com
17	Keyshawn	Sipes	58	Jacinthe_Champlin@gmail.com
18	Icie	West	25	Adella4@gmail.com
19	Camron	DuBuque	45	Theron_Gottlieb45@gmail.com

const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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	Aylin	Reinger	18	Bridgette63@gmail.com
1	Luz	Farrell	65	Scarlett7@hotmail.com
2	Alan	Goyette	62	Ernesto.Treutel57@hotmail.com
3	Myra	Stehr	22	Ambrose_Wintheiser@hotmail.com
4	Elaina	Koelpin	41	Zola_Mueller56@hotmail.com
5	Ashly	Champlin	39	Marilou.Connelly82@yahoo.com
6	Cameron	Lueilwitz	57	Anabel63@hotmail.com
7	Gaston	Block	38	Albertha.Wilderman@hotmail.com
8	Willow	Adams	46	Deshaun_Flatley@yahoo.com
9	Renee	Connelly	63	Janie46@yahoo.com

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

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	Ariane	Toy	25	Jacey_Collins@gmail.com
1	Hester	O'Reilly	56	Enola.Parker@hotmail.com
2	Merl	Watsica	51	Ryann_Yundt@hotmail.com
3	Al	Kunze	27	Josiane_Kunze82@hotmail.com
4	Marie	Klocko	46	Brown22@hotmail.com
5	Yazmin	Schuster	63	Garrick75@hotmail.com
6	Everardo	Krajcik	40	Madilyn_Huels@yahoo.com
7	Agustin	Cartwright	21	Skyla66@gmail.com
8	Ellie	Tillman	30	Krystal6@hotmail.com
9	Keyon	Glover	33	Josefa_Klocko33@gmail.com

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

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	Daisha	Conroy	28	Savion10@hotmail.com
1	Davonte	Abshire	37	Gussie.Herzog@gmail.com
2	Ismael	Effertz	49	Hilario_Herman@yahoo.com
3	Vinnie	Jones	55	Ottis.Wisoky-Murphy@hotmail.com
4	Delilah	Gutmann	37	Fletcher97@gmail.com
5	Lesley	Schimmel	53	Stanton.Cronin@yahoo.com
6	Richmond	Huels	45	Doyle33@yahoo.com
7	Kaia	Schamberger	60	Mittie.Lindgren61@hotmail.com
8	Kenya	Bartoletti	21	Fernando.Ernser@hotmail.com
9	Cleve	Haag	30	Ferne_Wilkinson@yahoo.com

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

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	Selena	Hand-Dooley	27	Beulah.Bednar@gmail.com
1	Jamarcus	Fahey	40	Milo_Feest4@yahoo.com
2	Keely	Maggio	27	Estel_Ebert75@hotmail.com
3	Darlene	Lynch	20	Joanny.Orn@hotmail.com
4	Herminio	Nolan	32	Brett_OKeefe@yahoo.com
5	Uriah	Kulas	40	Erich91@gmail.com
6	Jeramie	Bruen	36	Manuela_Senger93@gmail.com
7	Elmira	Mitchell	43	Johnnie30@hotmail.com
8	Anjali	Corwin	44	Royal_Keeling84@hotmail.com
9	Unique	Dach	55	Kasey_Sipes@gmail.com

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

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	Shaina	Rippin	30	Rosario_Littel48@yahoo.com
1	Madie	Graham	59	Winona.Hoeger31@yahoo.com
2	Heather	Mann	51	Sienna_King@yahoo.com
3	Brain	Kiehn	43	Ruthie.Johnston@gmail.com
4	Sister	Pagac	46	Heaven_Sanford17@gmail.com
5	Adella	Moore	56	Jody_Schmeler@hotmail.com
6	Chanel	Johns	24	Hazel.Grant52@hotmail.com
7	Bianka	Gleichner	53	Arianna.Denesik25@gmail.com
8	Paula	Johns-Borer	24	Tessie.Haley8@yahoo.com
9	Mariam	Huel	55	Raul.Schmidt@yahoo.com

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

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	Martine	Hauck	47	Emilia6@hotmail.com
1	Savanah	Donnelly	34	Zackery81@hotmail.com
2	Kasey	Carroll	37	Lester.King12@hotmail.com
3	Brennan	VonRueden	33	Gussie_Greenfelder@hotmail.com
4	Brigitte	Schneider	57	Claudia.Mayert19@gmail.com
5	Pattie	Volkman	28	Kathleen_Green12@gmail.com
6	Rodger	Kiehn	63	Sonya.Langworth@gmail.com
7	Antoinette	Bauch	45	Alison_Ward@yahoo.com
8	Kennedy	Macejkovic	35	Viviane_Wolff@hotmail.com
9	Randall	Fisher	24	Annetta.Bartoletti@hotmail.com

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

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	Garth	Rice	43	Jack.Kovacek-Osinski46@gmail.com
1	Graham	Keebler	58	Adela98@yahoo.com
2	Therese	McKenzie	47	Adalberto.OConnell97@yahoo.com
3	Finn	Rice	38	Timmy42@gmail.com
4	Arvid	Collins	25	Odie.West13@yahoo.com
5	Loren	Kuhic	18	Misael.Abshire72@gmail.com
6	Maximillia	Konopelski	31	Dedric_Huels60@gmail.com
7	Sally	Schaden	65	Herminia.Klein-Ondricka@yahoo.com
8	Sheila	Jenkins	29	Amaya_Monahan@hotmail.com
9	Clarissa	Toy	20	Jensen_Sanford-Roob38@gmail.com

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

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
2	Ryder	Johnston	61	Valentin18@gmail.com
4	Ashly	Krajcik	41	Nedra19@gmail.com
5	Ozella	Lakin	36	Jarrod92@gmail.com
6	Angelita	Senger	38	Laisha_Leuschke@gmail.com
7	Krista	Kuvalis	31	Aron.Bashirian@gmail.com

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

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	Winona	Klein	49	Misty_Doyle71@yahoo.com
1	Brandy	MacGyver	59	Fernando_Sauer28@hotmail.com
2	Madaline	Terry	35	Janice90@yahoo.com
3	Dayne	Tromp	59	Garnet_Dicki45@gmail.com
4	Christian	Legros-Reinger	46	Lucius75@yahoo.com
5	Roy	Walker	21	Celestine_Predovic@hotmail.com
6	Grant	Keeling	58	Dorcas14@gmail.com
7	Caterina	Emmerich	64	Garett.Crooks@yahoo.com
8	Vern	Wilkinson	30	Daija62@hotmail.com
9	Magnus	Bartell	55	Brian.Purdy9@gmail.com

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

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	Myrl	Simonis	51	Santa_Rutherford-Hammes@hotmail.com
1	Carole	Powlowski	47	Melisa_Dickinson36@yahoo.com
2	Alexandria	McGlynn	44	Cristina.Walsh58@yahoo.com
3	Neha	Haley	55	Mozell.MacGyver69@gmail.com
4	Aryanna	Ziemann	27	Esther95@yahoo.com
5	Aidan	Blanda	39	Jerrod_Lynch50@yahoo.com
6	Zachery	Kertzmann	29	Kim.Nader@yahoo.com
7	Weston	Langworth	18	Melyna.Beatty@yahoo.com
8	Roy	Osinski	33	Yvette70@gmail.com
9	Edgar	Quigley	50	Ulices.Mertz@yahoo.com

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

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	Juliet	Bode	27	Gladys56@gmail.com
1	Vicenta	Rau	57	Triston.Romaguera@hotmail.com
2	Emerald	Donnelly	28	Roma64@hotmail.com
3	Hazle	Lubowitz	65	Paxton37@gmail.com
4	Daniela	Hackett	62	Vilma.Frami@hotmail.com
5	Sonya	Vandervort	58	Eloy82@yahoo.com
6	Rosalee	Kiehn	63	Elisabeth_Ullrich@hotmail.com
7	Geoffrey	Kshlerin	35	Stanford.Hilll13@gmail.com
8	Bernita	Sauer	32	Nikita.Langworth@yahoo.com
9	Elza	Jacobson	20	Vivianne.Upton81@hotmail.com

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

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.
`highlightOnHover`	`false`	`boolean` If `true`, highlight the row when the table row is hovered.
`highlightOnSelected`	`false`	`boolean` If `true`, highlight the row when the table row is selected.
`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.
`stickyFooter`	`false`	`boolean` If `true`, display the sticky footer.
`stickyHeader`	`false`	`boolean` If `true`, display the sticky header.
`striped`	`false`	`boolean` If `true`, display striped rows.
`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.
`withBorder`	`false`	`boolean` If `true`, display the outer border of the table.
`withCheckbox`	`true`	`boolean` If `true`, the table will have a checkbox column.
`withColumnBorders`	`false`	`boolean` If `true`, display line on the columns of the table.
`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

Currently, this section is being updated due to the migration of v2.

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