Table

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

id	firstName	lastName	age	email
0	Rachel	Schimmel	51	Mertie.Stamm66@yahoo.com
1	Joshua	Thompson	65	Hubert_Labadie@gmail.com
2	Chaim	Roob	27	Loyal_Considine0@hotmail.com
3	Rupert	Stark	40	Kailey_Kozey@yahoo.com
4	Bobby	Jast	62	Clarence26@yahoo.com
5	Anne	Rohan-Reichert	39	Mamie33@hotmail.com
6	Nya	Wilkinson-Walker	57	Colin_Kertzmann@yahoo.com
7	Corine	Legros	36	Vickie.Powlowski82@hotmail.com
8	Roosevelt	Keeling	26	Chester4@gmail.com
9	Jazmyn	Heller	32	Albert.Kshlerin12@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	Meredith	McClure-Feest	44	Lukas6@gmail.com
1	Catherine	Altenwerth	33	Brooke.Boyer@gmail.com
2	Breanne	Rosenbaum	61	Chelsea6@hotmail.com
3	Philip	Padberg	42	Keenan.Jaskolski@yahoo.com
4	Marta	Hermann	29	Lizeth_Nicolas@hotmail.com
5	Juan	McLaughlin	26	Marc92@hotmail.com
6	Britney	Hermann	52	Lyle.Beatty@yahoo.com
7	Tiffany	Schuster	19	Barrett.Willms@hotmail.com
8	Ray	Kutch	21	Isom69@gmail.com
9	Valerie	Doyle	30	Louise54@yahoo.com

id	firstName	lastName	age	email
0	Meredith	McClure-Feest	44	Lukas6@gmail.com
1	Catherine	Altenwerth	33	Brooke.Boyer@gmail.com
2	Breanne	Rosenbaum	61	Chelsea6@hotmail.com
3	Philip	Padberg	42	Keenan.Jaskolski@yahoo.com
4	Marta	Hermann	29	Lizeth_Nicolas@hotmail.com
5	Juan	McLaughlin	26	Marc92@hotmail.com
6	Britney	Hermann	52	Lyle.Beatty@yahoo.com
7	Tiffany	Schuster	19	Barrett.Willms@hotmail.com
8	Ray	Kutch	21	Isom69@gmail.com
9	Valerie	Doyle	30	Louise54@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	Cecil	Shanahan	39	Lempi.Hilll-Monahan@yahoo.com
1	Donny	Kuhn	26	Susie.OHara0@gmail.com
2	Sherry	Mraz	40	Augustus95@gmail.com
3	Stanley	Hickle	39	Constance_Towne58@hotmail.com
4	Eveline	Gibson	64	Salvador_Torp-Schowalter81@gmail.com
5	Kristi	Gusikowski	34	Janae79@gmail.com
6	Chelsea	Schumm	65	Elsie51@yahoo.com
7	Ward	Johns	21	Pauline.Tromp13@gmail.com
8	Mohamed	Marvin	19	Rudolph_Carroll28@gmail.com
9	Penny	Mohr	29	Troy.Beatty@gmail.com

id	firstName	lastName	age	email
0	Cecil	Shanahan	39	Lempi.Hilll-Monahan@yahoo.com
1	Donny	Kuhn	26	Susie.OHara0@gmail.com
2	Sherry	Mraz	40	Augustus95@gmail.com
3	Stanley	Hickle	39	Constance_Towne58@hotmail.com
4	Eveline	Gibson	64	Salvador_Torp-Schowalter81@gmail.com
5	Kristi	Gusikowski	34	Janae79@gmail.com
6	Chelsea	Schumm	65	Elsie51@yahoo.com
7	Ward	Johns	21	Pauline.Tromp13@gmail.com
8	Mohamed	Marvin	19	Rudolph_Carroll28@gmail.com
9	Penny	Mohr	29	Troy.Beatty@gmail.com

