Table

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

id	firstName	lastName	age	email
0	Antoinette	Goyette-Dickinson	24	Luisa.Johns78@yahoo.com
1	Kristian	Upton-Haley	40	Sherri.Heller@gmail.com
2	Antwon	Pagac	60	Kerry67@gmail.com
3	Dorothy	Hudson	48	Alfonso.Deckow20@hotmail.com
4	Viola	Stiedemann	51	Domingo_DuBuque@yahoo.com
5	Brady	Schaden	24	Josephine_Nader@hotmail.com
6	Willa	Lowe	64	Santa.Swift@gmail.com
7	Kathlyn	Donnelly	61	Margie36@hotmail.com
8	Clayton	Pouros	60	Meredith87@yahoo.com
9	Woodrow	Hoeger	42	Aaron.Carroll-Considine68@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	Kristie	McKenzie	45	Eldred92@hotmail.com
1	Catherine	Strosin	63	Jake_Yundt48@hotmail.com
2	Skye	Wiegand	42	Jill.Ledner73@gmail.com
3	Evan	Wyman	60	Walton60@gmail.com
4	Sadye	Roob	19	Claire.Stiedemann@yahoo.com
5	Jimmy	Hickle	55	Cesar89@hotmail.com
6	Naomi	Bogisich	41	Candida_Haley66@hotmail.com
7	Mack	Ferry	38	Ronaldo.Littel@gmail.com
8	Xavier	Skiles	43	Dangelo35@gmail.com
9	Kelly	Dickinson	44	Rhonda65@gmail.com

id	firstName	lastName	age	email
0	Kristie	McKenzie	45	Eldred92@hotmail.com
1	Catherine	Strosin	63	Jake_Yundt48@hotmail.com
2	Skye	Wiegand	42	Jill.Ledner73@gmail.com
3	Evan	Wyman	60	Walton60@gmail.com
4	Sadye	Roob	19	Claire.Stiedemann@yahoo.com
5	Jimmy	Hickle	55	Cesar89@hotmail.com
6	Naomi	Bogisich	41	Candida_Haley66@hotmail.com
7	Mack	Ferry	38	Ronaldo.Littel@gmail.com
8	Xavier	Skiles	43	Dangelo35@gmail.com
9	Kelly	Dickinson	44	Rhonda65@gmail.com

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

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

Change Size

id	firstName	lastName	age	email
0	Santino	Mertz	35	Rossie_Nolan37@hotmail.com
1	Idella	Brakus	19	Shirley.Friesen76@hotmail.com
2	Kelly	Bergnaum	36	Toby12@hotmail.com
3	Garry	Beahan	39	Maudie.Casper@yahoo.com
4	Sherman	Pacocha	62	Janice55@gmail.com
5	Keira	Gerlach	37	Cecil.Nikolaus@hotmail.com
6	Clement	Wiegand	64	Gwendolyn_Lynch10@hotmail.com
7	Lincoln	Heller	27	Nathanael1@gmail.com
8	Maurice	Klocko	51	Elsie_OConnell80@hotmail.com
9	Cristian	Stracke	32	Natasha53@hotmail.com

id	firstName	lastName	age	email
0	Santino	Mertz	35	Rossie_Nolan37@hotmail.com
1	Idella	Brakus	19	Shirley.Friesen76@hotmail.com
2	Kelly	Bergnaum	36	Toby12@hotmail.com
3	Garry	Beahan	39	Maudie.Casper@yahoo.com
4	Sherman	Pacocha	62	Janice55@gmail.com
5	Keira	Gerlach	37	Cecil.Nikolaus@hotmail.com
6	Clement	Wiegand	64	Gwendolyn_Lynch10@hotmail.com
7	Lincoln	Heller	27	Nathanael1@gmail.com
8	Maurice	Klocko	51	Elsie_OConnell80@hotmail.com
9	Cristian	Stracke	32	Natasha53@hotmail.com

id	firstName	lastName	age	email
0	Santino	Mertz	35	Rossie_Nolan37@hotmail.com
1	Idella	Brakus	19	Shirley.Friesen76@hotmail.com
2	Kelly	Bergnaum	36	Toby12@hotmail.com
3	Garry	Beahan	39	Maudie.Casper@yahoo.com
4	Sherman	Pacocha	62	Janice55@gmail.com
5	Keira	Gerlach	37	Cecil.Nikolaus@hotmail.com
6	Clement	Wiegand	64	Gwendolyn_Lynch10@hotmail.com
7	Lincoln	Heller	27	Nathanael1@gmail.com
8	Maurice	Klocko	51	Elsie_OConnell80@hotmail.com
9	Cristian	Stracke	32	Natasha53@hotmail.com

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

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

