Table

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

id	firstName	lastName	age	email
0	Giovanni	Veum	58	Dortha78@yahoo.com
1	Alvis	Lakin	41	Torey20@gmail.com
2	Hillard	Bednar	29	Ova_Walker@yahoo.com
3	Jamarcus	Feil	37	Eduardo_Grimes82@yahoo.com
4	Charlie	Mitchell	48	Fred_Ward83@gmail.com
5	Lawson	Bauch	44	Salma39@hotmail.com
6	Kathleen	Huel	43	Danika.Russel@hotmail.com
7	Easton	Grady	47	Jovanny97@gmail.com
8	Cecil	Yost	51	Clifton_MacGyver@hotmail.com
9	Tevin	Bashirian	64	Janiya_Lindgren58@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	Cedrick	Huel	37	Betsy.Sporer-Dickens@hotmail.com
1	Megane	Rempel	33	Jeffry.Thompson@hotmail.com
2	Cielo	Hahn	56	Daryl51@yahoo.com
3	Felipa	Hoeger	45	Stone49@hotmail.com
4	Lora	Cartwright	28	Chester_Volkman@gmail.com
5	Zoey	Metz	19	Idell.Sawayn8@hotmail.com
6	Yasmine	Strosin	63	Daphney_Gorczany@hotmail.com
7	Magnolia	Altenwerth	22	Zoie.Lubowitz9@yahoo.com
8	Josh	Hintz	49	Kirsten83@yahoo.com
9	Judge	Hermiston	62	Lewis_Corkery59@hotmail.com

id	firstName	lastName	age	email
0	Cedrick	Huel	37	Betsy.Sporer-Dickens@hotmail.com
1	Megane	Rempel	33	Jeffry.Thompson@hotmail.com
2	Cielo	Hahn	56	Daryl51@yahoo.com
3	Felipa	Hoeger	45	Stone49@hotmail.com
4	Lora	Cartwright	28	Chester_Volkman@gmail.com
5	Zoey	Metz	19	Idell.Sawayn8@hotmail.com
6	Yasmine	Strosin	63	Daphney_Gorczany@hotmail.com
7	Magnolia	Altenwerth	22	Zoie.Lubowitz9@yahoo.com
8	Josh	Hintz	49	Kirsten83@yahoo.com
9	Judge	Hermiston	62	Lewis_Corkery59@hotmail.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	Beverly	Erdman	64	Daphnee35@hotmail.com
1	Raul	Dickens	60	Johnson_Lockman@gmail.com
2	Yvonne	Langosh	24	Price.Sanford49@yahoo.com
3	Justice	VonRueden	61	Nicklaus98@gmail.com
4	Fausto	Kreiger	53	Novella_Kautzer@hotmail.com
5	Maci	Wintheiser	54	Lue_Blick@gmail.com
6	Wilson	Ankunding	36	Della11@gmail.com
7	Cale	Turcotte	64	Alf58@yahoo.com
8	Dovie	Berge	47	Antwon46@gmail.com
9	Blaise	Emmerich	31	Jettie_Von@gmail.com

id	firstName	lastName	age	email
0	Beverly	Erdman	64	Daphnee35@hotmail.com
1	Raul	Dickens	60	Johnson_Lockman@gmail.com
2	Yvonne	Langosh	24	Price.Sanford49@yahoo.com
3	Justice	VonRueden	61	Nicklaus98@gmail.com
4	Fausto	Kreiger	53	Novella_Kautzer@hotmail.com
5	Maci	Wintheiser	54	Lue_Blick@gmail.com
6	Wilson	Ankunding	36	Della11@gmail.com
7	Cale	Turcotte	64	Alf58@yahoo.com
8	Dovie	Berge	47	Antwon46@gmail.com
9	Blaise	Emmerich	31	Jettie_Von@gmail.com