id	firstName	lastName	age	email
0	Cecil	Shanahan	39	Lempi.Hilll-Monahan@yahoo.com
1	Donny	Kuhn	26	Susie.OHara0@gmail.com
2	Sherry	Mraz	40	Augustus95@gmail.com
3	Stanley	Hickle	39	Constance_Towne58@hotmail.com
4	Eveline	Gibson	64	Salvador_Torp-Schowalter81@gmail.com
5	Kristi	Gusikowski	34	Janae79@gmail.com
6	Chelsea	Schumm	65	Elsie51@yahoo.com
7	Ward	Johns	21	Pauline.Tromp13@gmail.com
8	Mohamed	Marvin	19	Rudolph_Carroll28@gmail.com
9	Penny	Mohr	29	Troy.Beatty@gmail.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	Willard	Hahn	50	Betty_Brown2@yahoo.com
1	Greta	Corwin	29	Colleen.DAmore9@hotmail.com
2	Sara	Kunze	63	Kent.Dietrich14@yahoo.com
3	Naomi	Ullrich	62	Florence_Waters39@yahoo.com
4	Jared	Buckridge	28	Marjorie.Langosh@yahoo.com
5	Carlos	Brakus	52	Oceane.Hoppe18@hotmail.com
6	Vincenza	Purdy	45	Frieda_Bradtke-Farrell5@hotmail.com
7	Harry	Osinski	49	Lorene27@gmail.com
8	Jodi	Bahringer	36	Jerrod61@yahoo.com
9	Efren	Nicolas	28	Annette_Harber45@hotmail.com

id	firstName	lastName	age	email
0	Willard	Hahn	50	Betty_Brown2@yahoo.com
1	Greta	Corwin	29	Colleen.DAmore9@hotmail.com
2	Sara	Kunze	63	Kent.Dietrich14@yahoo.com
3	Naomi	Ullrich	62	Florence_Waters39@yahoo.com
4	Jared	Buckridge	28	Marjorie.Langosh@yahoo.com
5	Carlos	Brakus	52	Oceane.Hoppe18@hotmail.com
6	Vincenza	Purdy	45	Frieda_Bradtke-Farrell5@hotmail.com
7	Harry	Osinski	49	Lorene27@gmail.com
8	Jodi	Bahringer	36	Jerrod61@yahoo.com
9	Efren	Nicolas	28	Annette_Harber45@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	Kenyon	Steuber	52	Mathias.Wyman@gmail.com
1	Daron	Brown	65	Ismael.Wintheiser53@gmail.com
2	Melissa	Beahan	19	Tyler.Conn@yahoo.com
3	Percy	Vandervort	27	Rachael.Halvorson@hotmail.com
4	Brielle	Towne	18	Reid26@hotmail.com
5	Marcos	Moen	29	Fredrick_Keebler20@hotmail.com
6	Hector	Schuppe	43	Vicki.Quigley11@hotmail.com
7	Maida	Swaniawski	44	Brett.Erdman@gmail.com
8	Hector	Renner	27	Ronald_Kuhn38@hotmail.com
9	Sheryl	Wisozk	41	Juanita9@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	Wilma	Hermann	46	Rudy_Hegmann@yahoo.com
1	Keaton	Monahan	40	Bernard81@gmail.com
2	Johathan	Weber	63	Keara.Towne@yahoo.com
3	Marvin	Swaniawski	57	Yasmin_Connelly@gmail.com
4	Edmond	Lang	31	Charlene.Hettinger54@hotmail.com
5	Dusty	Blanda	55	Bette_Torp@gmail.com
6	Priscilla	Pagac	56	Russ.Schiller@gmail.com
7	Clementine	Senger-McClure	23	Erika_Johnston@gmail.com
8	Dion	Stanton	49	Stacey_Hudson@hotmail.com
9	Ben	Schneider	25	Alma_Hudson@hotmail.com

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

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

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