Change Color Scheme

id	firstName	lastName	age	email
0	Rodrick	Weimann	56	Amy.Collins@gmail.com
1	Anderson	Wiegand	28	Reyes97@gmail.com
2	Scarlett	Satterfield	28	Rickey_Fay@yahoo.com
3	Stephon	Collier	30	Norma8@hotmail.com
4	Roslyn	Hills	36	Webster.Zboncak@yahoo.com
5	Kaia	Padberg	62	Jesus4@yahoo.com
6	Orville	Wyman	31	Kara.Waters0@gmail.com
7	Myrtle	Kirlin	27	Nichole_Kshlerin37@gmail.com
8	Mikel	Kessler	60	Giuseppe_Legros99@hotmail.com
9	Kristy	Mills	59	Madge97@yahoo.com

id	firstName	lastName	age	email
0	Rodrick	Weimann	56	Amy.Collins@gmail.com
1	Anderson	Wiegand	28	Reyes97@gmail.com
2	Scarlett	Satterfield	28	Rickey_Fay@yahoo.com
3	Stephon	Collier	30	Norma8@hotmail.com
4	Roslyn	Hills	36	Webster.Zboncak@yahoo.com
5	Kaia	Padberg	62	Jesus4@yahoo.com
6	Orville	Wyman	31	Kara.Waters0@gmail.com
7	Myrtle	Kirlin	27	Nichole_Kshlerin37@gmail.com
8	Mikel	Kessler	60	Giuseppe_Legros99@hotmail.com
9	Kristy	Mills	59	Madge97@yahoo.com

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

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

Add Outer Border

To add an outer border, set withBorder to true.

id	firstName	lastName	age	email
0	Furman	Gleason	40	Lucille.Smith72@yahoo.com
1	Delia	Abbott	24	Mikayla.Swift@gmail.com
2	Sidney	Collins	63	Joseph57@yahoo.com
3	Joanie	Lowe	32	June_Hane@hotmail.com
4	Melinda	Lang	33	Kameron.McGlynn90@gmail.com
5	Tito	Dach-Schuster	26	Scot.Ward@hotmail.com
6	Isabel	Walker	53	Jimmie72@hotmail.com
7	Lonnie	Brakus	50	Richard_Zemlak43@hotmail.com
8	Sedrick	Wiegand	41	Stacy_Hartmann57@gmail.com
9	Kristin	Monahan	22	Jeanne65@gmail.com

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

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

Add Column Separators

To add column separators, set withColumnBorders to true.

id	firstName	lastName	age	email
0	Renee	Becker	65	Francisco62@hotmail.com
1	Tyrique	VonRueden	43	Teresa_Hermann49@hotmail.com
2	Gabrielle	Quitzon	32	Gustave_Streich84@yahoo.com
3	Lionel	Stark	39	Hal_Mitchell@hotmail.com
4	Bonnie	Treutel	26	Cassidy97@yahoo.com
5	Davin	Predovic	30	Elmira_Boyer@gmail.com
6	Ayden	Lueilwitz	51	Abel_Johnston44@yahoo.com
7	Hector	Schumm	62	Jeremiah_Ritchie@gmail.com
8	Terry	Stiedemann	45	Luciano76@gmail.com
9	Kyle	Macejkovic	23	Ashley45@hotmail.com

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

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

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

id	firstName	lastName	age	email
0	Cesar	Roob	55	Sonia.Lemke@gmail.com
1	Israel	Moore	26	Queenie40@gmail.com
2	Bradley	Gislason	57	Brooks_Stiedemann23@gmail.com
3	Dewey	Johnson	63	Ryan91@yahoo.com
4	Karson	Crist	24	Terrell_Windler@gmail.com
5	Leonora	Cassin	27	Bradford.McDermott@gmail.com
6	Kaycee	Skiles	48	Sherri47@gmail.com
7	Janis	Terry	36	Chelsie.Volkman@hotmail.com
8	Alan	Brakus	19	Emilio.Hand@gmail.com
9	Malachi	Carroll	31	Alanis.Fritsch78@hotmail.com

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

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

Striped

To enable striped rows, set striped to true.

id	firstName	lastName	age	email
0	Jerald	Stiedemann	65	Beverly38@yahoo.com
1	Albert	Harber	19	Essie.Bergstrom@yahoo.com
2	Edwin	Cormier	59	Alta60@gmail.com
3	Claude	Hudson	54	Susana.Ruecker@gmail.com
4	Al	Rutherford	33	Andres_Hintz@gmail.com
5	Josefina	Kuphal	60	Lorraine_Littel@yahoo.com
6	Mitchell	Jones	51	Carla_Russel23@gmail.com
7	Byron	Gerlach	51	Fletcher_Reichel@yahoo.com
8	Tatum	Bednar	22	Jonatan.Schultz@yahoo.com
9	Erika	Keeling	64	Tina34@yahoo.com

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

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

