Table

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

id	firstName	lastName	age	email
0	Glen	Bernhard	58	Agnes_Hartmann@gmail.com
1	Cathy	Emard	28	Nora_Goldner24@yahoo.com
2	Donna	Champlin	29	Leticia_Conroy72@yahoo.com
3	Geraldine	Toy	22	Armando_Bernier86@gmail.com
4	Sarah	Bednar	37	Godfrey.Herman55@gmail.com
5	Harold	Krajcik	59	Jermey66@yahoo.com
6	Kara	Moen	59	Kathryn2@yahoo.com
7	Marlon	Schultz	43	Alayna.Blick@yahoo.com
8	Dean	Hansen	58	Kristopher59@hotmail.com
9	Caesar	Armstrong	46	Karen32@gmail.com

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

const columnHelper = createColumnHelper<Data>()

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

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

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

Usage

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

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

import { Table } from "@workspaces/ui"

<Table />

Table internally uses tanstack-table and NativeTable.

Change Variant

id	firstName	lastName	age	email
0	Jamel	Feeney	35	Virginia73@yahoo.com
1	Torey	Lueilwitz	26	Elijah_Lehner@gmail.com
2	Christelle	Parker	23	Jeremiah30@gmail.com
3	Hannah	Grimes	43	Amya52@hotmail.com
4	Cory	Erdman	21	Cindy.Turcotte@yahoo.com
5	Laurence	Reynolds	49	Katrina.Walter81@hotmail.com
6	Carrie	Monahan	28	Karianne_Lind-Halvorson@gmail.com
7	Tony	Emmerich	31	Francis_Fadel45@yahoo.com
8	Emerald	Cronin	39	Amya74@gmail.com
9	Tyshawn	Treutel	44	Angelina_Prohaska36@yahoo.com

id	firstName	lastName	age	email
0	Jamel	Feeney	35	Virginia73@yahoo.com
1	Torey	Lueilwitz	26	Elijah_Lehner@gmail.com
2	Christelle	Parker	23	Jeremiah30@gmail.com
3	Hannah	Grimes	43	Amya52@hotmail.com
4	Cory	Erdman	21	Cindy.Turcotte@yahoo.com
5	Laurence	Reynolds	49	Katrina.Walter81@hotmail.com
6	Carrie	Monahan	28	Karianne_Lind-Halvorson@gmail.com
7	Tony	Emmerich	31	Francis_Fadel45@yahoo.com
8	Emerald	Cronin	39	Amya74@gmail.com
9	Tyshawn	Treutel	44	Angelina_Prohaska36@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	Elvie	Von	33	Dean96@hotmail.com
1	Monica	Rice	41	Hector_Schinner93@hotmail.com
2	Katrina	Lowe	62	Mitchell62@hotmail.com
3	Watson	Windler	25	Sammy_Cole54@gmail.com
4	Wm	Rogahn	30	Lindsay_Sawayn@gmail.com
5	Jaylan	Abshire	45	Bernhard41@yahoo.com
6	Lillian	Runolfsdottir-Kihn	26	Cecil.Ryan@yahoo.com
7	Laurence	Larson	36	Wilburn.Williamson77@hotmail.com
8	Narciso	Witting	47	Ashley11@gmail.com
9	Tianna	Schiller	26	Angelica_Greenfelder@yahoo.com

id	firstName	lastName	age	email
0	Elvie	Von	33	Dean96@hotmail.com
1	Monica	Rice	41	Hector_Schinner93@hotmail.com
2	Katrina	Lowe	62	Mitchell62@hotmail.com
3	Watson	Windler	25	Sammy_Cole54@gmail.com
4	Wm	Rogahn	30	Lindsay_Sawayn@gmail.com
5	Jaylan	Abshire	45	Bernhard41@yahoo.com
6	Lillian	Runolfsdottir-Kihn	26	Cecil.Ryan@yahoo.com
7	Laurence	Larson	36	Wilburn.Williamson77@hotmail.com
8	Narciso	Witting	47	Ashley11@gmail.com
9	Tianna	Schiller	26	Angelica_Greenfelder@yahoo.com