id	firstName	lastName	age	email
0	Tabitha	Robel	55	Timmothy.Cassin89@hotmail.com
1	Kirk	Cronin	35	Macey.Cruickshank@hotmail.com
2	Geoffrey	Altenwerth	39	Alexander39@yahoo.com
3	Roosevelt	Johnson	47	Howard.Weber@hotmail.com
4	Ollie	Jenkins	29	Lewis.Carroll7@hotmail.com
5	Hortense	Beahan	55	Sven53@yahoo.com
6	Irvin	Romaguera	34	Gonzalo.Grady@yahoo.com
7	Dominick	O'Reilly	30	Natalie_Koss86@hotmail.com
8	Edna	Dicki	47	Jordan88@hotmail.com
9	Leone	Schaefer	34	Jeanne.McCullough@yahoo.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	Louise	O'Connell	24	Joan.Hyatt@hotmail.com
1	Lorraine	Mohr	30	Garth65@hotmail.com
2	Laura	MacGyver	59	Bradly24@yahoo.com
3	Fatima	Waters	19	Gretchen.Hessel@yahoo.com
4	Orpha	Lesch	34	Moriah_Rutherford89@hotmail.com
5	Stephanie	West	32	Josefina.Bernier74@hotmail.com
6	Bianka	Brekke	22	Nathaniel.Lubowitz@hotmail.com
7	Faustino	Brakus	40	Victoria67@yahoo.com
8	Carson	Durgan	40	Adriana.Waelchi@hotmail.com
9	Carlton	Schumm	29	Pablo.Dooley@hotmail.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	Janis	Goyette	35	Misty76@hotmail.com	1-418-959-4965 x3758	admin	inactive	6/21/2026	2/10/2026
1	Dwight	Douglas	52	Esther66@hotmail.com	(626) 751-2499 x36652	admin	inactive	8/9/2025	12/4/2025
2	Ellsworth	Smith	24	Daija15@hotmail.com	499.978.4436 x473	user	active	7/4/2026	10/6/2025
3	Nella	Schmidt	63	Ressie_Yost50@hotmail.com	791-992-2857 x07296	admin	inactive	7/17/2026	6/29/2026
4	Juana	Walker	36	Warren94@gmail.com	877-825-0470 x5805	admin	active	3/14/2026	1/11/2026
5	Nathan	Trantow	39	Tyrese69@gmail.com	(383) 281-6759 x891	admin	active	6/15/2026	6/10/2026
6	Jewell	Ratke	61	Halie_Kertzmann-Dare15@gmail.com	997-553-1019	admin	active	3/18/2026	11/8/2025
7	Mindy	Beer	46	Keira17@gmail.com	(323) 840-3409 x5370	admin	inactive	6/28/2026	3/6/2026
8	Anthony	Kessler	49	Maeve46@gmail.com	(369) 472-9854 x10427	user	active	4/27/2026	4/4/2026
9	Steve	Mayert	64	Earl_Mayer67@hotmail.com	(658) 888-4886 x10924	admin	inactive	6/26/2026	6/22/2026

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

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

Header Groups

id	user
	name		age	email
	firstName	lastName	age	email
