Table

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

id	firstName	lastName	age	email
0	Nathan	Kling	30	Inez_Maggio83@gmail.com
1	Barry	Goldner	23	Mariah.Witting46@gmail.com
2	Reyna	Medhurst	25	Lavada_Moen@hotmail.com
3	Darrell	Jacobs	33	Ethelyn.Pfeffer@gmail.com
4	Angie	Dicki	26	Patrick_Glover58@yahoo.com
5	Alonzo	Becker	23	Jordon49@gmail.com
6	Piper	Klocko	62	Jean.Carter27@hotmail.com
7	Shaun	Reinger	53	Emmett36@yahoo.com
8	Eileen	Yost	30	Howard_Schaden@yahoo.com
9	Brisa	Stroman	53	Micah_Miller12@hotmail.com

interface Data {
  id: string
  age: number
  email: string
  firstName: string
  lastName: string
}

const columnHelper = createColumnHelper<Data>()

const columns = useMemo(
  () => [
    columnHelper.accessor("id", { cellProps: { numeric: true } }),
    columnHelper.accessor("firstName", { lineClamp: 1 }),
    columnHelper.accessor("lastName", { lineClamp: 1 }),
    columnHelper.accessor("age", { cellProps: { numeric: true } }),
    columnHelper.accessor("email", { lineClamp: 1 }),
  ],
  [],
)

const data = useMemo<Data[]>(
  () =>
    Array.from({ length: 10 }, (_, index) => ({
      id: index.toString(),
      age: faker.number.int({ max: 65, min: 18 }),
      email: faker.internet.email(),
      firstName: faker.person.firstName(),
      lastName: faker.person.lastName(),
    })),
  [],
)

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

Usage

import { Table } from "@yamada-ui/react"

import { Table } from "@/components/ui"

import { Table } from "@workspaces/ui"

<Table />

Table internally uses tanstack-table and NativeTable.

Change Variant

id	firstName	lastName	age	email
0	Lena	Reinger	26	Terrell39@gmail.com
1	Jada	Littel	20	Stanley16@yahoo.com
2	Amparo	Roob	28	Donald57@gmail.com
3	Wanda	Hand	55	Cassandra_Nicolas@gmail.com
4	Sharon	Swaniawski-Kuhlman	49	Roger50@hotmail.com
5	Roman	Altenwerth	44	Rosemary17@gmail.com
6	Osbaldo	Goodwin	35	Cathy_Morar11@gmail.com
7	Andre	Breitenberg	46	Henderson53@gmail.com
8	Ben	Kiehn	35	Bethany22@gmail.com
9	Leanna	Kub	46	Zoila_Cummings@gmail.com

id	firstName	lastName	age	email
0	Lena	Reinger	26	Terrell39@gmail.com
1	Jada	Littel	20	Stanley16@yahoo.com
2	Amparo	Roob	28	Donald57@gmail.com
3	Wanda	Hand	55	Cassandra_Nicolas@gmail.com
4	Sharon	Swaniawski-Kuhlman	49	Roger50@hotmail.com
5	Roman	Altenwerth	44	Rosemary17@gmail.com
6	Osbaldo	Goodwin	35	Cathy_Morar11@gmail.com
7	Andre	Breitenberg	46	Henderson53@gmail.com
8	Ben	Kiehn	35	Bethany22@gmail.com
9	Leanna	Kub	46	Zoila_Cummings@gmail.com

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

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

Change Size

id	firstName	lastName	age	email
0	Alana	Cronin	19	Savanna92@yahoo.com
1	Aaron	Wolff-Kuvalis	29	Howard_Bauch@gmail.com
2	Ashton	Borer	33	Cecil_Klein@gmail.com
3	Albina	Schultz	34	Jeromy.Emmerich@hotmail.com
4	Frieda	Collier	32	Terence_Pagac19@gmail.com
5	Rosella	Funk	26	Justin.Jenkins@hotmail.com
6	Harry	Bechtelar	29	Elwin.Little87@gmail.com
7	Pamela	Heller	54	Dave45@hotmail.com
8	Alayna	Yost	59	Camille34@gmail.com
9	Jaylen	Olson	46	Greyson.Balistreri@yahoo.com

