Table

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

id	firstName	lastName	age	email
0	Jeromy	Parisian	20	Oleta18@yahoo.com
1	Richmond	Okuneva	45	Abel18@gmail.com
2	Armando	Stanton	45	Anastacio.Gibson56@yahoo.com
3	Perry	Quigley	24	Eddie.VonRueden@gmail.com
4	Coralie	Mann	28	Patty_Schiller81@yahoo.com
5	Lisa	Gerhold	61	Kallie.Langosh77@yahoo.com
6	Owen	Hahn	55	Golden.Kris52@hotmail.com
7	Loy	Cartwright	41	Rowan7@yahoo.com
8	Shaun	Aufderhar	19	Rosalind_Metz-Jakubowski34@hotmail.com
9	Presley	Rempel	60	Luz.Kunze93@gmail.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	Mario	Hackett	26	Dominique.Smitham-Oberbrunner9@hotmail.com
1	Sergio	Hickle	44	Garett_Abernathy79@hotmail.com
2	Barbara	VonRueden	24	Wendy24@hotmail.com
3	Lynda	Hudson	50	Abbigail41@gmail.com
4	Ezekiel	Rippin	24	Whitney.Hegmann79@yahoo.com
5	Josh	Hyatt	42	Lonnie.Mann@gmail.com
6	Anita	Schoen	42	Nina_Parisian50@yahoo.com
7	Delta	Ryan	20	Mathew20@yahoo.com
8	Elissa	Kertzmann	62	Kristine.Legros17@gmail.com
9	Destiney	Metz	21	Yoshiko_Ebert50@yahoo.com

id	firstName	lastName	age	email
0	Mario	Hackett	26	Dominique.Smitham-Oberbrunner9@hotmail.com
1	Sergio	Hickle	44	Garett_Abernathy79@hotmail.com
2	Barbara	VonRueden	24	Wendy24@hotmail.com
3	Lynda	Hudson	50	Abbigail41@gmail.com
4	Ezekiel	Rippin	24	Whitney.Hegmann79@yahoo.com
5	Josh	Hyatt	42	Lonnie.Mann@gmail.com
6	Anita	Schoen	42	Nina_Parisian50@yahoo.com
7	Delta	Ryan	20	Mathew20@yahoo.com
8	Elissa	Kertzmann	62	Kristine.Legros17@gmail.com
9	Destiney	Metz	21	Yoshiko_Ebert50@yahoo.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	Raymond	Blanda	25	Peter.Turcotte65@gmail.com
1	Adrienne	Hansen	61	Freda_Pfannerstill53@hotmail.com
2	Maddison	Bogan	56	Thad19@gmail.com
3	Stuart	Kris	28	Ryan63@hotmail.com
4	Leslie	Tillman	60	Filiberto29@hotmail.com
5	Israel	Prohaska	28	Ana_Witting51@yahoo.com
6	Luz	Hyatt	45	Candice87@hotmail.com
7	Bruce	Jacobi	27	Florine_Parisian-Kemmer@gmail.com
8	Garrett	Mann	49	Penny_Pfeffer@yahoo.com
9	Wilbert	Dietrich	44	Felicia_Cassin@hotmail.com

id	firstName	lastName	age	email
0	Raymond	Blanda	25	Peter.Turcotte65@gmail.com
1	Adrienne	Hansen	61	Freda_Pfannerstill53@hotmail.com
2	Maddison	Bogan	56	Thad19@gmail.com
3	Stuart	Kris	28	Ryan63@hotmail.com
4	Leslie	Tillman	60	Filiberto29@hotmail.com
5	Israel	Prohaska	28	Ana_Witting51@yahoo.com
6	Luz	Hyatt	45	Candice87@hotmail.com
7	Bruce	Jacobi	27	Florine_Parisian-Kemmer@gmail.com
8	Garrett	Mann	49	Penny_Pfeffer@yahoo.com
9	Wilbert	Dietrich	44	Felicia_Cassin@hotmail.com

