Table

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

id	firstName	lastName	age	email
0	Vella	Kuhn	40	Nikolas47@yahoo.com
1	Dessie	Wilderman	37	Darwin99@hotmail.com
2	Malcolm	D'Amore	35	Lea_Satterfield-Glover@gmail.com
3	Abdullah	Pfannerstill	63	Lorine_Rohan@yahoo.com
4	Vella	Nolan	65	Jeromy11@hotmail.com
5	Jay	Cummerata	63	Claudia.Emard85@gmail.com
6	Leonel	Sanford	51	Delphine88@gmail.com
7	Nona	Conn	65	Junius64@yahoo.com
8	Elta	Wisozk	52	Ike53@gmail.com
9	Dewitt	Monahan	60	Brando_McLaughlin@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	Justine	Mohr	20	Blanche97@hotmail.com
1	Bailey	DuBuque	37	Michael.Jacobson@hotmail.com
2	Chaya	Wilkinson	44	Mae68@gmail.com
3	Unique	Lynch-Kuhlman	18	Macy_Brakus@gmail.com
4	Lilla	Reilly	59	Aiyana64@gmail.com
5	Kaylin	Mraz	41	Doug_OKon@yahoo.com
6	Liliane	Wyman	49	Thurman55@yahoo.com
7	Aimee	Osinski	21	Nayeli.Gusikowski@yahoo.com
8	Xavier	Reilly	64	Cathryn32@hotmail.com
9	Marian	Towne	27	Sandy_Reichel@hotmail.com

id	firstName	lastName	age	email
0	Justine	Mohr	20	Blanche97@hotmail.com
1	Bailey	DuBuque	37	Michael.Jacobson@hotmail.com
2	Chaya	Wilkinson	44	Mae68@gmail.com
3	Unique	Lynch-Kuhlman	18	Macy_Brakus@gmail.com
4	Lilla	Reilly	59	Aiyana64@gmail.com
5	Kaylin	Mraz	41	Doug_OKon@yahoo.com
6	Liliane	Wyman	49	Thurman55@yahoo.com
7	Aimee	Osinski	21	Nayeli.Gusikowski@yahoo.com
8	Xavier	Reilly	64	Cathryn32@hotmail.com
9	Marian	Towne	27	Sandy_Reichel@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	Esther	Breitenberg	38	Reese_Ryan64@yahoo.com
1	Jett	Howe	57	Sabina47@yahoo.com
2	Lenora	Beahan	49	Rowland_Greenholt20@gmail.com
3	Kaela	Bogan	20	Olga.Rogahn@yahoo.com
4	Arnoldo	Kuvalis	40	Dion_Dickinson@gmail.com
5	Ole	Marvin	26	Jacklyn_Vandervort@hotmail.com
6	Billy	Bernier	23	Jeanette_Mueller@gmail.com
7	Patricia	Stiedemann	18	Rory14@yahoo.com
8	Ethelyn	Mann	59	Aliyah_Bruen16@yahoo.com
9	Percy	Rempel	40	Edwin_Simonis-Rath83@hotmail.com

id	firstName	lastName	age	email
0	Esther	Breitenberg	38	Reese_Ryan64@yahoo.com
1	Jett	Howe	57	Sabina47@yahoo.com
2	Lenora	Beahan	49	Rowland_Greenholt20@gmail.com
3	Kaela	Bogan	20	Olga.Rogahn@yahoo.com
4	Arnoldo	Kuvalis	40	Dion_Dickinson@gmail.com
5	Ole	Marvin	26	Jacklyn_Vandervort@hotmail.com
6	Billy	Bernier	23	Jeanette_Mueller@gmail.com
7	Patricia	Stiedemann	18	Rory14@yahoo.com
8	Ethelyn	Mann	59	Aliyah_Bruen16@yahoo.com
9	Percy	Rempel	40	Edwin_Simonis-Rath83@hotmail.com