0	Sheila	Rutherford	35	Elian_Senger@gmail.com
1	Frederick	Reilly	48	Columbus_Johnson@yahoo.com
2	Josh	Satterfield	55	Traci_Jerde53@gmail.com
3	Kate	Barrows	64	Rosetta54@hotmail.com
4	Dedric	Willms	58	Trycia67@gmail.com
5	Horace	Nienow	57	Muriel.Boyle89@gmail.com
6	Norwood	Gerlach	60	Jenny_Kunze88@yahoo.com
7	Colt	Lind	18	Francisca_Stroman37@yahoo.com
8	Ayla	Toy	59	Mattie72@hotmail.com
9	Wilfred	Erdman	51	Edmond.Hessel77@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	Ken	Beer	61	Faith.Swift91@yahoo.com
1	Penny	Metz	27	Verda_Wehner@hotmail.com
2	Guy	Swift	21	Cedric_Heathcote36@yahoo.com
3	Franco	Ankunding	54	Darrin_Roob78@yahoo.com
4	Wilbert	Hessel	21	Karson.Auer@yahoo.com
5	Chandler	McDermott	53	Jeannette.McCullough@gmail.com
6	Rodolfo	Jaskolski	49	Demetris_Goldner@gmail.com
7	Kenny	Littel	27	Scot82@gmail.com
8	Kathleen	Prosacco	35	Al_Shields@gmail.com
9	Lacey	VonRueden	45	Clint.Friesen@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	Craig	Lynch	65	Josefina_Parisian34@yahoo.com
1	Garnett	Dibbert	64	Enrico_Howell@gmail.com
2	Larue	Beer	37	Everett.Hegmann@yahoo.com
3	Enrico	Rempel	30	Janice.Stroman63@hotmail.com
4	Alice	Von	36	Aubrey_Ernser@gmail.com
5	Lillian	Johnston	36	Aiyana48@yahoo.com
6	Vernon	Nader	28	Ismael_Mayert@hotmail.com
7	Billy	Pfannerstill	64	Tammy30@hotmail.com
8	Clarence	Hodkiewicz	35	Melba.Kuphal@gmail.com
9	Agnes	Quigley	31	Triston46@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	Beth	Schuster	19	Reilly95@hotmail.com
1	Dan	Klocko	25	Eldred.Rodriguez-Brakus@hotmail.com
2	Tammy	Lueilwitz	37	Ollie.Spinka@yahoo.com
3	Jessica	Schroeder	24	Brooklyn65@gmail.com
4	Elmira	Gorczany	51	Hilbert_Bailey77@gmail.com
5	Jon	Conroy	29	Preston.Hirthe@hotmail.com
6	Joshua	Bruen	38	Dwight59@yahoo.com
7	Jalon	Collins	56	Viviane32@hotmail.com
8	Linda	Bosco	57	Cecelia_OKeefe@hotmail.com
9	Laisha	Harvey-Ankunding	55	Harley.Koelpin42@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	Greg	Goodwin	58	Vickie_Corkery39@yahoo.com
1	Cletus	Thiel	48	Lilian_Sawayn8@hotmail.com
2	Arthur	Satterfield	42	Sherry84@hotmail.com
3	Korbin	Hyatt	41	Kathryne.Tromp@yahoo.com
4	Elbert	Feil	21	Gayle_Lockman76@gmail.com
5	Kenneth	Botsford	46	Justyn.McDermott15@hotmail.com
6	Clay	Kuhn	45	Drew.Morissette68@gmail.com
7	Gracie	Nienow	52	Silvia.Wiza@yahoo.com
8	Pam	Emmerich	31	Karla_Collins2@hotmail.com
9	Cleta	Rath	49	Beth_Pfannerstill@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	Titus	Lindgren	23	Gary.Reilly@gmail.com
1	Clementina	Heidenreich	55	Santina_Ruecker-Schinner@gmail.com
2	Timothy	Rosenbaum	49	Retta_Hudson40@gmail.com
3	Leland	Crooks	35	Bette_Connelly64@yahoo.com
4	Bernice	Rice	40	Jewell.Wintheiser86@gmail.com
5	Domenic	Kuphal	35	Mike.Lockman@hotmail.com
6	Joshuah	Anderson	43	Essie.Vandervort29@hotmail.com
7	Teagan	Kling	54	Janie88@gmail.com
8	Kathy	West	38	Richmond70@gmail.com
9	Waylon	Streich	55	Sandrine.Kihn@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
6	Weston	Nolan	64	Thomas.Sporer51@gmail.com
7	Deion	Hirthe	63	Maudie25@gmail.com
5	Paulette	Kunze	62	Francis_Flatley@gmail.com
4	Audie	Lesch	61	Zechariah_Mitchell86@hotmail.com
2	Jaleel	Tromp	45	Edythe59@yahoo.com
3	Hank	Terry	43	Randy_Grimes@yahoo.com
8	Stephanie	Hilll	39	Presley6@gmail.com
0	Dangelo	Schroeder	37	Marilou.Gutkowski@yahoo.com
9	Hillard	Cronin	30	Ben21@yahoo.com
1	Christopher	Lebsack	28	Kitty_Jakubowski51@yahoo.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	Alice	Kuphal	33	Josh.Hyatt@gmail.com
1	Kelli	Champlin	63	Davin_Miller@yahoo.com
2	Noelia	Hessel	39	Elda.Wolff@yahoo.com
3	Audreanne	Mitchell	31	Robert_Harris@gmail.com
4	Candace	Hickle	49	Maria30@hotmail.com
5	Janet	Schiller	59	Kellie_VonRueden97@yahoo.com
6	Stephany	Dibbert	37	Mable.Leffler@gmail.com
7	Sofia	Howell	41	Monica9@yahoo.com
8	Jared	Muller	43	Axel.Witting69@gmail.com
9	Rosie	Emard	35	Rachelle_Weissnat18@yahoo.com

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

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

Disable Multi Sorting

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

id	firstName	lastName	age	email
0	Delphia	Murphy	53	Eleanor89@gmail.com
1	Andy	Oberbrunner-Schamberger	42	Clark_Beatty@yahoo.com
2	Marjorie	Keebler	48	Adah_Fay65@yahoo.com
3	Tricia	Kub	53	Cordie.Kassulke17@gmail.com
4	Kevin	Feest	40	Tamia.Kuhlman@gmail.com
5	Vita	Howe-Erdman	50	Enos.Gerhold67@hotmail.com
6	Gabriella	Wilkinson	48	Casper_Boyle@gmail.com
7	Ashlee	O'Hara	53	Gertrude_Goyette57@yahoo.com
8	Kavon	Schultz	36	Donald.Stokes@yahoo.com
9	Luna	Maggio	33	Prince17@gmail.com

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

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