Scroll Area

To enable scroll area, set withScrollArea to true.

id	firstName	lastName	age	email	phone	role	status	createdAt	updatedAt
0	Dawn	Adams	20	Marion41@gmail.com	549.213.7717 x15384	user	active	12/14/2025	9/4/2025
1	Helga	Wolf	36	Hubert_Haag@yahoo.com	281.498.1423 x9672	user	active	6/26/2025	12/31/2025
2	Marilyn	Morar	59	Janet_Lueilwitz@gmail.com	(309) 235-3025	user	inactive	6/17/2025	7/18/2025
3	Lynette	Jenkins	46	Casey7@gmail.com	(513) 564-3708 x948	admin	active	7/19/2025	2/22/2026
4	Genevieve	Huel	40	Concepcion.Anderson29@gmail.com	1-371-320-3114 x56285	admin	active	4/25/2025	8/19/2025
5	Judson	Haag	51	Darren.Okuneva@yahoo.com	388-272-7792	user	active	2/20/2026	4/9/2025
6	Damon	Lindgren	47	Margarita.Schimmel89@hotmail.com	1-344-351-3592 x459	admin	inactive	3/3/2026	10/5/2025
7	William	Deckow	31	Gunner_Kautzer@hotmail.com	(643) 905-2818	user	active	2/13/2026	3/5/2026
8	Chad	Konopelski	37	Lorraine_Kuhn@hotmail.com	(867) 486-4078 x86072	user	inactive	10/3/2025	1/3/2026
9	Jordi	Haag	36	Lillian60@hotmail.com	(680) 346-4947	user	inactive	6/1/2025	12/7/2025

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

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

Header Groups

id	user
	name		age	email
	firstName	lastName	age	email
0	Dennis	Olson	46	Lenny.Shields@yahoo.com
1	Alfonso	Wuckert	33	Darrell_Koss20@gmail.com
2	Bryan	Schmeler	53	Layla.Corkery@gmail.com
3	Raquel	Hammes-Murphy	25	Eddie.Lind-Mills@hotmail.com
4	Emmie	Ward	57	Traci25@gmail.com
5	Maurice	Mosciski	43	Bridget56@hotmail.com
6	Shanon	Schneider	60	Tiana.Johnston79@yahoo.com
7	Kameron	Kertzmann	34	Jeanne.Auer@gmail.com
8	Mozell	Auer	19	Troy_Auer62@yahoo.com
9	Lillian	Botsford	46	Greg_Frami-Fay@gmail.com

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

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

id	user
	name		age	email
	firstName	lastName	age	email
0	Jenna	Baumbach	58	Lana.Cassin36@gmail.com
1	Eloise	Nitzsche	22	Leigh1@gmail.com
2	Mellie	Heller	62	Joshuah_Schiller4@gmail.com
3	Daniel	Abernathy	20	Dasia_Kling@gmail.com
4	Gus	Rutherford	21	Nina_Langosh@gmail.com
5	Antonia	Bartoletti	24	Jaclyn29@gmail.com
6	Sydnie	Wilderman	60	Arnulfo17@hotmail.com
7	Kylie	Bergnaum	38	Robert_Deckow18@gmail.com
8	Courtney	Mraz	56	Jeanette_Jones34@yahoo.com
9	Ora	Barton	53	Al_Kemmer@yahoo.com
id	firstName	lastName	age	email
	name		age	email
	user

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

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

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

id	firstName	lastName	age	email
0	Horacio	Ruecker	63	Stanley34@yahoo.com
1	Lauriane	Cormier	54	Letitia.Howe37@hotmail.com
2	Rosalie	Konopelski	37	Alayna.Rippin56@gmail.com
3	Phoebe	Bruen	32	Miguel_Mayert@gmail.com
4	Wm	Cronin	24	Ottis_Shanahan5@hotmail.com
5	Angel	Schultz	38	Josephine.Aufderhar98@hotmail.com
6	Blanche	Jacobs	56	Pauline_Jast@gmail.com
7	Eleanora	Hickle	50	Dennis.Wehner-Medhurst33@yahoo.com
8	Makenna	Roob	28	Jose.Quigley@yahoo.com
9	Watson	Jast	43	Fernando34@yahoo.com

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

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

Set Initial Focusable Cell

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