id	firstName	lastName	age	email
0	Alana	Cronin	19	Savanna92@yahoo.com
1	Aaron	Wolff-Kuvalis	29	Howard_Bauch@gmail.com
2	Ashton	Borer	33	Cecil_Klein@gmail.com
3	Albina	Schultz	34	Jeromy.Emmerich@hotmail.com
4	Frieda	Collier	32	Terence_Pagac19@gmail.com
5	Rosella	Funk	26	Justin.Jenkins@hotmail.com
6	Harry	Bechtelar	29	Elwin.Little87@gmail.com
7	Pamela	Heller	54	Dave45@hotmail.com
8	Alayna	Yost	59	Camille34@gmail.com
9	Jaylen	Olson	46	Greyson.Balistreri@yahoo.com

id	firstName	lastName	age	email
0	Alana	Cronin	19	Savanna92@yahoo.com
1	Aaron	Wolff-Kuvalis	29	Howard_Bauch@gmail.com
2	Ashton	Borer	33	Cecil_Klein@gmail.com
3	Albina	Schultz	34	Jeromy.Emmerich@hotmail.com
4	Frieda	Collier	32	Terence_Pagac19@gmail.com
5	Rosella	Funk	26	Justin.Jenkins@hotmail.com
6	Harry	Bechtelar	29	Elwin.Little87@gmail.com
7	Pamela	Heller	54	Dave45@hotmail.com
8	Alayna	Yost	59	Camille34@gmail.com
9	Jaylen	Olson	46	Greyson.Balistreri@yahoo.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	Malcolm	Larson	60	Mireya.Schuppe@hotmail.com
1	Elenora	Blanda	19	Patsy.Langosh@hotmail.com
2	Emmett	Friesen	56	Alvis_Morissette@gmail.com
3	Niko	Koepp	45	Percival_Mayert28@yahoo.com
4	Tomasa	Moen	45	Lane60@yahoo.com
5	Janiya	Roob	22	Hettie_Klocko56@hotmail.com
6	Wendy	Keeling	34	Fritz_Abshire@hotmail.com
7	Elaine	Shanahan	18	Danial.Lockman48@hotmail.com
8	Leanna	Reichert	61	Steven0@hotmail.com
9	Amber	Toy	30	Keshawn96@yahoo.com

id	firstName	lastName	age	email
0	Malcolm	Larson	60	Mireya.Schuppe@hotmail.com
1	Elenora	Blanda	19	Patsy.Langosh@hotmail.com
2	Emmett	Friesen	56	Alvis_Morissette@gmail.com
3	Niko	Koepp	45	Percival_Mayert28@yahoo.com
4	Tomasa	Moen	45	Lane60@yahoo.com
5	Janiya	Roob	22	Hettie_Klocko56@hotmail.com
6	Wendy	Keeling	34	Fritz_Abshire@hotmail.com
7	Elaine	Shanahan	18	Danial.Lockman48@hotmail.com
8	Leanna	Reichert	61	Steven0@hotmail.com
9	Amber	Toy	30	Keshawn96@yahoo.com

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

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

Add Outer Border

To add an outer border, set withBorder to true.

id	firstName	lastName	age	email
0	Katie	Hilpert	50	Louis26@yahoo.com
1	Susie	Krajcik	59	Dennis_Cremin@gmail.com
2	Emanuel	Wyman	21	Deborah.Wilderman@gmail.com
3	Beth	Wilderman	43	Elian74@gmail.com
4	Dortha	Schuppe	29	Gabriel12@hotmail.com
5	Danny	Kautzer	31	Myra.OConner96@gmail.com
6	Zander	Rosenbaum	45	Gerardo_Haag48@gmail.com
7	Jaren	Herman	42	Patsy98@yahoo.com
8	Joan	Gottlieb	65	James_Ernser@yahoo.com
9	Tate	Price	35	May.Mueller75@gmail.com

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

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

Add Column Separators

To add column separators, set withColumnBorders to true.