id	firstName	lastName	age	email
0	Raymond	Blanda	25	Peter.Turcotte65@gmail.com
1	Adrienne	Hansen	61	Freda_Pfannerstill53@hotmail.com
2	Maddison	Bogan	56	Thad19@gmail.com
3	Stuart	Kris	28	Ryan63@hotmail.com
4	Leslie	Tillman	60	Filiberto29@hotmail.com
5	Israel	Prohaska	28	Ana_Witting51@yahoo.com
6	Luz	Hyatt	45	Candice87@hotmail.com
7	Bruce	Jacobi	27	Florine_Parisian-Kemmer@gmail.com
8	Garrett	Mann	49	Penny_Pfeffer@yahoo.com
9	Wilbert	Dietrich	44	Felicia_Cassin@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	Casimir	Fahey	22	Summer.Schumm59@hotmail.com
1	Alejandro	Herman	48	Edna_Koelpin@hotmail.com
2	Miguel	Parisian	20	Angelica.Bashirian@hotmail.com
3	Kyleigh	Graham	47	Bob.Metz14@gmail.com
4	Deon	Cormier	22	Coralie.Lemke@gmail.com
5	Aniyah	Koch	33	Cindy_Marquardt63@yahoo.com
6	Ericka	Shanahan	26	Tonya.Rogahn@hotmail.com
7	Julianne	Ortiz	40	Samantha42@hotmail.com
8	Isaac	Harvey	43	Coby.Schaefer67@yahoo.com
9	Francisco	Dibbert	41	Elsa.Heidenreich@hotmail.com