id	firstName	lastName	age	email
0	Elvie	Von	33	Dean96@hotmail.com
1	Monica	Rice	41	Hector_Schinner93@hotmail.com
2	Katrina	Lowe	62	Mitchell62@hotmail.com
3	Watson	Windler	25	Sammy_Cole54@gmail.com
4	Wm	Rogahn	30	Lindsay_Sawayn@gmail.com
5	Jaylan	Abshire	45	Bernhard41@yahoo.com
6	Lillian	Runolfsdottir-Kihn	26	Cecil.Ryan@yahoo.com
7	Laurence	Larson	36	Wilburn.Williamson77@hotmail.com
8	Narciso	Witting	47	Ashley11@gmail.com
9	Tianna	Schiller	26	Angelica_Greenfelder@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	Burdette	Streich	46	Cameron_Bailey@gmail.com
1	Philip	MacGyver	60	Daron68@gmail.com
2	Alberto	Thompson	63	Ignacio.Zemlak63@hotmail.com
3	Joel	Gutmann	63	Juwan.Mann@hotmail.com
4	Stevie	Wisoky	62	Warren_Will76@yahoo.com
5	Vito	Armstrong	28	Bessie50@hotmail.com
6	Mabelle	Farrell	39	Emmie24@gmail.com
7	Spencer	Harber	45	Mercedes37@gmail.com
8	Armando	Johnson	23	Elisa.Goldner@gmail.com
9	Norman	Frami	28	Carlee.Johnston@hotmail.com

id	firstName	lastName	age	email
0	Burdette	Streich	46	Cameron_Bailey@gmail.com
1	Philip	MacGyver	60	Daron68@gmail.com
2	Alberto	Thompson	63	Ignacio.Zemlak63@hotmail.com
3	Joel	Gutmann	63	Juwan.Mann@hotmail.com
4	Stevie	Wisoky	62	Warren_Will76@yahoo.com
5	Vito	Armstrong	28	Bessie50@hotmail.com
6	Mabelle	Farrell	39	Emmie24@gmail.com
7	Spencer	Harber	45	Mercedes37@gmail.com
8	Armando	Johnson	23	Elisa.Goldner@gmail.com
9	Norman	Frami	28	Carlee.Johnston@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	Hester	Rowe	19	Rolando_Wyman@yahoo.com
1	Eric	Schneider	39	Garland_Lind@hotmail.com
2	Korbin	Trantow	61	Marc73@gmail.com
3	Dominique	Connelly	59	David.Sawayn@gmail.com
4	Natasha	Simonis	27	Rudolph_Bode90@hotmail.com
5	Geraldine	Swaniawski	61	Jim.Wolf@hotmail.com
6	Rowan	Hills	29	Gonzalo.Von@yahoo.com
7	Hardy	Koch	60	Johnpaul7@gmail.com
8	Jaydon	Schamberger	28	Katelyn.Hirthe16@hotmail.com
9	Kallie	Balistreri	54	Madyson_Koch12@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	Harrison	Jerde	57	Aubree.Johns@gmail.com
1	Karlee	Runte	45	Bennie_Becker69@hotmail.com
2	Karianne	Kuvalis	56	Geovanni90@yahoo.com
3	Sophie	Hills	53	Nathaniel_Armstrong@gmail.com
4	Lynette	Friesen	28	Gilberto.Lowe@hotmail.com
5	Gerald	Muller	27	Rosemarie89@hotmail.com
6	Ramon	Greenholt	61	Glen.Leffler@yahoo.com
7	Doyle	Lehner	48	Marcus.Bogan56@hotmail.com
8	Glenda	Reichert	53	Thelma37@gmail.com
9	Judah	Stroman	37	Neal_Armstrong96@yahoo.com

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

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

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

id	firstName	lastName	age	email
0	Dawn	Gislason	40	Phoebe92@hotmail.com
1	Angelo	Breitenberg	45	Neil_Satterfield86@yahoo.com
2	Dominic	Nicolas	60	Bradford88@yahoo.com
3	Dallas	Kuvalis	43	Gertrude_Roberts@gmail.com
4	Lacey	Kerluke	34	Alejandrin21@yahoo.com
5	Erika	Franey	32	Mozelle.Kassulke@hotmail.com
6	Kristy	Marks	43	Kiley.Walker9@hotmail.com
7	Douglas	Quigley	43	Sibyl.Simonis@gmail.com
8	Caleb	Bashirian	59	Kian_Strosin@hotmail.com
9	Rashad	Gutmann	37	Zachariah41@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	Summer	Littel	26	Jaron_Gislason52@gmail.com
1	Julius	Zulauf	46	Katharina19@hotmail.com
2	Janick	Hilll	26	Carla80@yahoo.com
3	Enos	Ruecker	26	Mabel.OConnell@yahoo.com
4	Violet	Funk	38	Johnathon15@gmail.com
5	Mozell	Sanford	21	Laury.Moen56@hotmail.com
6	Lydia	Jones	63	Edwin1@gmail.com
7	Jacky	Lang	37	Rosalie.Labadie@yahoo.com
8	Hollie	Herman	41	Retha.Rutherford@gmail.com
9	Elfrieda	Heidenreich	20	Boyd_Beatty@gmail.com

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

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