id	firstName	lastName	age	email
0	Danny	Hickle	26	Madge.Streich@hotmail.com
1	Anjali	Steuber	47	Jovani.Reynolds@hotmail.com
2	Lindsey	Kohler	39	Jazlyn4@yahoo.com
3	Vera	Bashirian	65	Randy.Glover86@hotmail.com
4	Jaime	Rohan	34	Al.MacGyver@hotmail.com
5	Aurelie	Smith	34	Greta_Jacobson75@hotmail.com
6	Debra	Monahan	19	Rocky_White@yahoo.com
7	Sandy	Emard	44	Tammy.Hauck19@yahoo.com
8	Anna	Larson	22	Lowell83@gmail.com
9	Abbey	Quigley	45	Lillian_Torphy@gmail.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	Freddie	Hilpert	37	Wendell.Koss@gmail.com
1	Nicole	Will	24	Josefa_Wiegand@yahoo.com
2	Stuart	Schuppe	50	Carmel_Koelpin-Upton@yahoo.com
3	Priscilla	Wintheiser	53	Leola.Feeney4@gmail.com
4	Billie	Graham	40	Christian97@gmail.com
5	Sonja	Harvey	50	Doris_Pfannerstill49@hotmail.com
6	Elody	West	46	Barbara_Marquardt43@yahoo.com
7	Josephine	Murphy	55	Lourdes.Flatley@gmail.com
8	Sonny	Abbott	31	Melissa.Dooley1@gmail.com
9	Keegan	Weimann	43	Kaitlyn29@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	Sammy	Mertz	65	Evan23@hotmail.com
1	Floyd	Legros	20	Grace.Harvey3@gmail.com
2	John	Gislason	48	Jerome_OKon@hotmail.com
3	Jeremy	Ritchie	54	Garnett_Jaskolski@gmail.com
4	Bennie	Roob	32	Victoria_Doyle25@yahoo.com
5	Breanna	Brakus	28	Ettie.Friesen69@gmail.com
6	Tamia	Metz	55	Marlene2@yahoo.com
7	Ernesto	Moen-Erdman	57	Forrest.Ritchie70@yahoo.com
8	Flo	Blick	64	Travon.Schultz52@gmail.com
9	Mona	Sipes	53	Mildred.Schinner@yahoo.com

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

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

Scroll Area

To enable scroll area, set withScrollArea to true.

id	firstName	lastName	age	email	phone	role	status	createdAt	updatedAt
0	Golden	Kunze	39	Guillermo.Little@gmail.com	(315) 724-5547	admin	inactive	8/23/2025	2/2/2026
1	Wilton	Schmeler	20	Deron_Botsford@gmail.com	(209) 728-4722 x179	user	inactive	6/24/2025	1/8/2026
2	Jabari	Aufderhar	48	Durward96@yahoo.com	1-218-947-1838 x14973	user	active	3/11/2026	4/14/2026
3	Felton	Boehm	31	Augustus.Hamill36@hotmail.com	(873) 226-3862	user	inactive	6/25/2025	8/19/2025
4	Kayli	Collins	38	Nora.Schultz97@yahoo.com	1-259-548-8383 x997	admin	inactive	4/18/2026	6/13/2025
5	Forrest	Luettgen	33	Camilla68@hotmail.com	(283) 714-2836 x02764	user	active	3/29/2026	8/19/2025
6	Harold	Lockman	54	Katherine.Johns@hotmail.com	1-727-785-1326 x45541	user	inactive	7/1/2025	5/8/2026
7	Rachel	Gleason	30	Rey.Beer38@gmail.com	955-765-7217 x5379	admin	active	9/5/2025	11/1/2025
8	Aimee	Romaguera	48	Katrina_Funk28@gmail.com	240.992.1386	user	active	10/31/2025	8/10/2025
9	Tara	Mitchell	19	Regina.Erdman48@hotmail.com	1-557-640-7220 x03301	user	inactive	11/19/2025	12/29/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	Ross	Parker	44	Abel70@gmail.com
1	Emmet	Olson	38	Dakota24@hotmail.com
2	Luigi	Yundt	57	Dustin.Runolfsdottir9@hotmail.com
3	Dewey	Franey-Marquardt	51	Karlee48@hotmail.com
4	Kaylee	Leuschke	60	Bridie.Reinger@yahoo.com
5	Lora	Dietrich	32	Gabrielle_Cormier96@hotmail.com
6	Rocky	Thompson	64	Evan_Jerde-Stoltenberg51@yahoo.com
7	Reba	Littel	22	Dameon_Osinski@yahoo.com
8	Bernadine	Hettinger	30	Jeanette.Ferry76@yahoo.com
9	Marlene	Parker	45	Rebekah.Effertz51@yahoo.com

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

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

id	user
	name		age	email
	firstName	lastName	age	email
0	Oren	Monahan	43	Yvette69@hotmail.com
1	Vidal	Bartoletti	35	Halie_Sipes82@yahoo.com
2	Barbara	Beatty	24	Dominick12@yahoo.com
3	Sonya	Hessel	38	Al48@gmail.com
4	Ira	Keeling	59	Donald_Moen@hotmail.com
5	Ray	Luettgen	34	Homer.Lockman22@gmail.com
6	Taryn	Kautzer	33	Mara_Beer@gmail.com
7	Colt	Grady	39	Guy.Windler@gmail.com
8	Charlie	Huels	34	Dawn73@yahoo.com
9	Louis	Sporer	20	Michelle.Becker@hotmail.com
id	firstName	lastName	age	email
	name		age	email
	user