Set Maximum Sortable Columns

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

id	firstName	lastName	age	email
0	Cletus	Schoen	26	Rickie_Kiehn8@yahoo.com
1	Lionel	Shields	47	Kasey.Considine70@hotmail.com
2	Marcos	Rau	39	Lera.Schuppe-Boyer22@yahoo.com
3	Keyon	Ruecker	30	Kendall72@hotmail.com
4	Alex	Becker	62	Zack.Ratke@gmail.com
5	Max	Roob	28	Stephanie.Williamson@hotmail.com
6	Dylan	Borer	50	Mercedes_Swift0@hotmail.com
7	Haskell	Shanahan	57	Olga.Parker@hotmail.com
8	Fatima	Anderson	43	Donny_Keeling@yahoo.com
9	Seth	Mayert	58	Geovanni.Leffler26@yahoo.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	Rebekah	West	31	Vickie.Beer25@hotmail.com
1	Terrence	Pollich	56	Charlie_Greenholt45@yahoo.com
2	Delores	Lind	31	Virgie_Koelpin6@hotmail.com
3	Barry	Shanahan	35	Shirley72@hotmail.com
4	Olive	VonRueden	40	Laron_Crona@yahoo.com
5	Marjorie	Wunsch	50	Violette69@gmail.com
6	Kaitlyn	Runolfsdottir	62	Kathryne_Cassin70@hotmail.com
7	Federico	Crist	40	Isabella96@hotmail.com
8	Irene	Beahan	29	Garry.Hauck@hotmail.com
9	Terrence	Emard	58	Jorge75@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	Rachel	Gorczany	36	Joel_Ernser@yahoo.com
1	Elvira	Rippin	59	Salvador_Hickle19@hotmail.com
2	Jayden	Gerlach	49	Alan89@yahoo.com
3	Michaela	Purdy	27	Branson.Willms45@hotmail.com
4	Sue	Fay	58	Blaise.Parisian60@hotmail.com
5	Marcelle	Ryan	36	Hector18@gmail.com
6	Laury	Gottlieb	57	Cathy_Keebler-Wiegand@gmail.com
7	Susan	Mayert	31	Lyda_Kulas@gmail.com
8	Norman	Nolan	60	Cora97@gmail.com
9	Cloyd	Ebert-Jerde	31	Alison_Borer@hotmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Margie	Lockman	39	Zachariah_Witting20@yahoo.com
1	Karianne	Braun	51	Albin30@gmail.com
2	Kathleen	Jast	50	Samantha.Gorczany22@yahoo.com
3	Destiney	Kris-Borer	48	Camille_Stracke@gmail.com
4	Brittany	Keeling	24	Mose60@hotmail.com
5	Eleanora	Sipes	46	Nannie41@yahoo.com
6	Annamae	Hills	20	Willis.Cassin12@yahoo.com
7	Arlo	Schmitt-Hilll	20	Hilma.Satterfield4@gmail.com
8	Stella	Nienow	42	Amie.Feest82@gmail.com
9	Ruby	Hettinger	53	Araceli.Mann@gmail.com

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

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

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

Enable Pagination

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

id	firstName	lastName	age	email
0	Lenny	Bogisich	47	Rebeca.Hirthe@hotmail.com
1	Kelton	Osinski	34	Ollie_Friesen@gmail.com
2	Charlotte	Lesch	52	Caterina_Fisher76@hotmail.com
3	Desiree	Bartell	37	Judith70@yahoo.com
4	Kellie	Hansen	64	Dayana56@yahoo.com
5	Elva	Moen	38	Cristina.Corwin@yahoo.com
6	Randolph	Dibbert	60	Jerod_Wilderman47@gmail.com
7	Warren	Collier	29	Tommy.Gorczany@gmail.com
8	Carolanne	Sauer	54	Winifred.Herman@hotmail.com
9	Vincent	Kirlin	37	Luigi_Jacobs27@hotmail.com
10	Magali	Wolf	51	Lilly.Thompson20@yahoo.com
11	Melba	Ratke-Abshire	63	Carl1@gmail.com
12	Lavada	Cormier	54	Randy68@gmail.com
13	Janis	Bailey	24	Marilyne.Lueilwitz14@gmail.com
14	Emily	Howe	37	Devante55@hotmail.com
15	Samuel	Hagenes	30	Shayna95@gmail.com
16	Tracey	Zemlak	58	Albina.Wunsch@hotmail.com
17	Halie	Friesen	55	Fausto.Kohler@yahoo.com
18	William	Mayert	55	Mason79@hotmail.com
19	Enrico	Feeney	54	Brain51@hotmail.com

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

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

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

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

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