Scroll Area

To enable scroll area, set withScrollArea to true.

id	firstName	lastName	age	email	phone	role	status	createdAt	updatedAt
0	Rosemarie	Upton	37	Easter.Bogisich@hotmail.com	(369) 383-9375 x99812	user	inactive	5/4/2026	1/22/2026
1	Vicky	Grimes	42	Claude_Gislason@hotmail.com	1-264-671-8657 x386	admin	inactive	4/19/2026	7/2/2026
2	Melba	Okuneva	23	Abdul.Kautzer@hotmail.com	344-555-5924 x5681	user	active	9/1/2025	4/28/2026
3	Geraldine	Powlowski	59	Brandy.Hermann51@hotmail.com	1-576-538-2126	admin	inactive	9/20/2025	8/15/2025
4	Roselyn	Beer	38	Lupe.Wilderman37@hotmail.com	529-892-2650	admin	inactive	3/28/2026	5/1/2026
5	Paul	Cruickshank	38	Mohammad_Kling@gmail.com	1-756-957-1431 x6190	admin	inactive	6/4/2026	10/23/2025
6	Angelo	McGlynn	54	Whitney.Zemlak@yahoo.com	1-592-929-5258 x324	user	active	11/26/2025	2/18/2026
7	Amy	Lockman	27	Candice_Hane@yahoo.com	(639) 274-6460 x079	user	inactive	11/23/2025	8/30/2025
8	Grady	Rodriguez	57	Juan_Luettgen48@gmail.com	1-307-950-9346 x48455	user	active	3/25/2026	5/4/2026
9	Noemi	Bins	24	Terri_Kihn31@yahoo.com	616-894-5010 x4027	user	inactive	3/5/2026	7/18/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	Gwen	Bartoletti	58	Kyleigh.Collier81@hotmail.com
1	Toney	Sanford	64	Hyman.Larson@gmail.com
2	Cheryl	Mante	47	Danyka_Krajcik@gmail.com
3	Patricia	Franey	28	Clarabelle_Douglas21@hotmail.com
4	Tom	Sanford	55	Preston.Carroll@hotmail.com
5	Roy	Goyette	43	Gail.Okuneva@yahoo.com
6	Jacqueline	Quitzon	54	Santina70@gmail.com
7	Sheryl	Lang	35	Jewell_Koch@gmail.com
8	Richard	Hyatt	53	Maurice81@hotmail.com
9	Eula	Crooks	45	Lee_Casper29@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	Norris	Reichel	43	Kamren_Shanahan49@hotmail.com
1	Einar	King	19	Skylar96@hotmail.com
2	Jacynthe	Abbott	33	Glenn.Wisoky99@gmail.com
3	Kacey	Gutkowski	35	Johnathan_Keebler85@hotmail.com
4	Leland	Reilly	41	Lincoln.Mante@yahoo.com
5	Reanna	Rempel-Strosin	18	Colt32@yahoo.com
6	Mike	Heller	60	Providenci_Cartwright@hotmail.com
7	Fredrick	Kshlerin	48	Moises.Von@yahoo.com
8	Delmer	Parisian	27	Aidan_Watsica80@hotmail.com
9	Clyde	Yundt	35	Kathleen.Weimann45@yahoo.com
id	firstName	lastName	age	email
	name		age	email
	user

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

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

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