const columns = useMemo(
  () => [
    columnHelper.accessor("id", {
      footer: (info) => info.column.id,
      cellProps: { numeric: true },
    }),
    columnHelper.group({
      id: "user",
      columns: [
        columnHelper.group({
          id: "name",
          columns: [
            columnHelper.accessor("firstName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
            columnHelper.accessor("lastName", {
              footer: (info) => info.column.id,
              lineClamp: 1,
            }),
          ],
          footer: (info) => info.column.id,
          header: (info) => info.column.id,
        }),
        columnHelper.accessor("age", {
          footer: (info) => info.column.id,
          cellProps: { numeric: true },
        }),
        columnHelper.accessor("email", {
          footer: (info) => info.column.id,
          lineClamp: 1,
        }),
      ],
      footer: (info) => info.column.id,
      header: (info) => info.column.id,
    }),
  ],
  [],
)
const data = useMemo<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	Cristina	Daniel	43	Allan.Barton@gmail.com
1	Hertha	Rolfson	18	Timmothy_Corwin@gmail.com
2	Anna	Zulauf	59	Orrin.Ondricka@hotmail.com
3	Marcos	Brown	24	Larue.Schoen@yahoo.com
4	Nelle	Sporer	29	Shaylee_Rice46@hotmail.com
5	Max	O'Conner-Turcotte	33	Grant.Powlowski81@hotmail.com
6	Deshaun	Durgan	63	Spencer_Kozey@yahoo.com
7	Vita	Dooley	64	Maximillia60@gmail.com
8	Spencer	Crooks	56	Osborne30@yahoo.com
9	Alejandro	Orn	54	Emiliano.Franecki@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	Rebecca	Blick	24	Verdie.Grimes@gmail.com
1	Mae	Fritsch	28	Delilah70@yahoo.com
2	Diane	Nitzsche	22	Roberto.Kuhic@hotmail.com
3	Cortez	Konopelski	60	Emie_Willms66@gmail.com
4	Anabel	Johnson	22	Flora.Bednar@hotmail.com
5	Camren	Lang	60	Chyna.Greenfelder57@gmail.com
6	Coty	Quigley	35	Shaun_Powlowski@hotmail.com
7	Estefania	Green	22	Shaylee_Kozey@hotmail.com
8	Turner	Metz	40	Trevion_Lowe-Christiansen@gmail.com
9	Lewis	Funk	26	Derek1@gmail.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	Casper	Lakin	39	Yolanda_Thompson@gmail.com
1	Morgan	Schroeder	61	Jesse.Lemke@gmail.com
2	Jo	Barrows	20	Tatum59@gmail.com
3	Kyle	Zieme	34	Retta.Ankunding23@gmail.com
4	Carter	Leannon	26	Faustino_Bradtke74@gmail.com
5	Brad	Rogahn	25	Betsy_Hirthe2@yahoo.com
6	Amber	Casper	30	Sonja99@yahoo.com
7	Kaitlin	Fadel	44	Clemmie5@yahoo.com
8	Wilbur	Grady	39	Penelope_Gottlieb@yahoo.com
9	Joe	Ullrich	60	Loraine50@gmail.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	Stone	Marvin	18	Lorraine22@hotmail.com
1	Camila	Miller	29	Eladio6@gmail.com
2	Jovany	Larson	25	Arjun.Waters34@gmail.com
3	Gunnar	Bosco	19	Dario80@gmail.com
4	Clayton	Feeney	32	Cristian48@gmail.com
5	Jenna	Hegmann	55	Janet_Miller74@gmail.com
6	Genoveva	Marks	20	Kimberly69@gmail.com
7	Icie	Dickens-Parisian	48	Lynette25@hotmail.com
8	Victoria	Mraz	64	Dwight_Torp94@gmail.com
9	Earnest	Hoeger	41	Eliza_Wisoky@yahoo.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
7	Elmira	Kautzer	55	Sedrick.Fisher@hotmail.com
0	Roy	Quigley	48	Lewis.Conn@hotmail.com
6	Ernie	Yost	44	Lane.Lesch55@gmail.com
2	Amber	Becker	41	Mildred58@yahoo.com
1	Rudolph	Wisozk	39	Rashawn20@hotmail.com
5	Tabitha	Crooks	38	Tracey67@yahoo.com
4	Nash	Thiel	35	Brad.Wilderman35@yahoo.com
8	Elza	Conn	26	Adelia.Roob52@hotmail.com
3	Brooklyn	Koch	23	Kristy75@gmail.com
9	Marc	Bergstrom	18	Crystal.Durgan22@gmail.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	Alfonso	Braun	26	Jillian75@yahoo.com
1	Omar	Wiza	56	Lennie.Gutmann@gmail.com
2	Dayne	Larson	22	Maximo.Carter@hotmail.com
3	Marjorie	Cremin	63	Vincenza88@gmail.com
4	Heaven	Gulgowski	40	Betsy_Crona29@hotmail.com
5	Anita	Dibbert	63	Ivan_Sauer57@yahoo.com
6	Gerardo	Koelpin	45	Carmelo_Will10@hotmail.com
7	Dave	Bode	60	Katlynn_Mertz65@gmail.com
8	Shaina	Langosh	48	Fredrick43@yahoo.com
9	Ismael	Ratke	59	Gail_Fisher@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	Kristie	Murazik	27	Cecil_OHara@yahoo.com
1	Emily	Sawayn	43	Jennyfer.Stiedemann@gmail.com
2	Elvie	Daugherty	27	April_Terry97@hotmail.com
3	Sage	Reinger	63	Marjorie.Hickle41@hotmail.com
4	Dejon	Powlowski	23	Shirley6@hotmail.com
5	Yasmin	Quitzon	26	Julie84@yahoo.com
6	Jaleel	Walter	21	Jess_Frami@yahoo.com
7	Alonzo	Goyette	45	Glenda_Vandervort73@gmail.com
8	Autumn	Anderson	21	Nellie73@gmail.com
9	Melanie	Schimmel	57	Lena.Goodwin81@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	Princess	Larkin	51	Antone_Klein@gmail.com
1	Ewell	Hyatt-Wehner	27	Shakira_Olson93@hotmail.com
2	Patrick	Sipes	48	Maggie28@yahoo.com
3	Clint	Haley	44	Kayla_Stoltenberg9@gmail.com
4	Arlo	Schmitt	21	Mona_Wyman23@gmail.com
5	Mindy	Lindgren	20	Larry96@gmail.com
6	Alicia	Rice	43	Kristina.Wehner@gmail.com
7	Sonia	Pollich	37	Donna_Luettgen1@hotmail.com
8	Lorena	Nienow	46	Dawn41@gmail.com
9	Harold	Predovic	25	Vicenta_Bogisich@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	Trinity	Stark	20	Fletcher_Auer@gmail.com
1	Ari	Flatley	50	Domenick_Sporer53@gmail.com
2	Randal	Russel	59	Sheldon.Rohan@yahoo.com
3	Jacob	Kessler	30	Eddie.Schiller@yahoo.com
4	Celia	Brakus	57	Harrison_Romaguera@yahoo.com
5	Jordi	Weber	61	Laverne.Gerlach@hotmail.com
6	Alison	Marks	36	Gustave38@hotmail.com
7	Quentin	Volkman	39	Luz_Sauer80@hotmail.com
8	Blake	Ullrich	52	Daniel63@gmail.com
9	Zion	Wilkinson	22	Lucille49@gmail.com

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

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

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

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

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

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

id	firstName	lastName	age	email
0	Irving	Roberts	35	Molly.Schoen66@hotmail.com
1	Leonie	Mayert	58	Lynne.Hyatt@yahoo.com
2	Vallie	Schroeder	52	Jeannette66@gmail.com
3	Samantha	Bartoletti	57	Jack_Erdman98@gmail.com
4	Wendy	Adams-Runte	32	Malachi89@hotmail.com
5	Mckenna	Schroeder	19	Ted.Gislason-Rempel@yahoo.com
6	Sydnee	Lubowitz	43	Faye25@gmail.com
7	Roderick	Harris	36	Lavina.Connelly@gmail.com
8	Sadie	White	35	Reggie.Cremin87@hotmail.com
9	Tyrell	Farrell	47	Silvia79@hotmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Rylan	Dibbert	52	Queenie.Heidenreich70@hotmail.com
1	Tracey	Reynolds	50	Kayla_Greenfelder80@gmail.com
2	Esther	Heathcote	34	Stan_Daugherty@yahoo.com
3	Austen	Koss	42	Rosie_Marks@yahoo.com
4	Lorna	Nader	37	Rosa_Windler@hotmail.com
5	Sarah	Sipes	62	Salvatore.Becker@hotmail.com
6	Otha	Rowe	60	Wilson.Langosh87@gmail.com
7	Billy	McLaughlin-Gutkowski	52	Esther_Prohaska@gmail.com
8	Eva	Reilly	34	Karson13@hotmail.com
9	Eileen	Durgan	24	Clinton_Ritchie@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	Chester	Legros	55	Lisandro.Mayert@gmail.com
1	Brad	Metz	27	Jermey40@hotmail.com
2	Craig	Rohan-Satterfield	37	Mikayla68@gmail.com
3	Jimmy	Haag	39	Nellie_Sawayn55@yahoo.com
4	Maia	Kassulke	22	Katarina.West52@hotmail.com
5	Lillian	Kuvalis	31	Harry.Thiel@hotmail.com
6	Fritz	Hagenes	60	Charlene.Heidenreich@hotmail.com
7	Emilio	Yost	34	Claudie_Lowe@hotmail.com
8	Clifton	Hackett	43	Chesley24@yahoo.com
9	Wilbert	Hackett	51	Angelica_Stamm@hotmail.com
10	Jayne	Casper	29	Jennie_Ledner@gmail.com
11	Dennis	Hintz	62	Arnoldo45@hotmail.com
12	Dennis	Stehr	34	Caitlyn_Lueilwitz@gmail.com
13	Floyd	Will	49	Kristy46@hotmail.com
14	Pattie	White	47	Keira.Hammes87@yahoo.com
15	Lavern	Koch	28	Tomasa_Murphy@gmail.com
16	Kirstin	Weber	51	Darin.Cassin36@gmail.com
17	Summer	Pagac	20	Amaya.Spencer@hotmail.com
18	Hattie	Ziemann	31	Zachary34@gmail.com
19	Hugo	Blanda	19	Freddie_Muller@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	Ludie	Wilderman	27	Guillermo.MacGyver15@gmail.com
11	Curtis	Kris	63	Melody67@hotmail.com
12	Charlene	Hansen	39	Lucienne65@gmail.com
13	Diana	Hessel	41	Irving_Zulauf@yahoo.com
14	Hillard	Rutherford	28	Bernard82@hotmail.com
15	Garrison	Monahan	50	Rudy_Kuhic12@gmail.com
16	Juana	Monahan	52	Royal58@yahoo.com
17	Hilbert	Abshire-Medhurst	30	Jennie.Ernser60@hotmail.com
18	Sterling	Shanahan	63	Angelina_Wehner@gmail.com
19	Genoveva	Mayer	25	Concepcion_Collins97@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	Maxime	O'Connell	60	Ashley.Schmidt53@gmail.com
1	Lawrence	Kihn	18	Dwight26@hotmail.com
2	Garrett	Dach	20	Dasia.Kozey@hotmail.com
3	Christian	Rice-Rohan	57	Blaze.Bradtke@hotmail.com
4	Reginald	Lind	44	Kraig62@yahoo.com
5	Angeline	Romaguera	21	Jeff_Collier17@gmail.com
6	Ford	Murazik	56	Jennie69@yahoo.com
7	Phillip	Mraz	34	Ora.OReilly83@gmail.com
8	Duane	Mitchell	26	Katie_Spencer@hotmail.com
9	Velma	Ondricka	37	Darlene.Smith@yahoo.com
10	Cora	Lesch	25	Cathy.Gottlieb@hotmail.com
11	Jerome	Paucek	24	Adan.Kozey@yahoo.com
12	Daphney	Harvey	20	Joanna83@yahoo.com
13	Ruben	Huel	40	Lora_Cruickshank-Keeling85@yahoo.com
14	Clint	Feeney	32	Laverna_Reilly71@yahoo.com
15	Quincy	Braun	25	Mitchell_Bartell@yahoo.com
16	Cedric	Kiehn	29	Irving19@gmail.com
17	Margie	Walsh	32	Jesus70@gmail.com
18	Elvira	Homenick	36	Jonathon_Marks@hotmail.com
19	Elenor	Weimann	65	Nikita87@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	Deborah	Crooks	35	Stephon.Kris0@gmail.com
1	Jovany	Wolff	45	Brennan_Ryan@hotmail.com
2	Joany	Boyer-Adams	61	Johnathan_Heller-Marquardt18@yahoo.com
3	Ann	Kautzer	59	Andre.McDermott@hotmail.com
4	Leland	Ruecker	58	Hilda92@yahoo.com
5	Chanelle	Funk	38	Jovanny91@gmail.com
6	Camille	Schumm	29	Giovanna13@yahoo.com
7	Santos	Paucek	38	Maurice33@yahoo.com
8	Heath	Rempel	65	Jazmin_Muller@yahoo.com
9	Mattie	Stiedemann	60	Shany_Halvorson-Nitzsche63@yahoo.com
10	Arlie	Rempel	34	Collin_Sauer@yahoo.com
11	Maiya	Greenholt	50	Stuart99@hotmail.com
12	Myah	Bernier	32	Betty.McDermott@hotmail.com
13	Angelica	Gerhold	35	Dawn.Shields@yahoo.com
14	Berneice	Bartell	23	Jaden92@gmail.com
15	Antonia	Feest	52	Karl9@hotmail.com
16	Olivia	Corkery	37	Lynette71@hotmail.com
17	Dannie	Waters	33	Laurence77@gmail.com
18	Carroll	Raynor	26	Kristi16@gmail.com
19	Christian	Blanda	25	Ida.Feil28@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	Joelle	O'Reilly	54	Mandy_Wilkinson66@gmail.com
1	Maggie	Gutmann	36	Cleo.Kutch@yahoo.com
2	Pierce	Williamson	57	Sophie83@gmail.com
3	Chloe	Stark	55	Chandler_Lehner@yahoo.com
4	Gregorio	Oberbrunner	30	Eudora.Marquardt@hotmail.com
5	Deborah	Pollich-Kessler	54	Eddie_Emmerich55@hotmail.com
6	Derek	Rice-Weimann	65	Neoma_McClure99@hotmail.com
7	Arvid	Prosacco	45	Pascale17@hotmail.com
8	Lorena	Kuhlman	64	Janie.Mayert59@gmail.com
9	Alisha	Little	53	Tanner13@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	Chelsea	Hills	25	Rosemary59@yahoo.com
1	Matteo	Watsica	32	Kendra.Hodkiewicz27@yahoo.com
2	Regina	Carter	37	Khalil_Bruen44@yahoo.com
3	Lonnie	Mayer	56	Willis.Koch@yahoo.com
4	Douglas	Trantow	43	Annie.Halvorson@yahoo.com
5	Benton	Pfeffer	61	Earnest.Abshire@gmail.com
6	Holden	Feeney	64	Fernando_Rosenbaum-Hermiston@hotmail.com
7	Ben	Kessler	41	Claire.Turcotte64@hotmail.com
8	Euna	Little	22	Marsha.Batz@gmail.com
9	Lura	Steuber	46	Dexter68@yahoo.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	Toni	Konopelski	33	Jared60@yahoo.com
1	Raegan	Bogan	23	Fredy_Gislason@yahoo.com
2	Nicole	Hamill	42	Wendell30@hotmail.com
3	Chad	Runte	27	Aurelio_Moore@yahoo.com
4	Sister	Mante	48	Samantha_Mertz@hotmail.com
5	Madyson	Reichel	37	Linwood_Wunsch40@hotmail.com
6	Ramiro	Windler	20	Augustus_Willms@hotmail.com
7	Madyson	Koss	46	Karl_Mosciski82@hotmail.com
8	Patrick	Shields	44	Doris76@gmail.com
9	Toni	Hills	34	Garfield.Leannon62@hotmail.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	Gertrude	Koss	20	Dan41@yahoo.com
1	Jerel	Gerhold	57	Randal_Purdy10@gmail.com
2	Natalie	Senger	33	Zachary_Wyman7@hotmail.com
3	Maverick	Heller	63	Laurie.Johnson15@hotmail.com
4	Hazel	Will	21	Nichole.Moore14@hotmail.com
5	Melissa	Trantow	28	Trace28@gmail.com
6	Brigitte	Bashirian	20	Cayla71@gmail.com
7	Allan	Cremin	56	Theodora.Hauck41@gmail.com
8	Telly	D'Amore	28	Wade83@hotmail.com
9	Roosevelt	Frami	56	Shaun_Lindgren@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	Andreanne	Torp	50	Verda.Zemlak@hotmail.com
1	Esperanza	Ziemann	30	Jerel43@yahoo.com
2	Gregory	Kiehn	60	Alfonso.Russel29@gmail.com
3	Lorraine	Lehner	49	Hunter83@yahoo.com
4	Pete	Emmerich	49	Irma_Strosin6@yahoo.com
5	Brandi	Fahey	22	Abagail.Cole@gmail.com
6	Kelley	Herzog	21	Spencer63@hotmail.com
7	Emile	Howell	40	Donny_Gutkowski23@hotmail.com
8	Adonis	Davis	38	Elenor_Ferry47@gmail.com
9	Brandi	Emard	44	Alva_Kunde11@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	Daryl	Anderson	24	Felicia72@yahoo.com
1	Bertha	Purdy	24	Jacob.Kilback99@yahoo.com
2	Mary	Goldner	61	Preston_Keebler8@gmail.com
3	Vernice	Luettgen	64	Charlotte_Yundt@hotmail.com
4	Nola	Kohler	58	Tabitha64@hotmail.com
5	Bernie	Jaskolski	49	Leone.Wilkinson45@gmail.com
6	Gia	Barton	42	Beulah_Cole@gmail.com
7	Gilbert	Torphy	59	Roxanne.Dickens30@yahoo.com
8	Marcos	Hamill	34	Darnell86@yahoo.com
9	Joy	Morissette	63	Elisa.Anderson@gmail.com

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

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

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

Use Filter

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

id	firstName	lastName	age	email
0	Carey	Waters	39	Tricia_Ortiz@hotmail.com
1	Miriam	Zulauf	47	Lowell_Weissnat40@gmail.com
2	Jeramy	Goyette	63	Carroll.Cole@hotmail.com
3	Shaun	Cole	27	Claude_Ferry@hotmail.com
4	Madeline	Luettgen	50	Dale_Beatty57@yahoo.com
5	Shana	Sauer	65	Morris_Armstrong35@gmail.com
6	Elisa	Mante	51	Alyssa.Kshlerin@yahoo.com
7	Dewayne	Volkman	33	Andy63@hotmail.com
8	Gianni	Kuhn	30	Carolyne_Turcotte15@hotmail.com
9	Don	Cormier	56	Morris40@gmail.com

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

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

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

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

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

Set Default Filter

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

id	firstName	lastName	age	email
0	Nichole	Heidenreich	18	Dave9@gmail.com
3	Charlie	Thompson	49	Hilma.Will@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	Sylvan	Hagenes	50	Zack_Champlin@yahoo.com
1	Cristina	Jacobs	31	Stacey_Little@gmail.com
2	Angelo	Boyle	54	John_Walter@gmail.com
3	Jesus	Jerde	49	Luz_Breitenberg26@hotmail.com
4	Miguel	Kilback	44	Rosario.Tromp15@gmail.com
5	Yolanda	Beer-Corwin	42	Ottis.Kirlin91@yahoo.com
6	Emanuel	Bergnaum	41	Elisabeth33@yahoo.com
7	Tommie	Swaniawski	49	Jesse17@gmail.com
8	Bertrand	Franecki	46	Randy_Bernhard83@gmail.com
9	Tammy	Rolfson	41	Clint0@yahoo.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	Emma	Monahan	56	Sarah13@gmail.com
1	Toy	Bins	63	Lucio_Hoeger56@yahoo.com
2	Shemar	Koch	20	Macey.Marquardt88@gmail.com
3	Yvonne	Lesch	64	Lawrence50@hotmail.com
4	Mandy	Carter	48	Montana.Herzog71@hotmail.com
5	Debra	Schmidt	20	Shaina.Sauer76@yahoo.com
6	Sophie	Hintz	27	Hellen_Friesen42@gmail.com
7	Marianna	Torphy-Kemmer	56	Jamil_Doyle@yahoo.com
8	Wade	Lakin	46	Marc46@gmail.com
9	Brant	Rogahn	23	Litzy.Waelchi@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	Kristi	Breitenberg	53	Minnie33@hotmail.com
1	Clay	Wehner	65	Verlie.Reichert@yahoo.com
2	Judd	Fisher	36	Clovis36@gmail.com
3	Maggie	Keebler	49	Angela3@hotmail.com
4	Miguel	Bailey	45	Demarcus22@yahoo.com
5	Fred	Franey-Wintheiser	44	Demetrius_Bode@yahoo.com
6	Dallas	Will	64	Laila34@yahoo.com
7	Shyann	Gorczany	54	Erin.Crist97@hotmail.com
8	Tammy	Funk	34	Raina_Bogan76@hotmail.com
9	Kendra	VonRueden	39	Ed.Boyer90@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

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.