Set Default Page Index and Page Size

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

id	firstName	lastName	age	email
10	Gustavo	Jerde	59	Camille82@hotmail.com
11	Chase	Hirthe	30	Brown_Homenick@hotmail.com
12	Rosemary	Schmitt	38	Carlie.Will29@yahoo.com
13	Eusebio	Gutmann	24	Kelley_McKenzie51@yahoo.com
14	Essie	Rippin-Lebsack	21	Savion83@yahoo.com
15	Libbie	Hermiston	59	Erica.Wisozk@yahoo.com
16	Maribel	Murazik	26	Rowena_Goodwin@hotmail.com
17	Mercedes	Abernathy	56	Maeve.Ward@hotmail.com
18	Delphine	Brakus	33	Jim99@hotmail.com
19	Leah	Kunde	58	Herbert.Kirlin@yahoo.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	Erma	Crona-Maggio	62	Robin_Murazik@yahoo.com
1	Silvia	Heidenreich	40	Rosanna_Collier@yahoo.com
2	Vickie	Hintz	30	Leatha46@hotmail.com
3	Jovani	Casper	59	Emie77@yahoo.com
4	Dorthy	Rogahn	61	Agnes_Willms8@yahoo.com
5	Naomi	Jones	30	Theresia.Fisher46@gmail.com
6	Pearl	Miller	39	Eileen11@hotmail.com
7	Ralph	Padberg	62	Shawna15@yahoo.com
8	May	Durgan	42	Timmy.Fadel93@hotmail.com
9	Traci	Cremin	44	Ari_Bednar@hotmail.com
10	Lindsay	Rowe	62	Curtis11@gmail.com
11	Matthew	Bartoletti-Ryan	42	Frederick11@gmail.com
12	Lynda	Gorczany	50	Tyson.Stehr17@gmail.com
13	Lupe	Gislason	65	Garrett_VonRueden@yahoo.com
14	Patti	Shanahan	32	Brooks47@gmail.com
15	Dorris	Carroll	30	Alvina69@yahoo.com
16	Cora	Morar	34	Nikko25@gmail.com
17	Jan	Champlin	47	Agustina_Kozey5@hotmail.com
18	Mike	Glover	23	Matthew.Welch98@gmail.com
19	Efrain	Beahan	53	Jay42@gmail.com

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

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

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

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

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

Control Pagination