id	firstName	lastName	age	email
0	Beverly	Erdman	64	Daphnee35@hotmail.com
1	Raul	Dickens	60	Johnson_Lockman@gmail.com
2	Yvonne	Langosh	24	Price.Sanford49@yahoo.com
3	Justice	VonRueden	61	Nicklaus98@gmail.com
4	Fausto	Kreiger	53	Novella_Kautzer@hotmail.com
5	Maci	Wintheiser	54	Lue_Blick@gmail.com
6	Wilson	Ankunding	36	Della11@gmail.com
7	Cale	Turcotte	64	Alf58@yahoo.com
8	Dovie	Berge	47	Antwon46@gmail.com
9	Blaise	Emmerich	31	Jettie_Von@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	Janelle	Stanton	34	Jane_Goldner@gmail.com
1	Aurelia	Nitzsche	59	Casimir24@hotmail.com
2	Marisol	Veum	24	Harvey35@gmail.com
3	Adelia	Schultz	25	Hilbert79@gmail.com
4	Lindsay	Thiel	33	Eusebio_Stiedemann22@yahoo.com
5	Margot	Nader	61	Marty_Donnelly@hotmail.com
6	Rozella	Gottlieb	64	Adrain.Hackett16@yahoo.com
7	Lora	McGlynn	50	Davon.Emard80@hotmail.com
8	Nathanial	Gutkowski	40	Yasmine_Huels59@hotmail.com
9	Lourdes	Ferry	60	Nathen.Barrows25@yahoo.com