id	firstName	lastName	age	email
0	Jim	Miller	18	Pamela_Rogahn@gmail.com
1	Nicholas	O'Hara	50	Maryann_Wolff25@yahoo.com
2	Craig	Fahey	41	Lenora5@hotmail.com
3	Susana	Ferry	33	Martine35@yahoo.com
4	Gail	Howe	24	Douglas_Kassulke-Conn81@hotmail.com
5	Doreen	Koepp	34	Javon_Skiles@hotmail.com
6	Merle	Hoeger	25	Christina.Haag16@gmail.com
7	Charley	McKenzie	24	Mikayla_Kilback@yahoo.com
8	Susanna	Rippin	34	Rene.Kuhlman9@gmail.com
9	Lexus	Runolfsdottir-Lueilwitz	53	Hortense_Goodwin59@hotmail.com

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

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

Handle Row Click Event

To handle the row click event, use onRowClick.

id	firstName	lastName	age	email
0	Jason	Mann	60	Myra30@hotmail.com
1	Lamar	Champlin	60	Geoffrey77@gmail.com
2	Garrison	Huels	52	Ruby92@gmail.com
3	Dwayne	Kreiger	41	Lexi.Lesch@gmail.com
4	Erik	Rath	40	Clementine89@gmail.com
5	Bernadine	Beier-Price	64	Fleta_McCullough59@hotmail.com
6	Aurelie	Donnelly	37	Jesus7@hotmail.com
7	Johnson	Rohan	47	Chelsea_Lindgren62@gmail.com
8	Benjamin	Hudson	63	Clarissa.Windler6@yahoo.com
9	Joanne	Mitchell	23	Caden_Spinka@hotmail.com

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

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

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

Handle Row Double Click Event

To handle the row double click event, use onRowDoubleClick.

id	firstName	lastName	age	email
0	Jakob	Reinger	31	Tricia.OReilly88@hotmail.com
1	Jackie	Will	57	Laverna_Botsford@hotmail.com
2	Eliezer	Kub	39	Holly.Feest87@yahoo.com
3	Ora	Witting	36	Jimmie78@gmail.com
4	Jackie	O'Kon	26	Fleta_Jacobi68@gmail.com
5	Kent	Kutch	21	Percy69@hotmail.com
6	Douglas	Hudson	61	Madilyn1@gmail.com
7	Lela	Rowe	18	Emilie_Stamm39@yahoo.com
8	Louise	Jenkins	56	Halie67@yahoo.com
9	Wendell	Goldner-West	48	Gordon18@hotmail.com

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

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

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

Set Default Sorting

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

id	firstName	lastName	age	email
4	Garnet	Kuhic	62	Ricardo.Bode88@hotmail.com
2	Kathy	Kiehn	58	Camille_Kassulke21@hotmail.com
3	Bobby	Dibbert	51	Libby.DAmore83@gmail.com
8	Helen	Blick	45	Chelsea_Crooks7@gmail.com
0	Myron	Lubowitz	36	Aleen.Marvin@yahoo.com
6	Mack	Lebsack	35	Hugh_Breitenberg8@hotmail.com
9	Cathrine	Padberg	33	Yolanda_Braun@hotmail.com
5	Abigail	Heaney	25	Lula41@hotmail.com
1	Louvenia	Bradtke	20	Lysanne_Leuschke86@hotmail.com
7	Erika	Kovacek	18	Gertrude.Jenkins@hotmail.com

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

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

Disable Sorting

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

id	firstName	lastName	age	email
0	Johnnie	Hessel	43	Saige64@yahoo.com
1	Clovis	Oberbrunner	38	Kyle52@gmail.com
2	Jarrod	Halvorson	21	Aylin_Mueller@hotmail.com
3	Abdiel	Romaguera	44	Charles_Klocko69@gmail.com
4	Trinity	Pfeffer	49	Doug.Miller@yahoo.com
5	Patsy	Balistreri	45	Emma_Walter@hotmail.com
6	Eliezer	Bergstrom	19	Hector.Dietrich@hotmail.com
7	Lana	Mraz	60	Frances.Stoltenberg16@hotmail.com
8	Pattie	Reichert	28	Nancy81@hotmail.com
9	Agnes	Kuvalis	34	Van_Kutch84@yahoo.com

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

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

Disable Multi Sorting

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

id	firstName	lastName	age	email
0	Kobe	Ernser	20	Gunnar_Legros@yahoo.com
1	Emilie	Casper-Hand	36	Roxanne35@hotmail.com
2	Wilfred	Hegmann	29	Michele_Schuster96@hotmail.com
3	Amber	Crist	56	Lenore66@hotmail.com
4	Brayan	Hackett	27	Jacob43@yahoo.com
5	Tyree	Kuhic	23	Kallie20@gmail.com
6	Declan	Baumbach	21	Laurence_Friesen94@yahoo.com
7	Brionna	Kuhlman	46	Jaime86@gmail.com
8	Piper	Abshire	45	Mortimer_Swift31@yahoo.com
9	Emiliano	Kreiger	53	Sean_Volkman@gmail.com

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

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