id	firstName	lastName	age	email
0	Eduardo	Balistreri	63	Kaia.Hahn89@yahoo.com
1	Dewey	West	25	Alena_Lemke51@yahoo.com
2	Jennifer	Mann	61	Israel_Fritsch@gmail.com
3	Alfredo	Klein	33	George20@gmail.com
4	Oliver	Dickinson	65	Jaylin_Raynor@gmail.com
5	Terrance	Tillman	61	June.Boyle@gmail.com
6	Annetta	Nikolaus	44	Annamae8@hotmail.com
7	Belinda	Runolfsdottir	37	Drake_Hammes@gmail.com
8	Malcolm	Spinka	24	Shanny.OConner@gmail.com
9	Shari	Hermiston	42	Sylvan_Turner31@yahoo.com
10	Santiago	Oberbrunner	27	Grayson_Casper@gmail.com
11	Pierce	Ryan-Schowalter	45	Walker62@gmail.com
12	Tracey	Jenkins	24	Stephania31@hotmail.com
13	Jerome	Breitenberg	41	Mitchell45@hotmail.com
14	Ozella	Hoeger	36	Anibal_Reynolds5@yahoo.com
15	Ellen	Mills-Purdy	53	Chelsea_Wiegand@gmail.com
16	Jadyn	Bashirian	41	Jeanie_Jacobi@hotmail.com
17	Randal	Strosin	53	Nichole11@hotmail.com
18	Angelica	Baumbach	25	Erica.Mayer44@hotmail.com
19	Colin	Bashirian	47	Dixie_Gleichner@hotmail.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	Jeannie	Kuhn	29	Pattie_Erdman9@gmail.com
1	Erica	Bogan	58	Justen.Abernathy91@hotmail.com
2	Norma	Ritchie	43	Sherman.Gutkowski58@yahoo.com
3	Eugenia	Hoeger	52	Nicolette25@yahoo.com
4	Hank	Ryan	54	Ashley.Schimmel@hotmail.com
5	Brad	Deckow	53	Lavina36@gmail.com
6	Tyler	Wuckert	59	Sonya_Kris@gmail.com
7	Ernest	Wiza	48	Mark.Murazik39@hotmail.com
8	Bessie	Hodkiewicz	32	Jonathon_Smitham95@yahoo.com
9	Lillian	Schroeder	55	Marlee12@yahoo.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	Johnny	Lynch	30	Lorene.Bechtelar@yahoo.com
1	Meaghan	Gulgowski-Rice	27	Tamara_Doyle18@yahoo.com
2	Aleen	Rodriguez	20	Jailyn.Jakubowski-Yundt@yahoo.com
3	Lorenzo	Boyer	48	Casey22@gmail.com
4	Luisa	Kovacek	21	Dolores.Lind15@yahoo.com
5	Tyson	Turner	53	Jon16@hotmail.com
6	Pam	Rath	45	Gloria.Quigley@yahoo.com
7	Ricky	Dibbert	54	Marsha.Auer@gmail.com
8	Lila	Schuppe-Kunze	32	Rubie.Schaefer42@yahoo.com
9	Shelia	Huels	45	Claudia.Kiehn57@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	Micheal	Pagac	24	Gustavo_Mertz@yahoo.com
1	Julie	Bins	35	Ellen58@yahoo.com
2	Marilou	Krajcik	61	Agnes_Corwin6@hotmail.com
3	Karli	Kuphal	53	Larissa.Prohaska43@yahoo.com
4	Alexie	Kuhic	58	Angela.Lindgren45@hotmail.com
5	Bo	Beahan	50	Emmett71@gmail.com
6	Jaylan	Hyatt	27	Brionna.Bergnaum98@yahoo.com
7	Kurt	Harvey	45	Scott.Luettgen@yahoo.com
8	Carli	Harvey	33	Emelia.Nolan@yahoo.com
9	Amanda	Kiehn	20	Alexandre.Rempel72@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	Eloise	Kohler	39	Yvette_Mertz@yahoo.com
1	Cole	Morar	43	Sara.Connelly-Durgan97@gmail.com
2	Violette	Conroy	25	Adrienne_McDermott@gmail.com
3	Karen	Beahan	50	Gordon_Cremin@yahoo.com
4	Sheryl	Kiehn	30	Faye_Goldner18@yahoo.com
5	Theresa	Bogan	55	Una5@hotmail.com
6	Melanie	Parisian	27	Onie23@gmail.com
7	Stephan	Quigley	42	Rasheed.Cole42@yahoo.com
8	Jayson	Casper	20	Meredith_Thiel18@gmail.com
9	Cody	Heathcote	26	Susanna91@hotmail.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	Ludwig	Cormier	49	Hilbert_Haag@yahoo.com
1	Keon	Larkin	36	Christine_Lynch15@yahoo.com
2	Kim	Koepp-Fadel	44	Daphne.Braun@hotmail.com
3	Sunny	Littel	23	Andrea.Boyer@gmail.com
4	Mable	Pagac	62	Vera.Turcotte74@hotmail.com
5	Alejandro	Schultz	42	Pierre43@yahoo.com
6	Pietro	DuBuque	31	Thomas_Gerhold@hotmail.com
7	Gary	Satterfield-Larkin	51	Christy_Gleichner87@hotmail.com
8	Wilma	Berge	61	Dylan.Wisoky93@hotmail.com
9	Elsa	Mohr	36	Braden.DAmore87@hotmail.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	Kaelyn	McClure	62	Andre.Erdman@gmail.com
1	Lynette	Rogahn	23	Oren9@yahoo.com
2	Trystan	Hahn	39	Allene_OConner0@gmail.com
3	Carolyn	Pollich	26	Bob.Kunze@yahoo.com
4	Carlos	Connelly	37	Chester_Keebler@gmail.com
5	Maximus	Sipes	37	Byron90@hotmail.com
6	Faye	Waelchi	36	Alex56@yahoo.com
7	Spencer	Reichert	34	Chyna_Mosciski@hotmail.com
8	Tasha	Conn	28	Erik51@hotmail.com
9	Stan	Wuckert	65	Ervin_Orn73@yahoo.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	Dwight	Brekke	47	Berniece33@gmail.com
1	Tricia	McLaughlin	58	Leon75@yahoo.com
2	Cordia	Fay	37	Keira.Orn82@gmail.com
3	Ida	Davis	36	Hank_DAmore@gmail.com
4	Meredith	Durgan	23	Michel_Abbott2@gmail.com
5	Tiana	Feil-Langworth	64	Justyn_Wyman@hotmail.com
6	Lynne	Bailey-Lemke	60	Corbin.Frami@hotmail.com
7	Duane	Crona	57	Laverne_Heaney78@gmail.com
8	Rene	Padberg	49	Malachi_Goodwin46@hotmail.com
9	Destiny	Quigley	49	Dwayne43@hotmail.com

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

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

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

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

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