id	firstName	lastName	age	email
0	Lillie	Farrell	23	Gunnar_Bahringer-Schmidt@yahoo.com
1	Karson	Jacobs	50	Jaylon32@hotmail.com
2	Toni	Gulgowski	45	Sunny_DuBuque7@hotmail.com
3	Era	Walker	34	Augusta_Leffler63@gmail.com
4	Lera	Heller	53	Ariel_Yundt43@yahoo.com
5	Alec	Rippin	42	Kiana_Luettgen61@hotmail.com
6	Julio	Wintheiser	28	Max82@yahoo.com
7	Jessie	Thompson	27	Bette21@gmail.com
8	Clint	Smitham	27	Bell_Windler@gmail.com
9	Merle	Heaney	27	Ed.Olson44@hotmail.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	Javier	Prohaska	21	Jack18@hotmail.com
1	Ben	Farrell	52	Sadye_Effertz@gmail.com
2	Berenice	Parker	61	Cecilia_Durgan16@yahoo.com
3	Paula	Yundt	35	Rosendo_Tremblay90@yahoo.com
4	Jazlyn	Kertzmann	26	Margret_Stiedemann39@hotmail.com
5	Jeffrey	Schumm	47	Karla40@gmail.com
6	Pedro	Satterfield	63	Catharine.Russel10@yahoo.com
7	Ova	Torphy-Schamberger	26	Callie.Wintheiser@hotmail.com
8	Okey	Zieme	19	Angela_Dickens-Yundt20@hotmail.com
9	Wm	Littel	24	Edmond7@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	Nora	Connelly	36	Betsy_Schowalter@gmail.com
1	Joan	Ratke	30	Lorine28@gmail.com
2	Lincoln	Champlin	41	Donnie_Bergnaum59@gmail.com
3	Maxine	Daniel	22	Graciela_McGlynn@gmail.com
4	Kayla	Grant-Gorczany	58	Faustino_Mertz92@gmail.com
5	Kevin	Murazik	38	Christy99@hotmail.com
6	Kaden	Ortiz	63	Soledad_Fritsch@hotmail.com
7	Chris	Ryan	32	Magdalena_Prohaska@gmail.com
8	Retta	Jakubowski	32	Vergie60@yahoo.com
9	Nellie	Will	23	Kenneth_Weber54@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	Steve	Feest	35	Malcolm88@gmail.com
1	Danny	Effertz	19	Granville.Hermiston12@hotmail.com
2	Verner	Jast	48	Carlos4@gmail.com
3	Everardo	McKenzie	62	Juston.Bartell@gmail.com
4	Evelyn	Becker	24	Kathryn69@yahoo.com
5	Colton	Medhurst	23	Jeannette21@gmail.com
6	Nadine	Gibson	35	Geraldine42@gmail.com
7	Wilburn	Schamberger	45	Patricia.Casper@hotmail.com
8	Joey	Hagenes	30	Drew92@hotmail.com
9	Robin	Wintheiser	55	Timmy32@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
8	Genevieve	Farrell	54	Melba.Hackett@yahoo.com
2	Araceli	Hermann	53	Zita66@gmail.com
6	Harry	Torphy	51	Peggy_Graham@yahoo.com
7	Lydia	Moore	43	Marion.Ziemann26@gmail.com
4	Kenna	Oberbrunner	39	Nat.Weimann37@hotmail.com
5	Margie	Zulauf	35	Mike21@hotmail.com
9	Annette	Legros	35	Christine_Kris56@gmail.com
3	Priscilla	Ratke	34	Tyrese97@hotmail.com
1	Ezekiel	Maggio-Moore	25	Carrie_Denesik@yahoo.com
0	Tommy	Terry	22	Rex.Jones42@hotmail.com

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

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

Disable Sorting

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

id	firstName	lastName	age	email
0	Ken	Steuber	56	Creola.Steuber34@gmail.com
1	Eula	Bogisich	41	Eliezer_Farrell44@yahoo.com
2	Nova	Fisher	40	Fred95@yahoo.com
3	Hugh	Moen	31	Alda7@hotmail.com
4	Samantha	Ernser	22	Simeon.Armstrong@hotmail.com
5	Carlton	Kozey	50	Wallace89@yahoo.com
6	Leo	Bauch	28	Rosemarie_Gottlieb@gmail.com
7	Tyrone	Kassulke	55	Karla.Johns@hotmail.com
8	Westley	Larkin	20	Loraine94@yahoo.com
9	Meggie	Weimann	27	Bernice_Kris43@hotmail.com

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

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

Disable Multi Sorting

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