Set Maximum Sortable Columns

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

id	firstName	lastName	age	email
0	Alvera	Renner	63	Jacques37@gmail.com
1	Fannie	Kuphal	40	Giovanna_Braun20@yahoo.com
2	Elliot	Murphy	53	Vera.Fadel50@hotmail.com
3	Devyn	Waters	37	Otha37@hotmail.com
4	Damon	Schoen	48	Henry.Quitzon63@yahoo.com
5	Alessandro	Huel	41	Addison50@gmail.com
6	Marcelino	Kovacek	47	Santa_Purdy54@hotmail.com
7	Marcia	Langworth	45	Rick.Bernier9@yahoo.com
8	Effie	Schamberger	26	Javier_Kemmer@hotmail.com
9	Sammy	Powlowski-Purdy	26	Emanuel79@gmail.com

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

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

Manual Sorting

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

id	firstName	lastName	age	email
0	Jazmyn	Simonis	50	Cecil.Fay@gmail.com
1	Nettie	Mitchell	43	Angelo_Willms33@hotmail.com
2	Sharon	Lakin	37	Gabe_Roob@gmail.com
3	Garrison	Wilderman	28	Laurie0@gmail.com
4	Dorothy	Frami	43	Darnell84@yahoo.com
5	Vicky	Parisian	24	Lucy_Senger41@hotmail.com
6	Quinton	Bayer	47	Marilyn19@hotmail.com
7	Marco	Wilderman	28	Alonzo.Lesch@hotmail.com
8	Erin	Marks	53	Jan_Kub-Murray@yahoo.com
9	Lillian	Blanda	27	Dallas_Buckridge@gmail.com