Set Default Filter

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

id	firstName	lastName	age	email
1	Claude	Marks	42	Clarence_Koch78@gmail.com
2	Henriette	Boyle	29	Melba30@gmail.com
7	Kurt	Ullrich	27	Eloise44@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	Ignatius	Dickinson	58	Cooper28@gmail.com
1	Virginie	Jacobi	51	Diego_Koss@yahoo.com
2	Aida	Hintz	36	Ruthie_Kuphal@gmail.com
3	Ronald	Stark-McGlynn	38	Forrest.Fadel-Barton@gmail.com
4	Carrie	Kohler	45	Toby.Kuphal24@yahoo.com
5	Sophie	Jakubowski	65	Claudia_Streich@hotmail.com
6	Lawrence	Turner	52	Santiago.Willms61@yahoo.com
7	Sherman	Rosenbaum	46	Ivan.Hyatt@gmail.com
8	Kay	Stoltenberg	49	Lynette65@gmail.com
9	Virginie	Goldner	52	Desmond.Durgan@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	Garfield	Treutel	36	Verner.Walker82@hotmail.com
1	Darrell	Daugherty	25	Khalil.Beer35@gmail.com
2	Whitney	Crist	29	Constance.Paucek@hotmail.com
3	Gilberto	Hansen	31	Austen45@gmail.com
4	Jimmy	Champlin	51	Carole.Zulauf9@gmail.com
5	Rudolph	Conn	50	Roger.Borer@hotmail.com
6	Corrine	Pollich	55	Orlo18@hotmail.com
7	Shane	Reinger	59	Ida25@yahoo.com
8	Peter	Flatley	61	Wyatt13@gmail.com
9	Malcolm	Marvin	31	Diana.Johns0@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	Ahmed	Prosacco	41	Jerome58@gmail.com
1	Summer	Dooley	47	Eliza_Wuckert44@yahoo.com
2	Griffin	Leuschke	18	Yvonne.Vandervort@yahoo.com
3	Darlene	Halvorson	24	Jakob_Ruecker14@hotmail.com
4	Saul	Block	54	Robert_Kutch62@gmail.com
5	Carmel	Hodkiewicz	26	Octavia.Satterfield@yahoo.com
6	Ramiro	Williamson	18	Otilia53@yahoo.com
7	Jeffery	Romaguera	62	Terrance.Watsica87@yahoo.com
8	Kariane	Kerluke	34	Henrietta.Corwin70@gmail.com
9	Janie	Jerde	52	Cheryl.Hirthe@hotmail.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

Element	Roles and Attributes	Usage
`table.ui-native-table__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.
`thead.ui-native-table__thead`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`tr.ui-native-table__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.
`th.ui-native-table__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.
`tbody.ui-native-table__tbody`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`td.ui-native-table__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.
`tfoot.ui-native-table__tfoot`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`label.ui-checkbox__root > input`	`aria-label`	Set to `"Select all rows"` for the header, and `"Select row"` for body rows.
`th.ui-native-table__th > button`	`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.