id	firstName	lastName	age	email
0	Casimir	Fahey	22	Summer.Schumm59@hotmail.com
1	Alejandro	Herman	48	Edna_Koelpin@hotmail.com
2	Miguel	Parisian	20	Angelica.Bashirian@hotmail.com
3	Kyleigh	Graham	47	Bob.Metz14@gmail.com
4	Deon	Cormier	22	Coralie.Lemke@gmail.com
5	Aniyah	Koch	33	Cindy_Marquardt63@yahoo.com
6	Ericka	Shanahan	26	Tonya.Rogahn@hotmail.com
7	Julianne	Ortiz	40	Samantha42@hotmail.com
8	Isaac	Harvey	43	Coby.Schaefer67@yahoo.com
9	Francisco	Dibbert	41	Elsa.Heidenreich@hotmail.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	Elena	Senger	58	Arch54@hotmail.com
1	Darwin	Boyle	27	Hans.Gutmann86@yahoo.com
2	Dakota	Hessel	43	Roberta.Beahan@yahoo.com
3	Maegan	Gibson	54	Breanne27@hotmail.com
4	Mario	Huels	28	Hollis.Larkin79@hotmail.com
5	Craig	Huels	65	Jody.Langworth97@hotmail.com
6	Julian	Hoeger	21	Keon_Rosenbaum@hotmail.com
7	Billie	Collins	46	Dale36@yahoo.com
8	Hortense	Little	52	Joe68@yahoo.com
9	Daisha	Trantow	23	Lonnie_Altenwerth@yahoo.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	Amy	Reichert	47	Adelle.Kuphal71@yahoo.com
1	Nya	O'Kon	39	Tasha.Kreiger@yahoo.com
2	Johnathan	Bahringer	49	Laverne_Brakus61@yahoo.com
3	Gussie	Mosciski	34	Aurelia_McDermott13@gmail.com
4	Sherry	Franecki	50	Sheldon.Will84@gmail.com
5	Lisa	Erdman-Greenholt	25	Jonathan.Moore@yahoo.com
6	Roger	Predovic-Bartell	53	Cecile_Medhurst-Borer@gmail.com
7	Brionna	Nolan	38	Pamela_Grant0@yahoo.com
8	Natalia	McCullough	59	Elinor.Crist@gmail.com
9	Jose	Hermann	65	Nancy.Veum55@yahoo.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	Hazel	Wintheiser	35	Jeannette.Batz-Zieme5@hotmail.com
1	Camille	Gusikowski	35	Hugo22@gmail.com
2	Zion	Torp	22	Diamond24@yahoo.com
3	Quinten	Grimes	42	Ricky_Moen28@gmail.com
4	Melody	Lind	59	Mario37@gmail.com
5	Emmet	Lueilwitz	21	Donna76@yahoo.com
6	Abel	Boyle	57	Katelyn_Labadie@yahoo.com
7	Nicholaus	Kuhlman	61	Clark.Hodkiewicz@gmail.com
8	Darwin	Langworth-Kessler	29	Sonja.Wiegand@gmail.com
9	Florence	Mosciski	41	Bernadette20@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	Blanca	Weissnat	38	Elias_Towne@hotmail.com
1	Janis	Beer	57	Brett_Mraz74@yahoo.com
2	Vickie	McDermott	40	May24@gmail.com
3	Herman	Kerluke	41	Florence.Deckow27@gmail.com
4	Antoinette	Stoltenberg	38	Estell14@gmail.com
5	Morris	Parker	40	Anne_Nikolaus98@gmail.com
6	Isobel	Lindgren	19	Brenda76@yahoo.com
7	Koby	Schaden	34	Abdullah.Mitchell@gmail.com
8	Alvin	Thiel	28	Ben_Baumbach-Kulas@gmail.com
9	Sammie	Hoppe	31	Candelario34@gmail.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	Cecelia	Walter-Green	49	Krystal.Gleichner33@hotmail.com	(605) 824-3234 x616	admin	inactive	12/29/2025	3/7/2026
1	Chauncey	Parisian	64	Delores.Renner@yahoo.com	1-550-689-0559 x705	user	active	6/11/2025	5/5/2025
2	Tanner	Reinger	31	Lila.Dare72@gmail.com	1-348-351-2783	admin	inactive	10/17/2025	11/20/2025
3	Einar	Howell	32	Patsy91@hotmail.com	749-419-4289	admin	inactive	4/16/2026	1/9/2026
4	Jackie	Stroman	56	Catalina_Feest@yahoo.com	1-922-772-6137	admin	active	7/8/2025	4/6/2026
5	Damon	Crooks	44	Kylie55@yahoo.com	893-284-2743 x918	admin	active	2/20/2026	1/13/2026
6	Leopold	Schuster	24	Janis.Konopelski18@gmail.com	420-860-7473 x529	user	inactive	2/14/2026	7/19/2025
7	Woodrow	Cummerata-McCullough	45	Cordie68@yahoo.com	421-295-5499 x1554	user	active	12/15/2025	7/8/2025
8	Kavon	Schulist	31	Estrella12@hotmail.com	(850) 868-0397 x4884	admin	inactive	6/28/2025	12/24/2025
9	Estel	Haag	45	Brian_Sporer52@yahoo.com	(711) 218-6706 x627	admin	active	8/4/2025	7/10/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	Nick	Kemmer	65	Deshaun42@hotmail.com
1	Marcelino	McLaughlin	37	Clementina.Weber-Jerde@gmail.com
2	Phil	Gerlach	38	Emma84@hotmail.com
3	Maureen	King	42	Albertha_Vandervort81@hotmail.com
4	Felicita	Rempel	24	Austin.Bergstrom@hotmail.com
5	Bonnie	Buckridge	18	Hazel_VonRueden86@hotmail.com
6	Tricia	Collins	18	Nick53@hotmail.com
7	Carolyne	Farrell	63	Lonny6@gmail.com
8	Opal	Johnson	53	Claud_Goyette78@gmail.com
9	Trever	Breitenberg-Harber	45	Ruben_Koepp@hotmail.com

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

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

id	user
	name		age	email
	firstName	lastName	age	email