id	firstName	lastName	age	email
0	Esther	Breitenberg	38	Reese_Ryan64@yahoo.com
1	Jett	Howe	57	Sabina47@yahoo.com
2	Lenora	Beahan	49	Rowland_Greenholt20@gmail.com
3	Kaela	Bogan	20	Olga.Rogahn@yahoo.com
4	Arnoldo	Kuvalis	40	Dion_Dickinson@gmail.com
5	Ole	Marvin	26	Jacklyn_Vandervort@hotmail.com
6	Billy	Bernier	23	Jeanette_Mueller@gmail.com
7	Patricia	Stiedemann	18	Rory14@yahoo.com
8	Ethelyn	Mann	59	Aliyah_Bruen16@yahoo.com
9	Percy	Rempel	40	Edwin_Simonis-Rath83@hotmail.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	Hilma	DuBuque	28	Richie.Effertz21@hotmail.com
1	Paul	Jerde	39	Pierre_Morar5@gmail.com
2	Abigail	Fay	28	Samanta.Kovacek@hotmail.com
3	Rhett	Fadel	39	Lennie_Murazik@hotmail.com
4	Norene	Jacobs	30	Tressa_Rippin55@gmail.com
5	Dandre	Douglas	23	Aditya41@yahoo.com
6	Samir	Cummings	52	Zula.King@hotmail.com
7	Adelbert	O'Kon	57	Ettie43@yahoo.com
8	Uriah	Glover	22	Eryn.Bauch6@gmail.com
9	Treva	Smitham	30	Austen63@hotmail.com

id	firstName	lastName	age	email
0	Hilma	DuBuque	28	Richie.Effertz21@hotmail.com
1	Paul	Jerde	39	Pierre_Morar5@gmail.com
2	Abigail	Fay	28	Samanta.Kovacek@hotmail.com
3	Rhett	Fadel	39	Lennie_Murazik@hotmail.com
4	Norene	Jacobs	30	Tressa_Rippin55@gmail.com
5	Dandre	Douglas	23	Aditya41@yahoo.com
6	Samir	Cummings	52	Zula.King@hotmail.com
7	Adelbert	O'Kon	57	Ettie43@yahoo.com
8	Uriah	Glover	22	Eryn.Bauch6@gmail.com
9	Treva	Smitham	30	Austen63@hotmail.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	Colin	Prosacco	42	Era_Roberts57@gmail.com
1	Richard	Rau	30	Ambrose4@yahoo.com
2	Wava	Altenwerth	56	Kellen_Kuphal30@hotmail.com
3	Pansy	Morar	20	Jake.Parker28@gmail.com
4	Eleazar	Konopelski	35	Major_Reynolds-Rau@gmail.com
5	Rosalyn	Lindgren	64	Ward26@hotmail.com
6	Rashawn	Weimann	39	Domenic.Stracke90@yahoo.com
7	Barry	Rippin	28	Justus_Turner@yahoo.com
8	Marlee	Stroman	60	Julia10@gmail.com
9	Missouri	Murazik	29	Adelle_Olson90@yahoo.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	Kadin	Ratke	54	Kurtis_Krajcik3@hotmail.com
1	Geovanny	Balistreri	18	Judah_Kreiger97@hotmail.com
2	Christine	Koss	48	Junius.Raynor@gmail.com
3	Thaddeus	Romaguera	46	Tressie_MacGyver10@gmail.com
4	Shania	Jacobi	63	Samson_Smitham@gmail.com
5	Friedrich	Crona	39	Sasha_DuBuque15@yahoo.com
6	Humberto	Witting	19	Giuseppe.Bayer37@gmail.com
7	Monty	Hilll	52	Adelbert.Lakin52@hotmail.com
8	Haven	Emmerich	28	Caden_Kuhlman80@yahoo.com
9	Ludwig	Howe	37	Darian.Toy@gmail.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	Waylon	Effertz-Lindgren	35	Tiara.Crist@yahoo.com
1	Willard	Bednar	32	Alessia63@gmail.com
2	Helen	Leffler	52	Betsy.Klocko@gmail.com
3	D'angelo	Jacobi	23	Ryleigh.Schneider@hotmail.com
4	Charles	Boehm	43	Marcellus.Becker95@hotmail.com
5	Heaven	Doyle	35	Celestino_Herzog-Cassin@hotmail.com
6	Mac	Flatley	27	Lera94@gmail.com
7	Preston	Mosciski	25	Christopher.Hoppe@gmail.com
8	Kailyn	Kerluke	30	Nils_Lesch@gmail.com
9	Randi	Nienow-Rohan	27	Danielle_Heaney@hotmail.com

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

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

Striped

To enable striped rows, set striped to true.