id	firstName	lastName	age	email
0	Jennie	Maggio	25	Alvis.Rohan@gmail.com
1	Lera	Turcotte	53	Prudence.Schiller-Kohler60@gmail.com
2	Maxine	Okuneva	28	Edwin16@hotmail.com
3	Estefania	Kozey	59	Maynard_Fisher30@gmail.com
4	Jacinthe	Leuschke	60	Mozell27@yahoo.com
5	Korey	Mayert	39	Eugenia95@hotmail.com
6	Everett	Purdy	64	Leslie.Sporer@hotmail.com
7	Emmitt	Daugherty	55	Leticia_Franey@yahoo.com
8	Pierce	Paucek	29	Elza_Kiehn@hotmail.com
9	Evan	Lang	22	Adrienne77@yahoo.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	Cassie	MacGyver	50	Haskell_Dibbert46@gmail.com
1	Jessy	Frami	20	Meagan.Heaney@yahoo.com
2	Kay	Marquardt	54	Malcolm67@yahoo.com
3	Delmer	Raynor	36	Ruthe_Quigley-Halvorson@gmail.com
4	Verda	Hartmann	52	Amie.Hartmann23@yahoo.com
5	Geraldine	O'Hara	39	Geneva.Heidenreich@hotmail.com
6	Candida	Reinger	19	Ayden_Huels1@hotmail.com
7	Thurman	Schroeder	30	Terrell.Hettinger@gmail.com
8	Mya	Borer	57	Stewart.Purdy-Doyle74@gmail.com
9	Theodore	Sporer	45	Weston_Nitzsche-Paucek39@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	Colleen	Feeney	41	Randolph.Stamm@gmail.com
1	Eugenia	Willms	19	Daron5@gmail.com
2	Grayce	Heaney	23	Irene.Bailey@gmail.com
3	Bennett	Konopelski	39	Kiley_Abernathy@yahoo.com
4	Miracle	Emard	19	Rickey_Bosco54@hotmail.com
5	Jack	Von	56	Abraham.Kemmer74@yahoo.com
6	Rene	Gleichner	53	Angelica.Schmitt@gmail.com
7	Salma	Jaskolski	52	Blake.Conn@hotmail.com
8	Gonzalo	Koss	37	Rashawn57@gmail.com
9	Camylle	O'Keefe	45	Richie_Kunze@hotmail.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	Lorraine	Welch	64	Gerda64@yahoo.com
1	Candido	Paucek	40	Sidney.Bernier@hotmail.com
2	Raymundo	Buckridge	50	Emily.Armstrong94@hotmail.com
3	Bradley	Jacobs	26	Verla4@hotmail.com
4	Lynne	Haley	45	Mattie52@yahoo.com
5	Emmett	Willms	47	Liliana_Muller46@gmail.com
6	Arlo	Okuneva	19	Kip54@yahoo.com
7	Alison	McLaughlin	61	Ocie_Kulas9@yahoo.com
8	Freeman	Pfeffer	37	Winifred_Trantow@yahoo.com
9	Rafael	Schowalter	53	Jabari13@hotmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Joaquin	Davis	42	Hillard.Hahn@gmail.com
1	Helmer	Keebler	30	Jeannie97@yahoo.com
2	Donald	Rolfson	38	Vella_Gusikowski@hotmail.com
3	Nat	Koepp-Dietrich	51	Dianna0@yahoo.com
4	Nelson	Denesik	40	Jeremy_Dibbert@yahoo.com
5	Lucia	Weimann	19	Nettie.Schoen27@gmail.com
6	Michael	Satterfield	40	Adam68@hotmail.com
7	Kellie	Reynolds	52	Hillard.Abernathy@gmail.com
8	Antoinette	O'Hara	29	Kaitlin.West83@gmail.com
9	Lorenzo	Hills	38	Franz_Terry55@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	Kariane	Kub	37	Leo.Mosciski@yahoo.com
1	Mattie	Bruen	61	Christina18@yahoo.com
2	Julien	Cartwright	19	Angelo.Reichert43@gmail.com
3	Jeanie	Hegmann	56	Heber_Casper@yahoo.com
4	Sanford	Wuckert	60	Maxine.Mueller@gmail.com
5	Romaine	Nolan	48	Golda.Christiansen@yahoo.com
6	Lisa	Muller	41	Vernon4@gmail.com
7	Meda	Heathcote-Romaguera	46	Latoya.Jacobson@hotmail.com
8	Olga	Raynor	23	Ciara.Abernathy@hotmail.com
9	Patsy	Mitchell	36	Liliane.Orn@gmail.com
10	Flora	Schmeler	26	Xzavier.Connelly@hotmail.com
11	Josephine	Bernhard	59	Carlee.Powlowski21@yahoo.com
12	Chelsea	Roberts-Mosciski	49	Garry_Breitenberg76@gmail.com
13	Daron	McCullough	27	Carolyne.Boyle@gmail.com
14	Elizabeth	Nader	44	Kraig39@yahoo.com
15	Jarret	Fadel	25	Laurie2@gmail.com
16	Dominick	McGlynn	47	Lowell.Stamm@gmail.com
17	Aubrey	Hettinger	48	Desmond94@yahoo.com
18	Brendan	Wuckert	20	Mamie.Gibson93@gmail.com
19	Bert	Thiel	58	Thomas_Rohan6@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	Katelynn	Mueller	62	Valerie_Hudson-Little@hotmail.com
11	Sunny	Bode	47	Ned74@hotmail.com
12	Wendy	McLaughlin	48	Woodrow_Grady96@yahoo.com
13	Calvin	Gislason	50	Rod.Schoen@gmail.com
14	Sergio	Abbott	18	Sadie_Leuschke@hotmail.com
15	Vera	Kuvalis	33	Claud.Morar@yahoo.com
16	Kenny	Reichel	64	Michelle6@gmail.com
17	Florian	Bashirian	47	Veda_Upton@gmail.com
18	Kimberly	Harvey	57	Angelo_Trantow@gmail.com
19	Clinton	Wilderman	38	Haven_Feest@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	Patsy	Reilly	60	Shari_Doyle@yahoo.com
1	Daryl	Wisoky	25	Tracey_Lubowitz1@hotmail.com
2	Elise	Beier	43	Robert90@yahoo.com
3	Jesus	Waters	25	Odell8@gmail.com
4	Hugh	Wiza	42	Regina_Friesen29@hotmail.com
5	Aliya	O'Keefe	59	Jarred.Brekke-Ruecker37@hotmail.com
6	Daisy	Mraz	53	Jalen.Pfeffer43@yahoo.com
7	Columbus	Thompson	44	Sandy_Haag39@hotmail.com
8	Angelica	Bogan	43	Lionel.Stokes@gmail.com
9	Deon	Hand	58	Ervin.Grady@gmail.com
10	Ryan	Yundt	45	Pedro_Wiegand95@gmail.com
11	Arlene	O'Conner	52	Violet_Smitham@gmail.com
12	Korbin	Jones	41	Will_Douglas94@hotmail.com
13	Trudie	Torp	53	Katlynn4@hotmail.com
14	Freeman	Watsica	55	Lacey55@gmail.com
15	Angelo	Stoltenberg	45	Scott.Auer91@hotmail.com
16	Carmen	Walker	27	Bruce_Torp-Ebert@gmail.com
17	Antonio	Armstrong	33	Bernadette.Parker@yahoo.com
18	Iris	Stamm	21	Hugh_Ryan@gmail.com
19	Laurie	Haley	22	Kristin.Barrows95@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	Marvin	Nader	20	Henderson61@gmail.com
1	Twila	Kuhlman	46	Kamren89@gmail.com
2	Kevin	Adams	53	Judy.Schmidt57@yahoo.com
3	Ari	Donnelly	21	Madyson47@hotmail.com
4	Irvin	Bednar	62	Scot59@gmail.com
5	Grace	Rowe	37	Dagmar46@hotmail.com
6	Bertrand	Goyette	41	Alyson89@hotmail.com
7	Axel	Mayer	59	Vince_Windler@yahoo.com
8	Gretchen	Hills	30	Nicholas.Mueller84@yahoo.com
9	Miller	Mayer	43	Brooks.Graham@gmail.com
10	Mackenzie	Stokes	65	Terrance_Sawayn3@gmail.com
11	Geovanni	Sporer	54	Debra.Buckridge@gmail.com
12	Renee	Oberbrunner	33	Newton_Quitzon85@hotmail.com
13	Nikita	Ziemann	50	Claud_Hand2@gmail.com
14	Carissa	Boyle	26	Tommy68@yahoo.com
15	Stacy	Considine	59	Clay_Baumbach60@gmail.com
16	Tia	Conroy	47	Alden.Williamson@yahoo.com
17	Ben	Trantow	48	Curt78@yahoo.com
18	Greg	Mante	50	Herbert10@hotmail.com
19	Jesse	Mertz	41	Howard86@gmail.com

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

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

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

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

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