id	firstName	lastName	age	email
0	Janelle	Stanton	34	Jane_Goldner@gmail.com
1	Aurelia	Nitzsche	59	Casimir24@hotmail.com
2	Marisol	Veum	24	Harvey35@gmail.com
3	Adelia	Schultz	25	Hilbert79@gmail.com
4	Lindsay	Thiel	33	Eusebio_Stiedemann22@yahoo.com
5	Margot	Nader	61	Marty_Donnelly@hotmail.com
6	Rozella	Gottlieb	64	Adrain.Hackett16@yahoo.com
7	Lora	McGlynn	50	Davon.Emard80@hotmail.com
8	Nathanial	Gutkowski	40	Yasmine_Huels59@hotmail.com
9	Lourdes	Ferry	60	Nathen.Barrows25@yahoo.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	Stephen	Heller	29	Ceasar_Keeling@hotmail.com
1	Paige	Feest	21	Name69@yahoo.com
2	Hudson	Ebert	64	Kelley_Jones96@yahoo.com
3	Jed	Senger	46	Shayne_Klocko@gmail.com
4	Uriel	Prohaska	48	Stevie55@hotmail.com
5	Rhianna	Ratke-Skiles	48	Bo.Stroman23@gmail.com
6	Oceane	Collins	28	Erick3@yahoo.com
7	Lavonne	West	55	Rowena.Franey@gmail.com
8	Diamond	Crooks	42	Cullen55@yahoo.com
9	Ryder	Collins	32	Kenna_Prosacco67@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	Abigail	Howell	25	Vivian.Morar@yahoo.com
1	Joesph	Kihn	60	Dayton.Abernathy@hotmail.com
2	Moises	Schmeler	56	Gene25@hotmail.com
3	Juliana	Hermann-Corkery	63	Zander44@yahoo.com
4	Silas	O'Kon	61	Xander91@gmail.com
5	Delphia	Schultz	63	Myles_Sauer@yahoo.com
6	Delaney	Morar	65	Raegan17@gmail.com
7	Mariane	Kris	50	Ahmad_Stoltenberg@yahoo.com
8	Alverta	Aufderhar-Haley	63	Gavin.Bechtelar36@yahoo.com
9	Zella	Christiansen	58	John_Rath67@hotmail.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	Brandyn	Hudson	57	Heloise30@yahoo.com
1	Amaya	Aufderhar	30	Troy66@yahoo.com
2	Edythe	Mann	65	Finn17@hotmail.com
3	Marcus	Hessel	26	Art_Cormier@gmail.com
4	Vickie	Little	49	Madison.Kovacek@gmail.com
5	Carolanne	Hammes	30	Randy.Jacobi@yahoo.com
6	Reilly	Ankunding	35	Emmitt77@gmail.com
7	Alvera	Corkery	35	Laney9@yahoo.com
8	Carmela	Douglas	35	Lesly_Heidenreich@yahoo.com
9	Albert	Waelchi	39	Turner_Ondricka@yahoo.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	Jolie	Gutkowski	32	Santina.Hettinger@yahoo.com
1	Carley	Wolff	29	Jeffry_Langosh-Jacobson40@hotmail.com
2	Frank	Kassulke	31	Verda16@gmail.com
3	Karson	Keebler	48	Salvador_Emmerich@yahoo.com
4	Cali	Romaguera	54	Gaston.Denesik99@yahoo.com
5	Carroll	Harvey	57	Samantha40@hotmail.com
6	Corine	Dare	39	Amara.Mosciski@gmail.com
7	Alexandro	Cartwright	65	Bell0@yahoo.com
8	Theresia	Reynolds	60	Brenden67@hotmail.com
9	Reginald	Mayer	45	Kelli20@hotmail.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	Erick	Hansen	27	Anastacio.Greenholt@yahoo.com	(385) 536-8124 x8090	admin	inactive	11/19/2024	10/15/2025
1	Sim	Walsh	47	Rashad.Beahan@hotmail.com	437.497.6569 x971	user	active	2/18/2025	12/27/2024
2	Ilene	Morissette	40	Rashad_Boyer@gmail.com	465-963-1182 x0949	user	active	8/10/2025	7/25/2025
3	Cassandra	Cremin	43	Mollie4@hotmail.com	211-816-4167	user	active	12/25/2024	11/13/2024
4	Ayana	Becker	49	Sarah74@hotmail.com	(770) 724-9320 x6443	admin	inactive	10/17/2025	8/16/2025
5	Theresia	Sanford	62	Alia55@gmail.com	871.502.9878	admin	active	5/30/2025	11/27/2024
6	Salvatore	West	63	Heaven.Jacobson55@yahoo.com	(722) 613-1931 x855	admin	inactive	3/10/2025	11/30/2024
7	Terrence	Rutherford	34	Gabe9@hotmail.com	1-490-848-5306	user	inactive	8/2/2025	12/6/2024
8	Dayne	Tremblay-Robel	41	Itzel_Gibson@yahoo.com	737-209-7878	user	inactive	5/15/2025	3/11/2025
9	Kathleen	Wisoky	58	Cloyd.Kling@hotmail.com	981.823.9868 x1942	user	inactive	12/12/2024	6/11/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	Noel	Cremin	20	Eddie_Welch66@hotmail.com
1	Toby	Kshlerin	32	Sincere_Kuhlman99@hotmail.com
2	Abagail	Bartoletti	26	Bette45@yahoo.com
3	Kayleigh	Greenholt	45	Jaquelin_Dach@hotmail.com
4	Weston	Wilkinson	40	Marian_Lebsack8@hotmail.com
5	Riley	Emmerich	42	Richard.Fay@gmail.com
6	Stella	Schulist	47	Hugh52@yahoo.com
7	Mazie	Durgan	50	Linnie28@hotmail.com
8	Karelle	Kessler	18	Camron_Farrell@hotmail.com
9	Lilly	Osinski	50	Vernice76@yahoo.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	Burley	Wunsch	61	Shanelle67@gmail.com
1	River	Dicki	59	Harley98@gmail.com
2	Norene	Zieme	23	Hortense_Franey-Turner44@yahoo.com
3	Zander	Steuber	46	Jonathan_Bergstrom@gmail.com
4	Tad	Langosh	18	Sister_Cartwright60@gmail.com
5	Kim	Ledner-Willms	40	Kira_Tillman0@hotmail.com
6	Jarod	Toy	65	Shany.Luettgen58@yahoo.com
7	Nova	Blick	20	Clifford_Gottlieb@hotmail.com
8	Mortimer	Morar	49	Ressie14@hotmail.com
9	Katrine	Kovacek	50	Neal5@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	May	Collins	47	Robb10@gmail.com
1	Eudora	Block	51	Lazaro14@hotmail.com
2	Judson	Kozey	48	Carmen87@hotmail.com
3	Geo	Hilll	30	Maude_Wisoky78@yahoo.com
4	Stanford	Rutherford	51	Eden.Marks-Jacobson@gmail.com
5	Jonas	Wiza	31	Marielle_Waters@hotmail.com
6	Ashtyn	Rempel	61	Chloe_Witting10@hotmail.com
7	Tristian	Douglas	22	Stefanie10@gmail.com
8	Yadira	Swaniawski	33	Jesus_Feest69@gmail.com
9	Kamryn	Strosin	55	Mya.Dietrich62@hotmail.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	Paul	Bosco	59	Andreane29@hotmail.com
1	Leta	Ernser	60	Dillon68@yahoo.com
2	Kiera	Koelpin	25	Nathen56@hotmail.com
3	Sally	Crona	45	Kamron.Casper@hotmail.com
4	Aurore	White	31	Delbert.Predovic6@hotmail.com
5	Sedrick	Runolfsson	42	Dawson.Davis12@gmail.com
6	Trevion	Hilpert	20	Hoyt.Padberg52@yahoo.com
7	Allan	Mertz	32	Modesto.Hartmann25@yahoo.com
8	Wilber	Hessel	54	Garth.Emard81@hotmail.com
9	Ursula	Douglas	36	Tianna_Franey95@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	Rylan	Kunde	20	Tyra49@hotmail.com
1	Rosanna	Tillman	30	Jeremie_Toy@yahoo.com
2	Percival	Leannon	55	Kacey15@yahoo.com
3	Jevon	Raynor	28	Carol16@yahoo.com
4	Micheal	Osinski	48	Meda.Bechtelar14@hotmail.com
5	Dayna	Ernser	61	Leslie.Bergstrom@hotmail.com
6	Emory	Zemlak	54	Carmen_Schumm25@hotmail.com
7	Roxane	Hoeger	42	Hallie.Douglas@yahoo.com
8	Herbert	Dach	24	Jacklyn.Turcotte2@yahoo.com
9	Fanny	Metz	64	Walker.Beatty@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	Scarlett	Gusikowski	64	Vanessa.Pouros10@gmail.com
1	Jerald	Wolff	62	Precious96@gmail.com
2	Trever	Dooley-Boyer	43	Maryse55@yahoo.com
3	Stanley	Crist	29	Jess.Beier27@yahoo.com
4	Nikolas	Schamberger	54	Markus_Koch65@yahoo.com
5	Meggie	Koss	48	Keeley_Muller78@hotmail.com
6	Garrick	Collier	23	Alexander38@gmail.com
7	Arthur	Rempel	65	Timmy32@hotmail.com
8	Carolina	Harvey-Koch	29	Whitney_Gleichner63@gmail.com
9	Brice	Wunsch	48	Anderson_Effertz@gmail.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
0	Lucinda	Raynor	57	Rollin55@hotmail.com
8	Willard	Davis	55	Lily39@yahoo.com
9	Elnora	Murazik	55	Libbie.Bailey11@yahoo.com
1	Ernesto	Langosh	53	Dallin_Ferry@yahoo.com
7	Lavada	Shanahan	51	Fabian68@gmail.com
3	Nona	Bernier	48	Brenden7@yahoo.com
6	Gonzalo	Hartmann	48	Morgan_Beer@yahoo.com
5	Imani	Langosh	41	Georgette.Jenkins@gmail.com
4	Anjali	Bogan	31	Carolanne16@hotmail.com
2	Marshall	Rowe	21	Barbara_Mann75@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	Dorothy	Kuhlman	44	Mertie91@hotmail.com
1	Filomena	Hansen	54	Macy_Dare23@hotmail.com
2	Freida	Marvin	57	Bell_Marvin@yahoo.com
3	Harmon	Hyatt	26	August_Wuckert54@hotmail.com
4	Ines	Cole	54	Tania27@hotmail.com
5	Gerardo	Ritchie	46	Noemy33@yahoo.com
6	Freeman	Schamberger	59	Spencer_Considine@hotmail.com
7	Elwin	Rodriguez	22	Jace.Auer66@yahoo.com
8	Julia	Christiansen-Koss	29	Reggie36@yahoo.com
9	Kitty	Hansen	39	Clay_Gibson65@yahoo.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	Armani	Murray	61	Deja15@yahoo.com
1	Alisha	Marvin	39	Celia93@gmail.com
2	Lucy	Lesch	33	Fernando7@yahoo.com
3	Leora	Nicolas	63	Emelia79@gmail.com
4	Bethany	Ullrich	48	Susanna.Stracke-Harber@hotmail.com
5	Jacey	Kulas	51	Teagan_Murray71@gmail.com
6	Esther	King	22	Marina_Zulauf@yahoo.com
7	Bennett	Batz	37	Sienna.Greenfelder@gmail.com
8	Durward	Conroy	23	Jed_Friesen62@hotmail.com
9	Leann	Conroy	36	Annie_Klein@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	Lavada	Smith	37	Gisselle_Corwin@gmail.com
1	Jammie	Kreiger	45	Brycen77@hotmail.com
2	Isidro	Wiegand	18	Alana78@hotmail.com
3	Gregg	Walter	24	Tyree.Robel50@hotmail.com
4	Trent	Ratke	25	Bell75@hotmail.com
5	Elmo	Bernier	24	Kim32@hotmail.com
6	Lorenzo	Murphy	57	Joe.Prohaska@gmail.com
7	Jimmie	Boyle	61	Sandrine15@hotmail.com
8	Kim	Herman	24	Kirk27@yahoo.com
9	Laurence	Schimmel	58	Nola_Schultz61@hotmail.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	Josue	Walsh	47	Eliza59@yahoo.com
1	Abby	Gibson	23	Marta_Lockman56@hotmail.com
2	Margot	Murray	41	Allison.Huel@hotmail.com
3	Reggie	Altenwerth	50	Celestino69@gmail.com
4	Alia	Upton	40	Sammy_Altenwerth36@yahoo.com
5	Jordan	Cole	38	Cordell_Bergstrom1@yahoo.com
6	Carroll	Glover	40	Easter85@gmail.com
7	Macie	Lehner	35	Calista.Hansen2@gmail.com
8	Jess	Dare	28	Friedrich.Stehr98@hotmail.com
9	Orpha	Quigley	50	Nikolas.Funk@gmail.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	Watson	Brown	60	Carolanne_Trantow93@gmail.com
1	Patrick	Durgan	61	Herman_OConnell@hotmail.com
2	Isabel	Wunsch	48	Tom35@gmail.com
3	Elvis	Jast	64	Jaren.Donnelly85@hotmail.com
4	Tyra	Stiedemann	20	Antone99@yahoo.com
5	Landen	Medhurst	25	Orie_Boehm@hotmail.com
6	Virginia	Casper	65	Raul96@gmail.com
7	Gilberto	Schimmel	24	Lillian7@yahoo.com
8	Dillon	Jacobs	19	Lawson.Wunsch8@yahoo.com
9	Rylee	Aufderhar	35	Aleen67@hotmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Santiago	Roob	18	Addie.Pacocha@yahoo.com
1	Rozella	Larkin	48	Godfrey_Cruickshank48@hotmail.com
2	Roscoe	Kautzer	46	Leilani_Waters@hotmail.com
3	Alessia	Conn	23	Brenna92@gmail.com
4	Antonette	Kihn	60	Eulah99@hotmail.com
5	Trinity	Lind	39	Jennifer2@hotmail.com
6	Jamey	Auer	26	Alexandria_Kling16@yahoo.com
7	Zachery	Stoltenberg	28	Newell.Conn@hotmail.com
8	Ollie	Shanahan	60	Noel_Orn38@yahoo.com
9	Elian	Fisher	52	Jo_Bailey@gmail.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	Myrtle	Kutch	32	Guido.Keebler@yahoo.com
1	Johanna	Wilkinson	65	Eda.Jast@yahoo.com
2	Elyssa	Abbott-Gislason	55	Christelle_Lind@yahoo.com
3	Brendon	Leuschke	34	Edmund_Gorczany@yahoo.com
4	Casey	Hirthe	40	Edd87@gmail.com
5	Doris	Langworth	46	Lucinda6@gmail.com
6	Herman	Schaden	28	Gail_Brekke@hotmail.com
7	Kayli	Walter	56	Alexzander.Koelpin83@gmail.com
8	Hermann	Batz	50	Colt.Cartwright@gmail.com
9	Narciso	Durgan	42	Dennis.Reichel-Treutel@yahoo.com
10	Harry	Walsh	25	Alden_Price@gmail.com
11	Golda	Fisher	53	Katelin.Spencer@gmail.com
12	Clarabelle	Gorczany	41	Jackeline25@yahoo.com
13	Jada	Reynolds	59	Wayne_Zboncak@yahoo.com
14	Lucious	Gerhold	58	Gardner_Franecki33@yahoo.com
15	Darlene	Hickle	37	Julianne_Cummerata@hotmail.com
16	Zena	Wolf	57	Rory.Cassin44@yahoo.com
17	Gregg	Stroman	56	Ladarius31@hotmail.com
18	Vincenza	O'Hara	42	Dorthy90@hotmail.com
19	Christopher	O'Hara	49	Lisa.Sipes@yahoo.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	Abe	Hagenes	48	Zackary44@hotmail.com
11	Winona	Metz	25	Christopher23@hotmail.com
12	Kathryn	Kirlin	37	Skylar10@hotmail.com
13	Lolita	Hayes	35	Mollie.Franecki@hotmail.com
14	Marc	Bogisich	49	Kristopher46@hotmail.com
15	Alvis	Carter	48	Mellie65@gmail.com
16	Chester	Mann	61	Makenna_Buckridge-Ruecker@hotmail.com
17	Brigitte	Kozey	48	Dominic79@yahoo.com
18	Glen	Crona	60	Jarvis_Kris30@gmail.com
19	Taurean	Mitchell	50	Zackery36@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	Katelin	Parisian	55	Susie_Beer@gmail.com
1	Joy	Lindgren	45	Abby.McCullough49@hotmail.com
2	Eli	Hirthe	28	Weston.Paucek68@hotmail.com
3	Dallas	Grady	56	Santina.Kling42@gmail.com
4	Angelica	Mann	49	Maida_Cassin55@yahoo.com
5	Donnell	Strosin	61	Lawrence83@gmail.com
6	Sister	Bednar	41	Marian18@gmail.com
7	Sonny	Johns	61	Jay_Jones88@hotmail.com
8	Vanessa	Denesik	55	Justine_Raynor83@hotmail.com
9	Bernadette	Bayer	35	Giovanni.Larson@yahoo.com
10	Baron	Stehr	56	Gus25@yahoo.com
11	David	Leffler	27	Devan_Cummerata@hotmail.com
12	Dulce	Braun	32	Carey_Thompson38@yahoo.com
13	Lauren	Kilback	27	Kaleigh25@yahoo.com
14	Monserrate	Treutel	49	Hank17@yahoo.com
15	Olen	Rosenbaum	65	Sonya_Lynch75@hotmail.com
16	Westley	Shields	46	Janis28@hotmail.com
17	Molly	Jenkins	35	Grayson_Herman0@hotmail.com
18	Bruce	Witting	43	Melissa.Altenwerth66@gmail.com
19	Gaston	Schimmel	31	Deion_Mitchell@yahoo.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	Eunice	Carroll	62	Theresa70@gmail.com
1	Nona	Langosh	43	Derek.Green75@yahoo.com
2	Bradford	Runolfsson	52	Earnestine.Smitham@yahoo.com
3	Noemie	McLaughlin	63	Erich_Wilkinson@gmail.com
4	Ismael	Carroll	42	Toney.Sanford@hotmail.com
5	Abdul	Hilll	42	Jamie.Wunsch@hotmail.com
6	Tyrese	Abshire	61	Camron_Hammes@yahoo.com
7	Mariana	Schiller	39	Wyatt.Cronin69@gmail.com
8	Geoffrey	Mueller-Schneider	61	River.Mayert@gmail.com
9	Francisco	Jerde	53	Earlene_Nicolas16@yahoo.com
10	Marlon	Johnston	32	Ole73@hotmail.com
11	Jairo	Hilll	56	Valentina.Prosacco84@yahoo.com
12	Elouise	Kohler	53	Kaylie_Hettinger@yahoo.com
13	Frieda	Ward	23	Hilton.Nikolaus35@gmail.com
14	Paolo	Beahan	27	Ottis.Dickinson49@hotmail.com
15	Elwyn	Roob	41	Gabriel.Kuhn@yahoo.com
16	Bennett	Farrell	57	Desiree_Gleichner82@yahoo.com
17	Alene	Harris	38	Alberto.Marks12@gmail.com
18	Lazaro	Brown	34	Jordane.Jerde@hotmail.com
19	Callie	Hoppe	54	Soledad1@hotmail.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	Immanuel	Kuphal	56	Armand87@gmail.com
1	Spencer	Gislason	30	Trudie.Stiedemann@gmail.com
2	Pietro	Sporer	37	Chadrick59@hotmail.com
3	Mack	Rippin-Crist	63	Daniela.Jacobi@gmail.com
4	Mazie	Zulauf	25	Candice.Jacobson-Hintz74@hotmail.com
5	Jewel	Purdy	64	Bart.Gerhold27@yahoo.com
6	Arvilla	Schinner	38	Darrin_Lehner@gmail.com
7	Margie	Wunsch-Adams	38	Devin40@yahoo.com
8	Arlo	Schroeder	34	Aracely67@yahoo.com
9	Cassie	Lynch	31	Whitney_Bogan46@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	Iva	Schuppe	27	Johnathon81@yahoo.com
1	Randi	Schuster-Ebert	51	Arnold.Auer39@yahoo.com
2	Fatima	Hudson	45	Darrick.Nikolaus@hotmail.com
3	Beverly	Satterfield	64	Evangeline.Torphy14@yahoo.com
4	Caroline	Stamm-Hahn	50	Tomas.Kuhn@gmail.com
5	Sincere	Howe	18	Neal_Rath42@hotmail.com
6	Skylar	Bayer	64	Kristoffer_Heller83@gmail.com
7	Alessandra	O'Hara	55	Kaela.Howe@yahoo.com
8	Icie	Mayert	19	Deja_OConner@gmail.com
9	Leone	Lynch	29	Letha.Schaden@hotmail.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	Ima	Walsh	45	Marlee17@yahoo.com
1	Doris	Auer-Kuhic	55	Ronny49@gmail.com
2	Casey	Nitzsche-Erdman	37	Fred_Kunde@yahoo.com
3	Duncan	Howe	30	Osvaldo.Johnston@hotmail.com
4	Tito	Heaney	32	Alicia72@gmail.com
5	Olaf	Nicolas	44	Donald1@yahoo.com
6	Pedro	Armstrong	39	Samantha.Hagenes@gmail.com
7	Antoinette	Lakin	36	Ernie_Blick87@hotmail.com
8	Herman	Auer	44	Arthur30@gmail.com
9	Osborne	Kutch	34	Rachel.Hackett62@hotmail.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	Thomas	Hermann	49	Anais_Harvey-Abshire0@gmail.com
1	Amelia	Raynor	39	Cydney_Hammes@yahoo.com
2	Jannie	Treutel	53	Cristal93@hotmail.com
3	Elvera	Crooks	60	Ofelia_MacGyver@yahoo.com
4	Maxime	Aufderhar	22	Carleton67@hotmail.com
5	Caesar	Prosacco	32	Sonia_Lebsack@yahoo.com
6	Marcia	Zemlak	53	Silas_Von@gmail.com
7	Clifton	Cremin	61	Donnie75@gmail.com
8	Brandon	Funk	43	Carole20@hotmail.com
9	Howard	Stiedemann	35	Hellen.Walter-Baumbach@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	Keshawn	Cronin	24	Myrtice40@gmail.com
1	Destiney	Weber-Shields	42	Quentin.Kiehn@yahoo.com
2	Margarita	Harvey	38	Ava.Beatty72@gmail.com
3	Sanford	Ziemann	59	Emerson_Reichert@gmail.com
4	Nikolas	Hilll-Littel	19	Jadyn_Jacobson59@hotmail.com
5	Hayley	Pagac	43	Johnpaul72@gmail.com
6	Matilde	Armstrong	45	Jerrold.Murazik@yahoo.com
7	Ezequiel	Fay	50	Agustin_Parker14@yahoo.com
8	Federico	Cronin	48	Lavern_Von94@yahoo.com
9	Curt	Torphy	46	Harry.Goodwin@hotmail.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	Leonel	Kutch	54	Sherwood.Larson@hotmail.com
1	Lenora	Jacobson	61	Murray56@yahoo.com
2	Deion	Blanda	32	Charlene7@gmail.com
3	Johnathan	Ruecker	65	Breana94@gmail.com
4	Stan	Sanford	58	Savanna.Ratke1@hotmail.com
5	Dortha	Keeling	45	Jackie_Rutherford@hotmail.com
6	Everette	Hintz	41	Katelynn76@gmail.com
7	Darrel	Mueller	19	Isabella.Erdman@gmail.com
8	Scottie	Legros	23	Moises.Hilpert@yahoo.com
9	Antonette	Wyman	51	Elvera.Gutmann56@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	Kip	Wolf	33	Christy37@hotmail.com
1	Birdie	Waelchi	42	Oran54@yahoo.com
2	Gunner	Rohan	21	Arvid_Harris@yahoo.com
3	Rick	Lang	55	Shaylee_Breitenberg@yahoo.com
4	Isabelle	Schneider-Klein	29	Wilhelm5@gmail.com
5	Shanna	Jast	47	Abner_Kovacek81@hotmail.com
6	Dana	Hand	24	Daniela.Heathcote@hotmail.com
7	Tom	Koelpin	65	Laurine_Reichert-Anderson64@yahoo.com
8	Philip	Nienow	40	Anika94@hotmail.com
9	Jack	Mann	45	Carlos.Dare-Reichel98@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
5	Larissa	Smith	36	Elena.Wolff17@gmail.com
7	Rocio	Brekke-McKenzie	52	Quinten46@gmail.com
8	Ernest	Witting	56	Stephen.Homenick91@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	Cecilia	McGlynn	54	Alison_Zulauf95@gmail.com
1	Holden	Mante	24	Rosalee.Ankunding43@gmail.com
2	Marielle	Nader	28	Kenny.Becker@hotmail.com
3	Leola	Monahan	51	Zackary_Predovic@gmail.com
4	Kelly	Rodriguez	39	Bonita68@gmail.com
5	Einar	Wolf	41	Lurline_Schuster@yahoo.com
6	Cory	Klocko	39	Andy85@gmail.com
7	Alysha	Stoltenberg	39	Nasir_Gottlieb@gmail.com
8	Heaven	Hudson	65	Gia.Sanford@gmail.com
9	Tommie	Tremblay	28	Elenor_Will50@yahoo.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	Leonor	Barrows	56	Junior.Welch@hotmail.com
1	Magali	Bode	64	Katherine49@hotmail.com
2	Rosalinda	Kshlerin	47	Rachel14@yahoo.com
3	Naomie	Schuppe	53	Irma_Feeney@hotmail.com
4	Abel	Turner	23	Hershel_Parisian@hotmail.com
5	Shaun	Crona	22	Janie_Rodriguez@yahoo.com
6	Francisca	Bernier	61	Kellen_Beier96@yahoo.com
7	Bridie	Kuhic	52	Kay12@gmail.com
8	Leo	Nader	36	Clint_Turner67@hotmail.com
9	Eladio	Cassin	63	Ronaldo.Bashirian@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	Franco	Casper	52	Cleve.Hermann@hotmail.com
1	Ima	Botsford	48	Annamae32@gmail.com
2	Murl	Kshlerin	53	Crawford74@hotmail.com
3	Adolf	Hamill	63	Melvina_Hackett6@gmail.com
4	Ricardo	Towne	60	Patsy6@hotmail.com
5	Furman	Olson	59	Flossie66@gmail.com
6	Marlon	Langworth	48	Kali_Stiedemann@hotmail.com
7	Josiah	Huels	18	Braden.Cronin@hotmail.com
8	Noemy	Metz	41	Emie_Cummings@hotmail.com
9	Donny	Hauck	28	Geovanny.Gerlach@gmail.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