const defaultData = useMemo<TableData[]>(() => createTableData(), [])
const [data, setData] = useState<TableData[]>(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	Willie	Braun	65	Johnathan.Brakus77@gmail.com
1	Braxton	Ankunding	19	Emerson.Nolan-Johnston@hotmail.com
2	Billie	Durgan	29	Russell49@yahoo.com
3	Teresa	Osinski	58	Erin_McCullough@hotmail.com
4	Angelina	Dare	56	Tracy_Schmitt-Leannon52@yahoo.com
5	Elisa	Franey	31	Lila_Lakin@yahoo.com
6	Ed	Schmitt-Waters	40	Katherine.Conroy47@gmail.com
7	Terrence	Borer	21	Shelly.Doyle@gmail.com
8	Carmine	Schowalter	42	Agnes_Treutel@hotmail.com
9	Garry	Smith	46	Judith.Russel@gmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Della	Leuschke	44	Tanya_Conn@yahoo.com
1	Claire	Dickens	31	Kathy.Abshire@yahoo.com
2	Edward	Beer	57	Isaiah23@yahoo.com
3	Tiana	Ledner	23	Jodi_Stark@gmail.com
4	Ethel	Hills	58	Lilyan18@hotmail.com
5	Lydia	Willms	44	Isaac45@hotmail.com
6	Cameron	Frami	39	Kitty.Larkin20@gmail.com
7	Chaim	Little	44	Jaida_Corkery24@yahoo.com
8	Lorene	Wilkinson	55	Clay48@yahoo.com
9	Della	Donnelly	47	Maureen_Koelpin@gmail.com

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

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

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

Enable Pagination

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

id	firstName	lastName	age	email
0	Dora	Reynolds	59	Tad53@gmail.com
1	Lola	Walker	49	Hermina_Jerde11@yahoo.com
2	Rick	Senger	64	Bruce_Bayer38@hotmail.com
3	Ricardo	Dare	54	Dixie68@gmail.com
4	Dylan	Bayer	57	Vidal73@gmail.com
5	Irving	Koelpin	42	Baron_OKon@gmail.com
6	Enola	Bogan	58	Anderson_Hoppe-OKeefe@yahoo.com
7	Marvin	Grady	21	Linda94@hotmail.com
8	Sabrina	Bergnaum	37	Nya_Shields93@hotmail.com
9	Amelia	Gulgowski	56	Steve10@gmail.com
10	Michael	Stanton	20	Otis68@gmail.com
11	Justyn	Rau	48	Alva51@yahoo.com
12	Francis	Kovacek	50	Lula_Ankunding-Rosenbaum@hotmail.com
13	Alma	Klein	65	Doug_Jaskolski@yahoo.com
14	Frankie	Mann	63	Judith.Jakubowski-Wisoky14@hotmail.com
15	Eula	Littel	38	Calvin22@yahoo.com
16	Rosalyn	Jacobs	42	Earl_Trantow@gmail.com
17	Freda	Murazik	36	Darrin_Hoeger38@gmail.com
18	Dawson	Keebler-Schowalter	20	Malcolm.Lockman@yahoo.com
19	Mertie	Pacocha	65	Elsa.Konopelski-Keeling47@hotmail.com

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

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

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

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

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

Set Default Page Index and Page Size

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

id	firstName	lastName	age	email
10	Bradford	Hessel	29	Dessie84@yahoo.com
11	Andreanne	Kassulke-Watsica	50	Carrie77@hotmail.com
12	Sandy	McClure	41	Don26@hotmail.com
13	Krista	Ullrich	64	Kathleen.Brekke@yahoo.com
14	Lynne	Ritchie	33	Kennedi.Block@gmail.com
15	Harmony	Bogan	29	Florencio58@hotmail.com
16	Jared	Rau	59	Gene.Veum67@yahoo.com
17	Daisy	Wolf	47	Franklin.Hyatt@yahoo.com
18	Madelyn	Dicki	59	Luz_Harvey57@hotmail.com
19	Elmer	Lindgren	33	Elmer60@gmail.com

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

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

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

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

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

Use Manual Pagination

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

id	firstName	lastName	age	email
0	Melany	Corwin	63	Emilia.Halvorson46@yahoo.com
1	Alejandro	Reichert	24	Katherine48@gmail.com
2	Erika	Ryan	55	Aaliyah_Kris81@yahoo.com
3	Micheal	Gutkowski	38	Libby_Beer74@yahoo.com
4	Kali	Batz	57	Diego0@gmail.com
5	Glenda	Schowalter	33	Presley1@hotmail.com
6	Susie	Gusikowski-Morar	33	Frankie_Koss67@hotmail.com
7	Orie	Ratke	33	Eunice97@yahoo.com
8	Eloy	Kerluke	28	Sheldon_King41@yahoo.com
9	Kim	Witting	56	Herminio_Boyer@hotmail.com
10	Marie	Parker	25	Trevor.Berge92@hotmail.com
11	Johnathan	Hessel	27	Joan.Hilll@yahoo.com
12	Jamie	Mann	49	Jarrell.Fisher10@hotmail.com
13	Lois	Muller	48	Orion_OKeefe20@yahoo.com
14	Adelle	Senger	32	Fanny_Beatty@yahoo.com
15	Kale	Douglas	61	Genevieve97@yahoo.com
16	Macey	Jakubowski	33	Judge_Paucek@hotmail.com
17	Bryant	Stracke	21	Timothy_Lubowitz@hotmail.com
18	Erna	Weissnat	37	Emily.Miller29@gmail.com
19	Casey	Murray	30	Moises_Hand@gmail.com

const { t } = useI18n("table")
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const rowCount = 40
const defaultData = useMemo<TableData[]>(() => createTableData(rowCount), [])
const data = useMemo<TableData[]>(
  () =>
    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	Alex	Zieme	18	Fay_Dietrich@gmail.com
1	Clay	Bruen	49	Ernest.Doyle@hotmail.com
2	Robin	Schaefer	34	Gene57@yahoo.com
3	Karina	Larson	44	Homer_Bogan51@yahoo.com
4	Joan	Russel	37	Dallas68@gmail.com
5	Narciso	Beatty	29	Eve3@gmail.com
6	Veronica	Lindgren	18	Dagmar_Pfeffer27@yahoo.com
7	Cale	Goodwin	25	Patrick_Schamberger@gmail.com
8	Orlo	Wisozk	43	Jesus61@yahoo.com
9	Amanda	Lindgren	52	Latoya_Grady6@gmail.com
10	Alan	Price	42	Robert55@yahoo.com
11	Burley	Harris	46	Ernesto78@hotmail.com
12	Elena	Hessel	53	Theo_Hilll91@gmail.com
13	Harold	Gerhold	61	Roland51@gmail.com
14	James	Waelchi	44	Daisy80@gmail.com
15	Candace	Stehr	50	Joel_Casper53@yahoo.com
16	Eldridge	Carter	38	Woodrow_Barrows@gmail.com
17	Julia	Lakin	44	Fred.Kuhic@yahoo.com
18	Harriet	Stehr	62	Angel3@gmail.com
19	Regina	Grant	21	Sienna_Jerde4@gmail.com

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

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

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

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

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

Enable Row Selection

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

id	firstName	lastName	age	email
0	Guiseppe	Stracke	21	Samuel_Wiza83@yahoo.com
1	Demetris	Adams	34	Ole.Lynch@yahoo.com
2	Katherine	Raynor	32	Bettie_Thiel@hotmail.com
3	Constance	Schultz	39	Janet3@hotmail.com
4	Jim	Johnson	46	Marie48@yahoo.com
5	Miguel	Parker	58	Haley_Kutch-Turcotte68@gmail.com
6	Josephine	Ebert	58	Christop.Torphy@yahoo.com
7	Joel	Boehm	20	Mable.Fay@hotmail.com
8	Olive	Wilderman	58	Cielo_Sauer-Schinner@gmail.com
9	Laurianne	Rutherford	60	Coralie.Erdman34@gmail.com

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

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

Set Default Selected Rows

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

id	firstName	lastName	age	email
0	Carmen	Schroeder	26	Gerardo_Koepp@yahoo.com
1	Hadley	Larkin	45	Ambrose49@yahoo.com
2	Angie	Klocko	30	Levi_Schamberger@yahoo.com
3	Marcos	Steuber	32	Emmet46@hotmail.com
4	Nina	Lind	23	Kevin13@hotmail.com
5	Edith	Metz	51	Oleta.Gleichner42@gmail.com
6	Nelson	Boehm	18	Nathaniel.Gottlieb@hotmail.com
7	Estell	Lubowitz	19	Rex.Leannon@gmail.com
8	Loy	Carroll	64	Candace_Ullrich42@gmail.com
9	Charley	Cremin-O'Conner	20	Beth10@hotmail.com

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

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

Enable Row Selection on Click

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

id	firstName	lastName	age	email
0	Jared	Treutel	65	Blanche.Von@hotmail.com
1	Christop	Erdman	52	Orville_Cartwright@hotmail.com
2	Jay	Hand	38	Kathleen30@gmail.com
3	Essie	Larkin	51	Jean.Cartwright@gmail.com
4	Erika	Stehr	35	Horace_Pouros56@hotmail.com
5	Benjamin	Brakus	50	Samantha31@hotmail.com
6	James	Koepp	48	Sean_Huel@yahoo.com
7	Casey	Considine	21	Bill_Langosh@hotmail.com
8	Donald	Gerhold	62	Rylee.VonRueden9@hotmail.com
9	Jettie	Hartmann	62	Derek.Gerhold29@gmail.com

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

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

Hide Checkbox

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

id	firstName	lastName	age	email
0	Kristie	Cronin	28	Cora_Beahan36@gmail.com
1	Kristie	Smitham	33	Andre_Dickens@hotmail.com
2	Ida	Pagac	34	Carmine54@hotmail.com
3	Kathleen	Greenholt	19	Fernando_Ruecker@gmail.com
4	Tamara	McLaughlin	25	Martin91@gmail.com
5	Blaze	Hudson	39	Rebecca_Romaguera@hotmail.com
6	Harvey	Marks	47	Wilber_Wuckert@yahoo.com
7	Stacey	Gulgowski	63	Geoffrey53@yahoo.com
8	Emanuel	Klocko	58	Vera.Boehm69@yahoo.com
9	Annette	Kub	39	Miguel.Gutkowski89@yahoo.com

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

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

Disable Row

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

id	firstName	lastName	age	email
0	Ethan	Douglas	23	Pat.Heathcote@hotmail.com
1	Justin	Beahan	20	Moses_Kohler@yahoo.com
2	Faith	Torp	41	Luigi.Ebert@yahoo.com
3	Jacques	Huels	63	Forrest32@yahoo.com
4	Brenda	Gottlieb	51	Chase.Hauck36@yahoo.com
5	Scot	Kiehn	20	Chase_Nicolas77@gmail.com
6	Octavia	Ruecker	44	Keshawn_Beahan@gmail.com
7	Rolando	Heaney	35	Leticia10@hotmail.com
8	Ada	Schoen	41	Patrick7@gmail.com
9	Mark	Kassulke	42	Wanda.Weissnat84@yahoo.com

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

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

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

Control Row Selection

id	firstName	lastName	age	email
0	Mario	Aufderhar	48	Celia.OHara@hotmail.com
1	Violet	Schultz	24	Mathew.Langworth96@hotmail.com
2	Cleo	Robel	26	Hillard_Dicki@yahoo.com
3	Boyd	Lubowitz	35	Jeffery62@gmail.com
4	Theodore	Gerhold	43	Susan_Spinka94@gmail.com
5	Daryl	Koss	40	Adrienne21@hotmail.com
6	Christa	Trantow	49	Tessie58@gmail.com
7	Greg	Weber	26	Sheryl_Moen@gmail.com
8	Francisco	Rowe	41	Virginia30@yahoo.com
9	Delfina	Funk	57	Sidney.Carter61@gmail.com

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

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

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

Use Filter

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

id	firstName	lastName	age	email
0	Betsy	Ondricka	63	Polly18@gmail.com
1	Elbert	Connelly	32	Noah96@gmail.com
2	Esperanza	Tremblay	43	Erin_Trantow34@gmail.com
3	Michel	Spencer	30	Henrietta32@hotmail.com
4	Santiago	Bergnaum	62	Gustavo_Cruickshank@gmail.com
5	Laverne	Collier	64	Jasmine72@gmail.com
6	Mitchell	Monahan	63	Lucia.Fahey@yahoo.com
7	Arnold	Bashirian	39	Cristobal62@gmail.com
8	Abel	Schulist	64	Blanche_Wunsch78@yahoo.com
9	Marjory	Satterfield	25	Allan97@gmail.com

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

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

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

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

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

Set Default Filter

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

id	firstName	lastName	age	email
1	Miguel	Kuhlman	34	Donald.Crist@gmail.com
5	Jo	Quigley	42	Desiree_Rosenbaum94@gmail.com
9	Gregoria	Fadel	59	Paula.Beahan@gmail.com

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

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

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

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

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

Control Filter

id	firstName	lastName	age	email
0	Davion	Bogan-Simonis	20	Norman_Wiegand@yahoo.com
1	Michele	Torp	60	Jackie_Green12@gmail.com
2	Modesta	Hand	30	Darlene_Paucek@gmail.com
3	Gina	McClure	43	Rick.Murazik42@yahoo.com
4	Charles	Schmitt	39	Carmen.McGlynn39@gmail.com
5	Amelia	Ledner	52	Julie.Dietrich@gmail.com
6	Marina	Bogan	54	Lisa_Fisher51@yahoo.com
7	Laisha	Waters	41	Alyssa4@yahoo.com
8	Will	Kunde	64	Kay69@hotmail.com
9	Joey	Stiedemann	52	Kayley99@hotmail.com

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

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

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

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

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

Enable Column Resizing

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

id	firstName	lastName	age	email
0	Andy	Marks	22	Maegan71@hotmail.com
1	Greg	Howell	58	Margie.Baumbach3@yahoo.com
2	Lauryn	Roberts	47	Sophia36@hotmail.com
3	Isaac	Willms	44	Alexandro.Dickens47@yahoo.com
4	Elisa	Grant	58	Bernadine.Bradtke75@gmail.com
5	Lloyd	Flatley	27	Sylvester94@gmail.com
6	Ann	Collins	21	Cristal_Senger52@hotmail.com
7	Felix	Rice	21	Kaylin.Anderson45@yahoo.com
8	Karlie	Kautzer	63	Jazmyne.Stoltenberg@hotmail.com
9	Andrew	Hilll	39	Hazel.Wisoky@yahoo.com

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

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

Change Column Resizing Method

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

id	firstName	lastName	age	email
0	Irvin	Brakus	52	Lolita_Durgan40@gmail.com
1	Leo	Waelchi	37	Horace.Reynolds@hotmail.com
2	Jazlyn	Nitzsche	45	Mittie75@hotmail.com
3	Robert	McCullough	46	Chris.Davis52@gmail.com
4	Ronald	Hegmann	25	Sheryl_Reilly@gmail.com
5	Silas	Schimmel	43	Cleta.Ortiz17@hotmail.com
6	Bert	Schimmel-Schinner	38	Jamaal.Batz48@hotmail.com
7	Doris	Herzog	52	Kari.Rowe@hotmail.com
8	Ambrose	Casper	22	Myles.Gibson17@hotmail.com
9	Deanna	Franecki	65	Dominick_Connelly82@gmail.com

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

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

Props

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

Accessibility

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

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

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

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

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

ARIA Roles and Attributes

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

Similar Components

Stat is used to display numbers or data within a box.

NativeTable is a component for efficiently organizing and displaying data.

PieChart is a component for drawing pie charts to compare multiple sets of data.

RadialChart is a component for drawing radial charts to compare multiple sets of data.

RadarChart is a component for drawing radar charts to compare multiple sets of data.

DonutChart is a component for drawing donut charts to compare multiple sets of data.

AreaChart is a component for drawing area charts to compare multiple sets of data.

ComposedChart is a component for drawing composed charts to compare multiple sets of data.

Uses Components & Hooks

Checkbox is a component used for allowing users to select multiple values from multiple options.

Icon is a general icon component that can be used in your projects.

NativeTable is a component for efficiently organizing and displaying data.