Enable Row Selection

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

id	firstName	lastName	age	email
0	Patsy	Shields	46	Aimee.Keeling81@gmail.com
1	Sandy	Stroman	37	Bryan.Aufderhar@hotmail.com
2	Earl	Olson	26	Fritz_Kirlin36@gmail.com
3	Trystan	Feil	46	Shyanne58@hotmail.com
4	Tom	Doyle	64	Delbert35@yahoo.com
5	Theresia	Emmerich	18	Candelario83@hotmail.com
6	Abdiel	McDermott	43	Harold48@yahoo.com
7	Liam	Nader	44	Katelyn_Terry69@hotmail.com
8	Queen	Roberts	35	Kristy_Fay@yahoo.com
9	Heather	Murray	19	Luz.Robel76@gmail.com

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

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

Set Default Selected Rows

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

id	firstName	lastName	age	email
0	Stuart	Ebert	54	Sheldon55@yahoo.com
1	Rudy	Boyle	24	Arlene_Nicolas@yahoo.com
2	Roderick	Kreiger	20	Mckayla0@gmail.com
3	Sandra	Aufderhar-Lowe	39	Adela49@gmail.com
4	Kellie	Herzog	23	Shemar99@gmail.com
5	Herman	Watsica	55	Lamar95@yahoo.com
6	Freddie	Collier	36	Marian.Barton@hotmail.com
7	Federico	Ankunding	21	Lindsey.Muller28@hotmail.com
8	Jodie	Batz	59	Eddie.Miller@hotmail.com
9	Brad	Carroll	35	Lysanne_Rogahn67@hotmail.com

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

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