id	firstName	lastName	age	email
0	Neva	Beer	52	Tierra.Hansen@gmail.com
1	Roy	Conn	44	Maybelle38@hotmail.com
2	Carol	Gislason	23	Valentina71@gmail.com
3	Sonia	Sporer	54	Terrence5@yahoo.com
4	Bernice	Prosacco	58	Dorris45@hotmail.com
5	Leonie	Bergnaum	23	Stevie8@hotmail.com
6	Darlene	White	29	Micheal_Koepp@hotmail.com
7	Vernice	Spencer	29	Makenzie.Hagenes54@gmail.com
8	Dakota	Larkin	32	Filomena.Will@yahoo.com
9	Makenna	Armstrong	40	Ulices51@yahoo.com

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

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

Scroll Area

To enable scroll area, set withScrollArea to true.

id	firstName	lastName	age	email	phone	role	status	createdAt	updatedAt
0	Cathryn	Hirthe	50	Malvina85@yahoo.com	255.497.2514 x981	admin	inactive	12/15/2025	1/4/2026
1	Dominique	Walter	64	Ida_Gutkowski@gmail.com	1-469-552-9687	user	active	9/8/2025	3/1/2025
2	June	Beer	38	Ernestina48@yahoo.com	1-309-292-4856	admin	inactive	1/4/2026	1/28/2025
3	Gregorio	Boyle	59	Judy12@hotmail.com	696.815.9299 x7639	admin	active	12/26/2025	8/12/2025
4	Maia	Abernathy	46	Connie55@hotmail.com	(362) 229-1716 x6877	admin	active	7/19/2025	11/21/2025
5	Chesley	Harber	24	Enrique57@gmail.com	764.306.3619 x9848	user	active	3/21/2025	2/11/2025
6	Modesta	Crooks-Leannon	49	Laila_Greenfelder58@gmail.com	1-269-330-6929 x3698	user	inactive	7/23/2025	2/24/2025
7	Idella	Lueilwitz-Schuster	49	Lesly30@gmail.com	1-752-329-1251	user	inactive	11/25/2025	7/7/2025
8	Fred	Harber	49	Sandy_Parisian@hotmail.com	(711) 470-9846 x033	admin	inactive	12/31/2025	6/1/2025
9	Francis	Conroy	47	Melody_Gulgowski82@gmail.com	(959) 529-2932 x2343	user	inactive	10/9/2025	9/19/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	Samir	Gulgowski	54	Camille_Powlowski@yahoo.com
1	Ellen	Tromp	45	Rosario50@yahoo.com
2	Alford	Osinski	62	Caleb.Flatley@hotmail.com
3	Tristian	Hilll	28	Maryjane_Rowe-Fay99@yahoo.com
4	Alanna	Gibson	50	Deven_Abernathy@gmail.com
5	Ima	Daugherty	44	Chelsie_Murazik8@gmail.com
6	Aditya	Cummerata	23	Ezequiel81@gmail.com
7	Isaac	Deckow	29	Brandt_Powlowski58@hotmail.com
8	Hal	Schmeler	44	Myriam46@gmail.com
9	Briana	Hermiston-Parker	34	Haven19@gmail.com

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

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

id	user
	name		age	email
	firstName	lastName	age	email
0	Marlene	Hackett	33	Pasquale.Kohler83@yahoo.com
1	Willow	Ondricka	36	Aaliyah_Schimmel8@gmail.com
2	Bradly	Lowe	64	Francisca.Feil94@yahoo.com
3	Georgianna	Stroman	34	Jaquelin59@yahoo.com
4	Victoria	Sipes	50	Bernardo.Goyette@hotmail.com
5	Maddison	Friesen	53	Dina_Moen34@hotmail.com
6	Giovanna	McClure	46	Vena_Howell@yahoo.com
7	Frida	Bode	20	Dasia16@gmail.com
8	Anderson	Dickens	62	Maida.Hilpert@hotmail.com
9	Saige	Rath	55	Boyd.Smith5@yahoo.com
id	firstName	lastName	age	email
	name		age	email
	user