0	Manley	Casper	64	Mable_Hahn11@yahoo.com
1	Berniece	Fisher	52	Earnest52@yahoo.com
2	Doris	Reichert	31	Ryan_Rohan@yahoo.com
3	Mohammad	Stokes	26	Boyd_Gleason@yahoo.com
4	Scotty	Funk	19	Malcolm.Pfeffer-Renner@yahoo.com
5	Foster	Bayer	54	Renee_Stoltenberg91@hotmail.com
6	Rosie	Price	65	Lydia_Reichert@gmail.com
7	Ellie	Sipes	65	Crystal60@gmail.com
8	Leora	Mante	52	Austyn24@gmail.com
9	Felix	Balistreri	28	Maeve.Bosco@gmail.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	Shayne	Wyman	22	Ansel43@hotmail.com
1	Delilah	Sanford	39	Athena_Kuphal@gmail.com
2	Estella	Mann	65	Kayden_Schultz50@gmail.com
3	Maddison	Herman	38	Ryan.Will-Cremin22@gmail.com
4	Rossie	Stanton	18	Roxanne.Kuphal68@hotmail.com
5	Victoria	Harris	22	Rosendo41@hotmail.com
6	Ira	Flatley	45	Scot_Rowe@gmail.com
7	Brant	Moen	45	Lola9@gmail.com
8	Claude	Moore	56	Trevor_Johns1@hotmail.com
9	Otis	Adams	50	Sage.Ward@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	Art	Reinger	59	Joany_Kris@hotmail.com
1	Charlene	Hettinger	19	Nora.Adams97@gmail.com
2	Juvenal	Oberbrunner	50	Sheila87@gmail.com
3	Autumn	Reilly	34	Halie_Fisher@yahoo.com
4	Laverne	Block	30	Taya.Sporer19@yahoo.com
5	Leon	Bartell	61	Seth.Bartoletti12@yahoo.com
6	Ervin	Boyle	58	Colton_Kemmer77@yahoo.com
7	Dovie	Cormier	46	Brigitte.Aufderhar@gmail.com
8	Robin	Sipes	58	Mathew.Lindgren-Armstrong@yahoo.com
9	Savanah	Crona	34	Wanda58@yahoo.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	Silvia	Dibbert	19	Ulises.Gerhold@gmail.com
1	Rodney	Treutel	30	Raquel98@gmail.com
2	Elta	Stiedemann	63	Cathryn21@gmail.com
3	Hellen	Grady	63	Jeremie_Rempel@yahoo.com
4	Jaydon	Hartmann	64	Gisselle.Durgan7@hotmail.com
5	Regina	Parker	39	Nathen_Hauck@hotmail.com
6	Candace	Maggio	45	Kelsie.Jerde87@yahoo.com
7	Aracely	Nienow	40	Claire83@hotmail.com
8	Mercedes	Marvin	23	Randolph.Schaefer@gmail.com
9	Leah	Kozey	64	Clarissa.Bins@yahoo.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	Aimee	Jacobs	61	June_Hand@hotmail.com
1	Prince	Hessel	24	Samuel53@yahoo.com
2	Wendell	Kunze	41	Sherry_Tromp@yahoo.com
3	Percy	Terry-Padberg	25	Ashley_Schoen@gmail.com
4	Travis	Kohler	54	Miguel.Torp@gmail.com
5	Patrick	Zieme	38	Eula.Nolan@hotmail.com
6	Sedrick	Kuphal	61	Otis_Halvorson61@hotmail.com
7	Simone	Walsh	57	Meta53@yahoo.com
8	Meghan	Trantow	24	Kent65@gmail.com
9	Mabel	Lubowitz	29	June_Bauch1@gmail.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
8	Isac	Stark	63	Pearlie_Wyman@yahoo.com
0	Winifred	Jenkins	59	Vicki.Mayert-Jacobi80@yahoo.com
7	Shana	O'Reilly	50	Einar_Zboncak14@yahoo.com
6	Milton	Jacobson	49	Gregg_Vandervort27@yahoo.com
2	Delores	Wuckert	33	Clifford.Zulauf48@gmail.com
4	Bert	Carroll	31	Daisy92@yahoo.com
3	Audreanne	Becker	29	Kelvin.Auer44@yahoo.com
9	Natasha	Rosenbaum	28	Kacey48@gmail.com
5	Keith	Mertz	27	Jarret_Moore@gmail.com
1	Keara	Schulist	22	Dovie78@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	Jerrell	Senger	63	Carolyn.Leannon@hotmail.com
1	Yoshiko	Pagac	56	Ted33@gmail.com
2	Jeannette	Skiles	41	Randolph82@hotmail.com
3	Gregory	Schmidt	34	Birdie_Orn3@gmail.com
4	Kayla	Crona	26	Myra_White@gmail.com
5	Erin	Herman	61	Brenna12@gmail.com
6	Jedediah	Purdy	23	Ira.Kilback@gmail.com
7	Eddie	Wyman	22	Herman.Gorczany18@yahoo.com
8	Benton	Gibson	48	Morton_Schowalter@hotmail.com
9	Deanna	Parker	21	Perry.Lubowitz@hotmail.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	Daryl	Steuber	42	Gisselle.Feil96@gmail.com
1	Fred	Hammes	60	Darin_Robel25@hotmail.com
2	Danny	Dietrich	40	Lynne_Goyette54@gmail.com
3	Melyssa	Lebsack	36	Jeremy8@yahoo.com
4	Emmy	Gislason	23	Garnet.Kiehn78@gmail.com
5	Muriel	Stanton	31	Major.Dare80@gmail.com
6	James	Bins	46	Perry42@hotmail.com
7	Wyatt	Schiller	55	Cullen13@gmail.com
8	Russell	Ankunding	39	Salvador_Ruecker@gmail.com
9	Adam	Kovacek	46	May51@hotmail.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	Bernard	Vandervort	19	Patty50@hotmail.com
1	Roscoe	Nicolas	49	Delfina36@gmail.com
2	Marlin	Cummings	20	Haskell_Kuhic86@gmail.com
3	Barry	Borer-Bernier	44	Clemmie_Hilpert9@yahoo.com
4	Parker	Lubowitz	43	Eriberto77@yahoo.com
5	Kaley	Mosciski	52	Roderick.Kirlin@yahoo.com
6	Darryl	Mitchell	48	Gabriella.Ziemann@hotmail.com
7	Ron	Wintheiser	46	Alberta85@yahoo.com
8	Abner	Moore	35	Mack.Spencer29@yahoo.com
9	Frederik	Bosco	65	Nancy_Wiegand@hotmail.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	Velma	Wuckert	19	Chelsey.Heathcote@yahoo.com
1	Luz	Kerluke	42	Lenny.Daniel-Bernhard86@yahoo.com
2	Irene	Halvorson	26	Itzel.Champlin@yahoo.com
3	Dayna	Ondricka-Okuneva	39	Leigh_Zboncak77@yahoo.com
4	Carmen	Beier	46	Destiny80@gmail.com
5	Sara	Harvey	44	Beatrice_Cole35@hotmail.com
6	Jannie	Hyatt	64	Triston32@yahoo.com
7	Miriam	Johnston	42	Maria2@yahoo.com
8	Jeffery	Berge	47	Conrad22@yahoo.com
9	Edison	Anderson	57	Clyde_Hansen2@yahoo.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	Judy	D'Amore	60	Keon.Lynch98@gmail.com
1	Mable	Bernier	18	Jeff0@yahoo.com
2	Genoveva	Thompson	26	Cassandra_Veum53@hotmail.com
3	Burdette	Ward	35	Gail_Pacocha@hotmail.com
4	Justyn	Lueilwitz	40	Lyla_Reinger@gmail.com
5	Amara	Toy	47	Johnny41@yahoo.com
6	Dwayne	Franecki	58	Cory.Fadel47@yahoo.com
7	Kristopher	Wolff	33	Doris.Johns@yahoo.com
8	Tyler	Daniel	42	Raquel5@yahoo.com
9	Bulah	Rau	55	Lester_Lesch@yahoo.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Moses	O'Hara	19	Georgiana.Dicki55@hotmail.com
1	Bethany	Prohaska	48	Marcelle58@yahoo.com
2	Rosario	Ward	65	Fernando.Block@yahoo.com
3	Flo	Jaskolski	53	Jana67@gmail.com
4	Barrett	Kuhic	26	Myrtle_Sauer@hotmail.com
5	Paul	Moore	45	Melinda57@yahoo.com
6	Brooks	Bartell-Johnston	54	Noe_Little64@yahoo.com
7	Bethany	Schinner	47	Maye20@gmail.com
8	Martin	Schowalter	45	Brian14@gmail.com
9	Jazmyn	Hirthe-Feeney	24	Kurt.Bogan@yahoo.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	Cindy	Kerluke-Mayert	31	Wilson_Goldner@gmail.com
1	Cullen	Gutkowski	37	Joelle_Stokes50@yahoo.com
2	Jennings	Bosco	51	Lisa.Harber76@hotmail.com
3	Makayla	Kautzer	36	Prudence_Ullrich74@gmail.com
4	Ricky	Grimes-Bernhard	21	Archie.Schmeler@hotmail.com
5	Patty	Heidenreich	20	Ed.Macejkovic68@yahoo.com
6	Gerard	Wiegand	51	Louvenia.Bailey82@hotmail.com
7	Leland	Haley	42	Kirk_Klocko-Denesik@gmail.com
8	Omar	Klein	29	Vincent_Luettgen@gmail.com
9	Arthur	Toy	52	Thomas_Hegmann@hotmail.com
10	Noah	Schmeler	49	Marlene_Fadel@gmail.com
11	Norene	Harvey	56	Sabryna.Purdy19@hotmail.com
12	Ben	Wilderman	56	Shana_Zieme@yahoo.com
13	Dayana	Wyman	39	Bobby.Tremblay-Greenholt@yahoo.com
14	Allen	Veum	33	Chase_Luettgen@hotmail.com
15	Delaney	Kautzer	31	Jeffry_Runolfsdottir35@hotmail.com
16	Willy	Fay	32	Fred_Green30@hotmail.com
17	Krista	Haag	45	Iris34@hotmail.com
18	Virgie	Watsica	57	Erich99@gmail.com
19	Ron	Upton	38	Ally_Jacobi12@gmail.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	Laura	Corkery	60	Ole.Boyer@yahoo.com
11	Ramona	Kohler	50	Dulce3@yahoo.com
12	Kenna	Hodkiewicz	30	Sam.Stokes@gmail.com
13	Willard	Okuneva	39	Jedediah_Hamill96@yahoo.com
14	Theron	Murazik	52	Yasmin.Kreiger22@hotmail.com
15	Joann	Reichel	65	Guiseppe67@hotmail.com
16	Henrietta	Cartwright	64	Prudence36@hotmail.com
17	Rosalinda	Hermiston	57	Leigh65@gmail.com
18	Lena	Macejkovic	43	Debbie.Gerhold@yahoo.com
19	Erik	Rolfson	29	Demarco.Welch@hotmail.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	Aliza	Kihn	21	Eloise_Armstrong68@yahoo.com
1	Luigi	Cartwright	62	Tito_Purdy20@gmail.com
2	Georgette	Weber	41	Tommy.Bins@hotmail.com
3	Gladyce	Bergnaum	59	Hershel_Zboncak86@hotmail.com
4	Rosie	Shanahan	27	Gerardo.Maggio7@gmail.com
5	Rhonda	Nader	40	Patricia36@gmail.com
6	Harriet	Lubowitz	31	Anita.Abshire75@hotmail.com
7	Edwin	Casper	64	Tyrone14@hotmail.com
8	Cecilia	O'Reilly	39	Dallin_Ernser20@yahoo.com
9	Amelia	Gutkowski	63	Marlene29@hotmail.com
10	Judy	VonRueden	34	Veda.Marquardt@hotmail.com
11	Lindsay	Swift	50	Mervin.OHara@hotmail.com
12	Kristina	Bosco	41	Forrest.Borer@yahoo.com
13	Owen	Schmeler	33	Doug.Runte68@gmail.com
14	Nicole	Zieme	39	Cora95@yahoo.com
15	Mitchell	Torp	62	Rashawn_Kshlerin50@gmail.com
16	Calvin	Russel	44	Sherman.Thompson-Schuppe66@yahoo.com
17	Grady	Boehm	59	Brenna_Kozey65@hotmail.com
18	Alexandra	Terry	45	Delaney0@hotmail.com
19	Alek	Hand	62	Dale22@yahoo.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	Mindy	Bogan	52	Christian44@yahoo.com
1	Winifred	Armstrong-Smitham	61	Gavin.Haag@hotmail.com
2	Maeve	Ullrich	29	Kurtis3@yahoo.com
3	Arnaldo	Wisoky	55	Harriet56@gmail.com
4	Ivan	Haley	59	Johathan.Keebler@hotmail.com
5	Meda	Rice	52	Gwendolyn.Smitham40@hotmail.com
6	Frances	Ziemann	55	Gayle_Gerhold@hotmail.com
7	Seth	Hand	45	Esmeralda85@gmail.com
8	Naomie	Bode-Schneider	53	Ernestine.Batz78@yahoo.com
9	Mya	Champlin	60	Alize_Windler31@gmail.com
10	Aubree	Dooley	58	Murray16@gmail.com
11	Malinda	Hoppe	46	Oceane_Harvey@yahoo.com
12	Frank	Littel	47	Maxime_Cole@hotmail.com
13	Lurline	Bashirian	18	Paris_Stracke@gmail.com
14	Teri	Torp	59	Myah_Marks@gmail.com
15	Lawrence	Lindgren	41	Jairo_Huels27@hotmail.com
16	Amari	Schmeler	60	Domenic30@hotmail.com
17	Billy	Windler	56	Melvin.Kemmer@gmail.com
18	Reba	Wolff	56	Archie63@yahoo.com
19	Shakira	Kautzer	47	Gilberto_Gislason82@yahoo.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	Marguerite	Denesik	51	Friedrich_Heaney29@hotmail.com
1	Samuel	Ankunding-Runolfsson	18	Jane80@yahoo.com
2	Iliana	Gulgowski	64	Anne20@yahoo.com
3	Frances	Ortiz	48	Corey.Shields95@gmail.com
4	Betsy	McCullough	24	Bessie_Batz@gmail.com
5	Justice	Sipes	26	Rickey_Murray12@hotmail.com
6	Todd	Jaskolski	56	Shemar60@yahoo.com
7	Edgar	West	31	Alec_Schmitt@hotmail.com
8	Heber	Price	59	Gwendolyn90@yahoo.com
9	Ralph	Kerluke	45	Alec_Brekke28@hotmail.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	Dayton	Kertzmann	59	Eunice_Witting75@hotmail.com
1	Trevor	Bogisich	24	Christiana.Hamill@hotmail.com
2	Vanessa	Maggio	32	Todd43@hotmail.com
3	Dallin	Gleason-Nienow	44	Jeanne_Schimmel48@yahoo.com
4	Megan	Streich	36	Roxanne_Hyatt@gmail.com
5	Chet	Bashirian	31	Darren89@yahoo.com
6	Jason	Heathcote	41	Jennifer_Strosin54@yahoo.com
7	Howard	Medhurst	64	Robert_Denesik@yahoo.com
8	Trisha	Osinski	25	Theresa68@hotmail.com
9	Erica	Zboncak	63	Woodrow.Ullrich@gmail.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	Deion	Brakus	26	Rogers59@yahoo.com
1	Jaylen	Feest	27	Jeanie.Miller@hotmail.com
2	Veronica	Kutch	52	David69@gmail.com
3	Hank	Breitenberg	43	Ephraim28@yahoo.com
4	Carleton	Paucek	41	Giuseppe95@gmail.com
5	Ralph	Ward	44	Isaias43@gmail.com
6	Rosa	Fay	37	Karson_Thiel@yahoo.com
7	Raleigh	Zboncak	44	Pascale.Okuneva56@gmail.com
8	Frankie	Keebler	47	Jaime71@hotmail.com
9	Rolando	Williamson	19	Marc_Hartmann@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	Margaret	Schuppe	28	Lucy.Kris@hotmail.com
1	Walton	Labadie	30	Miller25@gmail.com
2	Laisha	Stokes	40	Deontae.Walter43@gmail.com
3	Ervin	Pfeffer	45	Krystina10@gmail.com
4	Mohamed	Wiegand	41	Gennaro21@gmail.com
5	Everardo	Koss	18	Brielle_Bahringer@gmail.com
6	Dora	Runolfsdottir	37	Luke.Predovic60@hotmail.com
7	Edna	Vandervort	22	Talon.Schaden@hotmail.com
8	Henry	Marks	47	Rita53@yahoo.com
9	Furman	Raynor	52	Nico.Hyatt@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	Evan	Rodriguez	36	Otis.Heaney@yahoo.com
1	Rose	Smitham	56	Elsa3@hotmail.com
2	Annabelle	Stokes	24	Eda.OHara@yahoo.com
3	Alfred	Mitchell	19	Carli_Lynch@yahoo.com
4	Winston	Runolfsson	54	Rick_Schoen0@yahoo.com
5	Vincent	Weber	19	Destinee.Kulas31@hotmail.com
6	Leta	Prosacco	65	Gina31@hotmail.com
7	Beulah	Mann-Dibbert	62	Jaeden_Marquardt@gmail.com
8	Emilie	Lehner	56	Junior.Labadie71@gmail.com
9	Newton	Wiza	29	Meagan63@gmail.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	Elaine	McDermott	58	Delmer_Zulauf@hotmail.com
1	Lena	Walter	42	Aida35@gmail.com
2	Urban	Howe	33	Wilbert71@gmail.com
3	Brady	Morissette	58	Heather93@yahoo.com
4	Nikolas	Welch	23	Cassandra.Lowe65@hotmail.com
5	Hilda	Baumbach	50	Lisa24@yahoo.com
6	Lela	Orn	31	Michelle27@gmail.com
7	Jim	Moore	23	Anahi95@gmail.com
8	Josh	Zulauf	47	Rosemary38@gmail.com
9	Emmy	Upton	44	Felipe.Reichel@hotmail.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	Pablo	Jones	35	Aniyah86@gmail.com
1	Miguel	Raynor-Russel	50	Zion18@gmail.com
2	Nelle	Rolfson	31	Addie.Rath50@gmail.com
3	Mae	Gleason	53	Raheem_Grady24@gmail.com
4	Elyse	O'Connell-Robel	49	Rosella48@hotmail.com
5	Elroy	Welch	27	Claudia6@hotmail.com
6	Mayra	Rohan	52	Theresa_Stracke@hotmail.com
7	Faith	O'Connell	65	Lynne.Schulist@hotmail.com
8	Rolando	Mitchell	19	Bettie.Auer78@yahoo.com
9	Dock	Jones	61	Adrain33@yahoo.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
2	Dedrick	Feest-Haag	50	Emilie8@gmail.com
8	Cecelia	Tromp	22	Rosalee30@gmail.com
9	Rahsaan	Hegmann	45	Saul.Towne@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	Bernadette	MacGyver	59	Walton.Considine@yahoo.com
1	Rosalinda	Will	28	Rhoda.Nader@yahoo.com
2	Virgil	Watsica	60	Harvey_Upton@yahoo.com
3	Aida	Moen	38	Todd_Swaniawski@hotmail.com
4	Dale	Thompson	56	Jillian0@gmail.com
5	Louis	Zemlak	46	Emma66@hotmail.com
6	Gisselle	Becker	39	Melissa_Marvin@yahoo.com
7	Graham	Schowalter	20	Christy85@yahoo.com
8	Sheri	Schoen	57	Dewey_Walter26@gmail.com
9	David	Stehr	19	Edith73@gmail.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	Alexandrine	Orn	46	Katlynn.Nikolaus93@yahoo.com
1	Adah	Rice	27	Kira_Abshire20@hotmail.com
2	Ian	Marvin	45	Nicholas50@gmail.com
3	Samir	Powlowski	44	Darius85@hotmail.com
4	Andrea	Quigley	24	Jonathan61@yahoo.com
5	Rosalinda	Hudson	19	Esther.Kub74@gmail.com
6	Daren	Reichert	19	Rolando.Zulauf@hotmail.com
7	Keanu	Lakin	30	Enrique36@yahoo.com
8	Felix	Larson	21	Shelley_Anderson@yahoo.com
9	Braulio	Wuckert	54	Kristine_Bechtelar95@gmail.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	Noemy	Funk	19	Cecil_Zulauf66@yahoo.com
1	Julius	Pfannerstill-Kerluke	23	Gerda.Stamm@hotmail.com
2	Savanna	Huel	32	Betsy_Pollich@hotmail.com
3	Reginald	Mertz	43	Clay_Grant@yahoo.com
4	Leroy	Lowe	51	Chelsea94@hotmail.com
5	Perry	Olson	34	Albert_Bins26@hotmail.com
6	Eric	Klein	35	Ian53@yahoo.com
7	Jayce	Bednar	59	Olin.Marvin@gmail.com
8	Max	Stoltenberg	65	Ismael_Dietrich@yahoo.com
9	Marcos	Nienow-Cummings	54	Charley_Halvorson@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" \| AnyString ...` 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

NativeTable is a component for efficiently organizing and displaying data.

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

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

Badge is a component that emphasizes the status of an item to make it immediately recognizable.

BarChart is a component for drawing bar charts to compare multiple sets of data.

Card is a component that groups and displays related information. By default, it renders a article element.

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

DataList is used to display a list of data items.

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.