Enable Row Selection on Click

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

id	firstName	lastName	age	email
0	Sheldon	Hegmann-Nolan	28	Corey.Marvin@hotmail.com
1	Albin	Weissnat	56	Tad.Jerde@gmail.com
2	Alicia	Fay-Rolfson	29	Fredrick_Bernhard56@hotmail.com
3	Ilene	Conn	54	Stella_Marquardt@gmail.com
4	Mariana	Langosh	60	Julio.Towne@hotmail.com
5	Gabriel	Gibson	18	Donald.Will45@hotmail.com
6	Cali	Osinski	56	Everett_Kiehn@yahoo.com
7	Bonnie	Braun	30	Natalie_Lowe@gmail.com
8	Harrison	Kulas-Greenholt	39	Lennie_Medhurst53@gmail.com
9	Camryn	Lemke	60	Gust_Koelpin@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	Dedric	Lindgren	57	Ellen.Boyle@gmail.com
1	Wesley	Jaskolski	31	Gertrude_Homenick@hotmail.com
2	Janae	Jenkins	54	Kaela95@gmail.com
3	Jacqueline	Rogahn	41	Janice_Will29@yahoo.com
4	Levi	Stark	59	Haley44@hotmail.com
5	Erin	Connelly	44	Nedra.Renner65@yahoo.com
6	Max	Rice	32	Kristen79@yahoo.com
7	Faye	Gulgowski	26	Monique5@gmail.com
8	Emilio	Spinka	38	Edmond2@hotmail.com
9	Justen	Beier	65	Sammy.Fisher13@gmail.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	Joan	Price	21	Cordell.Little42@gmail.com
1	Bessie	Kertzmann	18	Lillian18@hotmail.com
2	Charlotte	Schmitt	24	Era69@yahoo.com
3	Wilbert	Witting	52	Maritza_Hoeger@yahoo.com
4	Wayne	Herman	57	Tonya.Thiel79@yahoo.com
5	Vicky	Aufderhar	39	Jayme10@hotmail.com
6	Briana	Morar	33	Carl_Haley40@hotmail.com
7	Elinor	Mayert	50	Roel75@gmail.com
8	Lenore	Koepp	61	Danny_Wehner55@yahoo.com
9	Kimberly	Roberts	49	Jacey_Schimmel58@gmail.com

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

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

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