const columns = useMemo(
  () => [
    columnHelper.accessor("id", {
      footer: (info) => info.column.id,
      cellProps: { numeric: true },
    }),
    columnHelper.group({
      id: "user",
      columns: [
        columnHelper.group({
          id: "name",
          columns: [
            columnHelper.accessor("firstName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
            columnHelper.accessor("lastName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
          ],
          footer: (info) => info.column.id,
          header: (info) => info.column.id,
        }),
        columnHelper.accessor("age", {
          footer: (info) => info.column.id,
          cellProps: { numeric: true },
        }),
        columnHelper.accessor("email", {
          footer: (info) => info.column.id,
          lineClamp: 1,
        }),
      ],
      footer: (info) => info.column.id,
      header: (info) => info.column.id,
    }),
  ],
  [],
)
const data = useMemo<Data[]>(() => 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	Garfield	Bartell	48	Claudia40@hotmail.com
1	Burley	Gislason	23	Patsy_Stehr69@yahoo.com
2	Dora	Bosco	21	Deshaun.Sanford@hotmail.com
3	Dallas	McLaughlin	39	Lauretta.Nikolaus64@yahoo.com
4	Reid	Bradtke	45	Zelda88@yahoo.com
5	Keagan	DuBuque	22	Amira.Adams71@hotmail.com
6	Ignatius	Smith	45	Amari_Bruen@gmail.com
7	Alba	Becker	49	Kathleen73@yahoo.com
8	Jackie	Prosacco	27	Abner.Feeney85@gmail.com
9	Franco	Bernhard	54	Stanton_Yost85@yahoo.com

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

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

Set Initial Focusable Cell

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

id	firstName	lastName	age	email
0	Nannie	Hickle	36	Grayce73@hotmail.com
1	Lucile	Rolfson-Connelly	41	Ransom.Cole15@yahoo.com
2	Franz	Nicolas	38	Arthur.Hickle@gmail.com
3	Bonita	Schamberger	55	Celestino_Wunsch53@gmail.com
4	Nikki	Rice	33	Kamron13@gmail.com
5	Fletcher	Sauer	44	Cale.Streich@gmail.com
6	Chester	Ernser	53	Gretchen38@gmail.com
7	Walton	Schumm	44	Josh22@hotmail.com
8	Viola	Zboncak	32	Shirley.Daugherty@yahoo.com
9	Gerald	Kerluke	38	Isabel_Zulauf89@hotmail.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	Fay	Blanda	37	Tomasa_Gibson@hotmail.com
1	Weston	Beer	64	Audrey85@yahoo.com
2	Conor	Kassulke	48	Carole.Nitzsche@gmail.com
3	Aurelie	Beatty	54	Ismael91@gmail.com
4	Andres	Swaniawski	51	Germaine.Jerde46@hotmail.com
5	Isabell	Collier	41	Charity.McGlynn@hotmail.com
6	Junius	Kautzer	25	Aglae_Howe@yahoo.com
7	Larissa	Schaden	20	Kamren_Johnson@yahoo.com
8	Zack	Halvorson	36	Letitia10@yahoo.com
9	Adriel	Bayer-Sipes	35	Naomi38@yahoo.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	Carmela	Ziemann	65	Kyra51@gmail.com
1	Twila	Schuppe	61	Toby.Sanford@yahoo.com
2	Sven	Lang	55	Tobin_Kemmer10@yahoo.com
3	Jannie	Fay	51	Bud.McLaughlin@hotmail.com
4	Maia	Larson	62	Reta_Collier@hotmail.com
5	Gladys	Kilback	26	Noemi_Morissette@gmail.com
6	Pauline	Mohr	63	Hazle94@hotmail.com
7	Saul	Wolff	56	Keara45@hotmail.com
8	Ismael	Beier	25	Myles.Kerluke@gmail.com
9	Hubert	McDermott	63	Jesus_Farrell@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
6	Sage	Kiehn	57	Rashawn.Kub92@gmail.com
2	Jayson	Ebert	48	Jessy.Brakus@gmail.com
8	Samantha	Senger	47	Helmer22@hotmail.com
9	Davon	Cole	46	Vicenta2@hotmail.com
1	Cali	Sporer	45	Mikayla.Rice@hotmail.com
4	Hazle	Nader	44	Darrin_Keeling@gmail.com
3	Nyah	Hettinger	39	Cassidy_Schuster@yahoo.com
0	Rosetta	Wyman-Stokes	38	Dorris.Konopelski@yahoo.com
7	Electa	Kemmer	32	Dayton.Walker70@hotmail.com
5	Tobin	Renner	22	Lindsey98@yahoo.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	Loy	Heaney	33	Juwan.Russel13@hotmail.com
1	Junior	Orn	42	Sierra_Zboncak@gmail.com
2	Marjorie	Johns	34	Eudora_Emmerich@hotmail.com
3	Trisha	Boyle	39	Trenton.Will@hotmail.com
4	Carol	Thiel	49	Mozelle_Beer@gmail.com
5	Marcellus	Homenick	18	Lance_Ruecker36@hotmail.com
6	Jeremy	Berge	42	John.Will@hotmail.com
7	Cecil	Cruickshank	22	Jacquelyn.Runolfsson92@hotmail.com
8	Wyman	Daniel	59	Felicita.Glover@yahoo.com
9	Vincent	Aufderhar	63	Hiram.Crooks@gmail.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	Maribel	Collins-Feeney	18	Bernhard.Monahan@yahoo.com
1	Gustave	Maggio	59	Skye_Ernser48@hotmail.com
2	Ryleigh	Rempel-Larkin	29	Darlene.Aufderhar@yahoo.com
3	Hulda	Schneider	44	Catherine34@hotmail.com
4	Dylan	Hintz	26	Gerardo43@yahoo.com
5	Walker	Greenfelder	36	Marisa81@gmail.com
6	Vivienne	Roob	39	Veronica88@hotmail.com
7	Destiny	Mitchell	64	Hipolito.Dare15@gmail.com
8	Glenda	Pagac	33	Roger_Marvin18@yahoo.com
9	Marge	Farrell	48	Mustafa_Okuneva@gmail.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	Shayne	Bartell	56	Yadira_Crist@gmail.com
1	Rene	Sanford	38	Dulce6@gmail.com
2	Tyrel	Cummings	28	Kennedi5@gmail.com
3	Ashley	Schimmel	57	Antonia35@gmail.com
4	Derrick	Hyatt	42	Ruth_Sporer@hotmail.com
5	Daphnee	Mayert	42	Dillan81@gmail.com
6	Cassie	Wehner	58	Chasity_Jones@hotmail.com
7	Hoyt	Goodwin	42	Nia.Hartmann26@yahoo.com
8	Ernestina	Kris	65	Sabina_Keebler25@gmail.com
9	Kailyn	Brakus	58	Rosario_Doyle@yahoo.com

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

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

Manual Sorting

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

id	firstName	lastName	age	email
0	Herminio	Gleason	50	Deanna_Gibson91@hotmail.com
1	Lemuel	Vandervort	53	Hester85@hotmail.com
2	Gavin	Braun	63	Chelsey.Carter73@hotmail.com
3	Anika	Fisher	48	Cortez.Hermiston-Howell95@hotmail.com
4	Nicklaus	Pacocha	44	Hayden79@hotmail.com
5	Arnulfo	Bradtke	53	Cheyenne_McClure@hotmail.com
6	Pasquale	Lebsack	36	Loyal_Beahan99@gmail.com
7	Polly	Brekke	32	Camren.Hand@yahoo.com
8	Ferne	Bechtelar	25	Orion.Roberts-Flatley96@gmail.com
9	Esmeralda	Rodriguez	38	Aiyana_Ryan@yahoo.com

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

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

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

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

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

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

id	firstName	lastName	age	email
0	Jacinthe	Robel	42	Sydnie6@yahoo.com
1	Carmela	Osinski	21	Chet14@hotmail.com
2	Zechariah	Metz	39	Brionna.Larkin65@gmail.com
3	Arvel	Witting	22	Stone34@yahoo.com
4	Trinity	Schroeder	40	Kyra_Luettgen29@yahoo.com
5	Jeromy	Schulist	43	Cloyd62@gmail.com
6	Kellen	Volkman	60	Daron.Green13@hotmail.com
7	Aiyana	Kassulke	46	Erling_Brakus99@hotmail.com
8	Amari	Hessel	18	Darryl_Buckridge@gmail.com
9	Darrion	Tromp	28	Brionna_Franey@gmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Kobe	Miller	35	Katelynn_Will@yahoo.com
1	Oran	Satterfield	33	Maybell7@gmail.com
2	Cleo	Nienow	39	Esperanza.Dickinson24@yahoo.com
3	Rhett	Emmerich-Kreiger	52	Aglae76@hotmail.com
4	Heber	Haley	31	Elsie15@hotmail.com
5	Al	Wyman	39	Nicolas.Hermann34@yahoo.com
6	Jevon	Upton	53	Petra.Koss@yahoo.com
7	Fermin	Larson	62	Orland.Veum@gmail.com
8	Autumn	Streich	19	Aubrey.Koss50@gmail.com
9	Berta	Ritchie	43	Gracie.Kuphal@yahoo.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	Martina	Kris	36	Margaret16@gmail.com
1	Paul	Rodriguez	60	Fleta.Mayer24@yahoo.com
2	Henderson	Adams	51	Archibald.Yost68@hotmail.com
3	Arely	Beier	24	Margaretta.Kilback@gmail.com
4	Anissa	Koelpin	56	Yessenia_Koepp25@hotmail.com
5	Elliot	Huels	34	Lindsay45@yahoo.com
6	Grover	Heidenreich	49	Mia_Wisozk14@gmail.com
7	Torrey	Jacobi	49	Noemy96@yahoo.com
8	Florida	Mosciski	50	Johnnie.Waters85@hotmail.com
9	Floy	Bednar	28	Tony_Kulas9@hotmail.com
10	Shanon	Ziemann	51	Ulices_Breitenberg@yahoo.com
11	Alivia	Sanford	31	Alvera.Hartmann43@gmail.com
12	Afton	Wyman	44	Lafayette4@yahoo.com
13	Louvenia	Bartoletti	22	Colt.Upton@yahoo.com
14	Destiney	Paucek-Nitzsche	22	Beulah93@hotmail.com
15	Chance	Walsh-Mertz	25	Gaetano.Zieme36@hotmail.com
16	Joseph	O'Connell	53	Gilbert.Carter@gmail.com
17	Ted	Gislason	65	Mandy55@yahoo.com
18	Nicola	Feil	29	Priscilla_Hessel@hotmail.com
19	Maryjane	Toy	18	Matilda82@gmail.com

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

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

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

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

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

Set Default Page Index and Page Size

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

id	firstName	lastName	age	email
10	Percy	Yost	28	Alan_Nolan6@gmail.com
11	Aniya	Zemlak	44	Maribel_Conroy9@gmail.com
12	Vance	Bergnaum	30	Lela.Hand@gmail.com
13	Forest	Hand	21	Amiya.Reilly11@hotmail.com
14	Bernie	Koss	32	Tom_Johnson91@hotmail.com
15	Nicolette	Jones	51	Antone14@gmail.com
16	Isac	Prohaska	40	Calista2@gmail.com
17	Lina	Oberbrunner	34	Freeda12@yahoo.com
18	Alanis	Rogahn	50	Andy99@hotmail.com
19	Sid	Nitzsche	61	Duncan_Nader@yahoo.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	Bailey	Ullrich	35	Ashlee29@hotmail.com
1	Kris	Murray-Rodriguez	40	Brown_Corkery@yahoo.com
2	Maud	Stark	39	Cielo_Cassin@hotmail.com
3	Alexander	Gleichner	53	Prince_Lemke85@yahoo.com
4	Aliya	Hand	32	Billie.Bayer@hotmail.com
5	Janessa	Lehner	31	Collin_Boehm@yahoo.com
6	Delbert	Herzog	48	Cornelius76@yahoo.com
7	Orin	Koepp	49	Nicola_Lebsack@hotmail.com
8	Bennie	Kulas	64	Shaun51@yahoo.com
9	Rodolfo	Reynolds	65	Rahsaan_Miller@yahoo.com
10	Nathanael	Stokes	62	Ericka.Kihn@gmail.com
11	Roel	McKenzie	27	Delfina1@yahoo.com
12	Adriana	Sawayn	41	Riley50@gmail.com
13	Nina	Tremblay	60	Fred_Gottlieb30@gmail.com
14	Daphnee	Mills	35	Ayla85@yahoo.com
15	Elmira	Lockman	40	Jessy_Terry@yahoo.com
16	Lucile	Ziemann	33	Octavia0@yahoo.com
17	Caden	Purdy	35	Einar_Rath-Corwin@yahoo.com
18	Adolphus	Medhurst-Ritchie	62	Cristobal_Lind84@yahoo.com
19	Craig	Hane	23	Al_Macejkovic3@gmail.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	Yasmine	O'Hara	35	Elvis_Schoen@yahoo.com
1	Lizeth	Jones	35	Judah9@hotmail.com
2	Vida	Becker	46	Jeffrey.Satterfield21@gmail.com
3	Destinee	Ankunding-Robel	30	Cory5@gmail.com
4	Deron	Haley	34	Palma_Mraz-Hills@yahoo.com
5	Lily	Schamberger	46	Frieda_Zemlak99@gmail.com
6	Anne	Beier	35	Angela16@gmail.com
7	Veda	Hettinger	32	Luz34@yahoo.com
8	Jena	Stanton	56	Ruby.Beer8@gmail.com
9	Demetrius	Roberts	63	Werner77@yahoo.com
10	Rico	Torphy	40	Lon67@gmail.com
11	Amya	Buckridge	54	Seth.Adams64@yahoo.com
12	Milo	Torphy	20	Aurore81@gmail.com
13	Sonny	Ward	52	Cole_Kohler-Wunsch39@hotmail.com
14	Chadd	Harvey	38	Marilyne_Beer57@hotmail.com
15	Trycia	Nader	55	Judy_Renner@yahoo.com
16	Heidi	Moen	59	Shanny65@gmail.com
17	Brock	Ortiz	55	Summer30@gmail.com
18	Annabelle	Labadie	37	Madeline37@gmail.com
19	Helene	Romaguera	35	Hilma.Williamson52@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	Lucinda	Connelly	44	Jena_Wiegand@gmail.com
1	Billy	Frami	28	Deangelo_Reinger@hotmail.com
2	Eldon	Bednar	40	Stuart.Pacocha96@hotmail.com
3	Jarrod	Shields	49	Gerard_Ebert28@gmail.com
4	Rosalind	Schiller-Hodkiewicz	42	Mathew_Christiansen75@gmail.com
5	Zaria	Medhurst	63	Elwyn_Maggio-Hartmann@yahoo.com
6	Alfonzo	Gleason	21	Lambert.Howe71@yahoo.com
7	Leo	Hickle	39	Hayden.Wiegand@hotmail.com
8	Ima	Huels	35	Bianka_Grady36@gmail.com
9	Tomasa	Will	37	Myles68@hotmail.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	Hector	Bauch	35	Jayson_Hamill-Rowe88@hotmail.com
1	Yvette	Anderson	35	Shawn_Skiles46@hotmail.com
2	Naomi	Schowalter	36	Dayana59@yahoo.com
3	Sunny	Doyle	42	Kacey58@hotmail.com
4	Patsy	Heathcote	48	Hilbert.Parisian@hotmail.com
5	Kenton	Dickinson	64	Sherman_Stiedemann-Luettgen@hotmail.com
6	Jerrold	Beahan	57	Bridie_Ankunding-Price@yahoo.com
7	Mason	Strosin	26	Oceane76@gmail.com
8	Haylie	Balistreri	56	Sophia.Crooks26@hotmail.com
9	Celine	Stokes	52	Jessie.MacGyver47@yahoo.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	Rachel	Pollich	42	Jaden.Ryan@hotmail.com
1	Johathan	Weber	53	Winifred_Feil70@hotmail.com
2	Veda	Orn	49	Chanelle_Rempel@yahoo.com
3	Duane	McClure	49	Tillman_Gulgowski45@gmail.com
4	Layla	Muller	55	Aiden53@yahoo.com
5	Cory	Schumm	59	Scarlett.Conn98@gmail.com
6	Giovanna	Kuphal	32	Roxanne74@yahoo.com
7	Earnest	Veum	56	Kaleigh.Cummerata@hotmail.com
8	Geovanny	Weber	21	Carter_Lakin@hotmail.com
9	Danielle	Batz	47	Haylee.Wintheiser@yahoo.com

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

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

Hide Checkbox

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

id	firstName	lastName	age	email
0	Paolo	Bechtelar	47	Darrick_Bernier85@gmail.com
1	Gaston	O'Keefe	35	Lorine29@hotmail.com
2	Federico	Collins	32	Wiley49@yahoo.com
3	Garnet	Wolff	57	Ignatius.Reichert@hotmail.com
4	Ora	Dicki	55	Hattie48@hotmail.com
5	Audreanne	O'Hara	47	Kiana_Streich39@gmail.com
6	Weston	Cronin	59	Henry_Satterfield92@yahoo.com
7	Ricardo	Reichert	20	Aniyah.Christiansen-Franecki43@yahoo.com
8	Kaitlin	Parisian	49	Jonatan.Boehm@yahoo.com
9	Sid	Ledner	34	Anne_Schimmel11@yahoo.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	Sylvia	Corkery	36	Alexandra_Cole54@yahoo.com
1	Jammie	DuBuque	23	Jessyca.Jenkins53@gmail.com
2	Lorna	Robel	27	Trinity92@hotmail.com
3	Francesca	Kerluke	32	Simeon.Macejkovic@yahoo.com
4	Lela	Gusikowski	20	Domenick.Wuckert10@hotmail.com
5	Bernadette	Kirlin	34	Sonny.Deckow@yahoo.com
6	Kurtis	Raynor	61	Bailee.OConner@yahoo.com
7	Nina	Predovic	20	Kaden.Schuster@gmail.com
8	Margarete	Thiel	37	Maia.Quitzon92@gmail.com
9	Robert	Cremin-Cruickshank	65	Vivian_Jerde46@yahoo.com

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

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

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

Control Row Selection

id	firstName	lastName	age	email
0	Jamel	Koelpin	21	Filiberto_Vandervort43@hotmail.com
1	Josue	Waters	52	Evalyn.Nitzsche44@yahoo.com
2	Bridget	Heidenreich	38	Eusebio_Kozey87@yahoo.com
3	Adela	Crona	55	Devyn_Wisozk-Homenick@hotmail.com
4	Evans	Crona	41	Erika.Becker@gmail.com
5	Moises	Greenfelder	30	Tommie64@yahoo.com
6	Harmony	Purdy-Kuhlman	44	Adolphus42@hotmail.com
7	Mark	Prohaska	51	Willow1@hotmail.com
8	Susanna	Green-Crona	55	Nick.Durgan62@yahoo.com
9	Lilyan	Hermann	53	Casimir_Legros@gmail.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	Peyton	Sipes	49	Olaf_Hansen6@hotmail.com
1	Marian	Kiehn	57	Cleveland.Terry38@hotmail.com
2	Alexis	Predovic	32	Ezra_Ondricka@gmail.com
3	Branson	Kilback	18	Robert99@hotmail.com
4	Agnes	Ryan	43	Jonatan42@gmail.com
5	Rod	Wolff	25	Janet.Murray@hotmail.com
6	Sincere	Mertz	30	Rhoda86@yahoo.com
7	Orlando	Mills	54	Guido.Grady@yahoo.com
8	Katlyn	Terry	52	Camille_VonRueden28@gmail.com
9	Alexie	Kirlin	23	Delpha.Rowe46@hotmail.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
1	Colby	Kilback	35	Allene_Kuhn23@gmail.com
7	Teagan	Sawayn	46	Bernie74@gmail.com
9	Crystel	Upton	33	Drew91@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	Taryn	Klocko	24	Maximillia.Turner@hotmail.com
1	Allan	Nolan	27	Ronny.Larson@hotmail.com
2	Deanna	Feil	54	Claude.Carter@hotmail.com
3	Arturo	Davis	56	Waino22@yahoo.com
4	Ernest	Denesik	38	Cornell_Macejkovic84@yahoo.com
5	Matilda	Stroman	61	Victoria29@yahoo.com
6	Edythe	Sawayn	63	Michale_Kuvalis58@hotmail.com
7	Jonas	Lueilwitz	41	Stella.Mann@yahoo.com
8	Retha	Zieme	52	Blair.Cummerata@hotmail.com
9	Delfina	Wisozk	47	Jenifer88@hotmail.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	Jordy	Conroy	20	Tony_Weimann-Klein@hotmail.com
1	Elise	Volkman	41	Elizabeth.OConnell13@yahoo.com
2	Akeem	Balistreri	29	Trinity58@hotmail.com
3	Mable	Rath	36	Jackie.Goodwin@yahoo.com
4	Alvah	Schultz	53	Alfreda_King@gmail.com
5	Roman	Towne	29	Elenora.Jacobi98@gmail.com
6	Kameron	Zemlak	47	Dion.Cole@yahoo.com
7	Wilma	Boyle	60	Kevin.Larson84@gmail.com
8	Mabel	Koelpin	48	Katelin.Lueilwitz@gmail.com
9	Lambert	Bogisich	22	Terrance.Ruecker67@hotmail.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	Chase	Kerluke	61	Pearlie_Fritsch11@gmail.com
1	Tyler	Treutel	53	Rosamond.Gutkowski@yahoo.com
2	Delmer	Rippin	51	Layla19@yahoo.com
3	Yessenia	Gulgowski	51	Toni.Frami@hotmail.com
4	Brody	Waters-Reinger	32	Mattie_Pagac44@yahoo.com
5	Leanne	Gottlieb	46	Kaylie.Gerlach@hotmail.com
6	Antone	Gulgowski	62	Rosella80@gmail.com
7	Micaela	Johnston	39	Cielo_Moen63@yahoo.com
8	Bud	Weimann	26	Burley.Leffler52@gmail.com
9	Levi	Jacobi	36	Johnpaul91@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