Control Row Selection

id	firstName	lastName	age	email
0	Chyna	Sauer	33	Kristina.Trantow67@hotmail.com
1	Tara	Mueller	34	Angelica.Lang76@gmail.com
2	Eldridge	Hilpert	50	Adah.Sauer52@gmail.com
3	Federico	Bergstrom	24	Emelie16@yahoo.com
4	Annetta	Ortiz	31	Kayla68@hotmail.com
5	Crystal	Swift	24	Eddie_Hoeger@yahoo.com
6	Maida	Christiansen	49	Michele.Lesch@hotmail.com
7	Ella	Hyatt	56	Oliver34@hotmail.com
8	Tiara	Price	64	Frederick.Lowe6@yahoo.com
9	Phillip	Haag-Streich	37	Eddie_Schultz19@hotmail.com

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

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

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

Use Filter

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

id	firstName	lastName	age	email
0	Marilou	Bogisich	56	Kathryn.Glover@yahoo.com
1	Breana	Tillman	37	Neil_Cruickshank@yahoo.com
2	Sara	Barrows	38	Myrna_Oberbrunner58@hotmail.com
3	Rebecca	Marvin	20	Blanca.Fadel59@gmail.com
4	Bartholome	Orn	62	Chelsey17@hotmail.com
5	Antonette	Osinski	37	Delphia_Larson42@yahoo.com
6	Kenny	McGlynn	34	Ari_Schumm56@yahoo.com
7	Dawn	Wiza	21	Kylie.Toy@yahoo.com
8	Sonia	Morar	42	Noelia64@yahoo.com
9	Chanel	DuBuque	59	Elinore_Trantow@yahoo.com

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

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

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

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

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

Set Default Filter

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

id	firstName	lastName	age	email

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	Juana	Wilderman	25	Hunter.Abernathy@gmail.com
1	Beth	Hettinger	48	Collin_Funk@gmail.com
2	Mervin	Glover	50	Wilson_Kemmer44@yahoo.com
3	Katelynn	Hammes	42	Edna_Davis6@hotmail.com
4	Nathanial	Cummings	19	Pam21@hotmail.com
5	Jasen	Johnston	31	Nakia_Lehner28@yahoo.com
6	Debbie	Herman	61	Alma.Davis81@hotmail.com
7	Sue	Kessler	58	Tommy.Lockman@hotmail.com
8	Doris	Schimmel	37	Mateo_Rowe12@yahoo.com
9	Charles	Ullrich	49	Lilian_Kovacek@hotmail.com

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

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

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

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

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

Enable Column Resizing

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

id	firstName	lastName	age	email
0	Mozelle	Stiedemann	37	Della_Romaguera@gmail.com
1	Marilyne	Wisozk	47	Brody_Ortiz9@gmail.com
2	Elvie	Pfannerstill	22	Broderick10@yahoo.com
3	Armando	Okuneva	36	Vergie.McClure@yahoo.com
4	Dawson	Ebert	33	Emelia_Raynor97@hotmail.com
5	Jennifer	Treutel	20	Celestine_Lynch@hotmail.com
6	Lois	Corkery	63	Palma62@gmail.com
7	Annie	Swaniawski	63	Brooklyn_Hartmann57@hotmail.com
8	Ida	Casper	18	Fay.Orn@yahoo.com
9	Sonya	Tremblay	28	Rodger_Trantow-Howell98@yahoo.com

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

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

Change Column Resizing Method

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

id	firstName	lastName	age	email
0	Kristopher	Hilll	20	Clifton9@yahoo.com
1	Waylon	Funk	26	Janie92@hotmail.com
2	Adam	Volkman	65	Aiyana.Schneider@hotmail.com
3	Phillip	Gleichner	41	Marta_Casper@hotmail.com
4	Mac	Leuschke	65	Madisyn88@gmail.com
5	Santos	Auer	27	Oceane.Jenkins@gmail.com
6	Noble	Oberbrunner	26	Geoffrey.Roob-Braun13@yahoo.com
7	Webster	Kuphal	31	Bertha.Mertz@hotmail.com
8	Myron	Heidenreich	36	Amy.Hagenes@hotmail.com
9	Teri	Hintz	44	Susan_Boehm-Wisozk@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.