Table

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

id	firstName	lastName	age	email
0	Marcos	Gutmann	18	Green58@yahoo.com
1	Randal	Schoen	64	Ford80@yahoo.com
2	Stephanie	Cremin	32	Grant.Larkin78@hotmail.com
3	Aubree	Connelly	20	Amir_Toy63@hotmail.com
4	Dashawn	Weissnat	52	Judson12@gmail.com
5	Ivan	Christiansen	47	Helga.Lesch43@gmail.com
6	Andy	Bauch	49	Opal96@hotmail.com
7	Alejandrin	Cole	41	Dion43@yahoo.com
8	Jeanie	Shanahan	64	Perry40@gmail.com
9	Antoinette	Sporer	40	Andre.Kshlerin@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	Arlie	Kovacek	43	Carmine42@yahoo.com
1	Alan	MacGyver	20	Tiara86@hotmail.com
2	Bernadette	Zieme	21	Esther_Greenholt58@hotmail.com
3	Celia	Goldner	64	Gladys_Williamson32@yahoo.com
4	Rylan	Donnelly	20	Daisy_Hoeger90@gmail.com
5	Annamae	Waelchi	23	Julio65@yahoo.com
6	Sean	Kunze	47	Keshawn.Mayer@gmail.com
7	Cleveland	Johnston	44	August78@hotmail.com
8	Phillip	Streich-Schoen	45	Herbert_Franey@gmail.com
9	Lorna	Gleason	27	Junius.Pacocha@yahoo.com

id	firstName	lastName	age	email
0	Arlie	Kovacek	43	Carmine42@yahoo.com
1	Alan	MacGyver	20	Tiara86@hotmail.com
2	Bernadette	Zieme	21	Esther_Greenholt58@hotmail.com
3	Celia	Goldner	64	Gladys_Williamson32@yahoo.com
4	Rylan	Donnelly	20	Daisy_Hoeger90@gmail.com
5	Annamae	Waelchi	23	Julio65@yahoo.com
6	Sean	Kunze	47	Keshawn.Mayer@gmail.com
7	Cleveland	Johnston	44	August78@hotmail.com
8	Phillip	Streich-Schoen	45	Herbert_Franey@gmail.com
9	Lorna	Gleason	27	Junius.Pacocha@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	Georgianna	Wilderman	38	Edna83@gmail.com
1	Jonathon	Wiza	51	Helen_Swift@gmail.com
2	Myles	Schulist	29	Alberto97@hotmail.com
3	Tomas	White	56	Larissa.Bayer52@hotmail.com
4	Marlin	Huel	45	Kristoffer_Jacobson@yahoo.com
5	Kianna	Nader	42	Axel.Bogisich@gmail.com
6	Jeffery	Mayert	32	Karine65@yahoo.com
7	Lynne	Armstrong-Kuhlman	52	Deon_Kerluke33@hotmail.com
8	Thomas	Schoen	26	Garland.Osinski@yahoo.com
9	Carmela	Breitenberg-Renner	56	Makayla80@gmail.com

id	firstName	lastName	age	email
0	Georgianna	Wilderman	38	Edna83@gmail.com
1	Jonathon	Wiza	51	Helen_Swift@gmail.com
2	Myles	Schulist	29	Alberto97@hotmail.com
3	Tomas	White	56	Larissa.Bayer52@hotmail.com
4	Marlin	Huel	45	Kristoffer_Jacobson@yahoo.com
5	Kianna	Nader	42	Axel.Bogisich@gmail.com
6	Jeffery	Mayert	32	Karine65@yahoo.com
7	Lynne	Armstrong-Kuhlman	52	Deon_Kerluke33@hotmail.com
8	Thomas	Schoen	26	Garland.Osinski@yahoo.com
9	Carmela	Breitenberg-Renner	56	Makayla80@gmail.com

id	firstName	lastName	age	email
0	Georgianna	Wilderman	38	Edna83@gmail.com
1	Jonathon	Wiza	51	Helen_Swift@gmail.com
2	Myles	Schulist	29	Alberto97@hotmail.com
3	Tomas	White	56	Larissa.Bayer52@hotmail.com
4	Marlin	Huel	45	Kristoffer_Jacobson@yahoo.com
5	Kianna	Nader	42	Axel.Bogisich@gmail.com
6	Jeffery	Mayert	32	Karine65@yahoo.com
7	Lynne	Armstrong-Kuhlman	52	Deon_Kerluke33@hotmail.com
8	Thomas	Schoen	26	Garland.Osinski@yahoo.com
9	Carmela	Breitenberg-Renner	56	Makayla80@gmail.com

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

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size, index) => (
        <Table
          key={index}
          size={size}
          columns={columns}
          data={data}
          withScrollArea
        />
      )}
    </For>
  </VStack>
)

Change Color Scheme

id	firstName	lastName	age	email
0	Haylee	Frami	36	Marianne.Hodkiewicz18@hotmail.com
1	Joyce	Schmidt	52	Zula_Casper23@gmail.com
2	Kelsi	Kutch	48	Veda.Turner@gmail.com
3	Gabe	Nicolas	28	Julie99@hotmail.com
4	Diane	Rowe	59	Marie40@hotmail.com
5	Martin	Klein	64	Stan32@hotmail.com
6	Tamia	Kertzmann	60	Chris_Botsford20@hotmail.com
7	Norris	O'Hara	40	Dianna63@gmail.com
8	Manuel	Upton-Schuster	59	Shanelle.Beatty81@gmail.com
9	Berneice	Lebsack	33	Karolann.Rath@hotmail.com

id	firstName	lastName	age	email
0	Haylee	Frami	36	Marianne.Hodkiewicz18@hotmail.com
1	Joyce	Schmidt	52	Zula_Casper23@gmail.com
2	Kelsi	Kutch	48	Veda.Turner@gmail.com
3	Gabe	Nicolas	28	Julie99@hotmail.com
4	Diane	Rowe	59	Marie40@hotmail.com
5	Martin	Klein	64	Stan32@hotmail.com
6	Tamia	Kertzmann	60	Chris_Botsford20@hotmail.com
7	Norris	O'Hara	40	Dianna63@gmail.com
8	Manuel	Upton-Schuster	59	Shanelle.Beatty81@gmail.com
9	Berneice	Lebsack	33	Karolann.Rath@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	Jodi	Roob	46	Joyce.Auer-Mohr99@gmail.com
1	Ben	Spinka	52	Kaley_Gerhold@hotmail.com
2	Will	Towne	63	Verna.Dibbert79@gmail.com
3	Naomi	Gibson-Leannon	28	Kara.Stark43@hotmail.com
4	Nichole	Bogan	52	Nathan41@hotmail.com
5	Faustino	Runte	61	Donnie97@gmail.com
6	Celia	Marks	18	Antwon.Herzog51@yahoo.com
7	Eduardo	Runolfsdottir	47	Luke.Fadel89@hotmail.com
8	Wyatt	Swift	21	Ginger_Marvin52@hotmail.com
9	Carter	Powlowski	26	Arnulfo.Bergnaum@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	Penny	Will	36	Darryl78@yahoo.com
1	Amie	Hayes	39	Winifred_Larkin@gmail.com
2	Melinda	Sawayn	51	Dean7@yahoo.com
3	Jevon	Pouros	19	Traci.Predovic33@yahoo.com
4	Ransom	Torp	44	Sylvia_Gibson@yahoo.com
5	Harmony	Rogahn	19	Christelle.OConner@yahoo.com
6	Jacquelyn	Johnson	56	Tanya_Jast12@hotmail.com
7	Saul	Raynor	51	Lafayette.Bernhard39@hotmail.com
8	Eula	King	63	Joey_Jaskolski36@yahoo.com
9	Kathryne	Wiegand	33	Sylvester_Olson42@hotmail.com

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

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

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

id	firstName	lastName	age	email
0	Ethelyn	Kerluke	45	Darby61@yahoo.com
1	Kristine	Schiller	20	Marcus_Volkman98@gmail.com
2	Kristie	Gottlieb	18	Karine_Casper89@gmail.com
3	Hadley	Kunze	42	Laura.Fay16@gmail.com
4	Ricky	Lueilwitz	41	Laura91@hotmail.com
5	Sherri	Gulgowski	18	Reba.Cruickshank92@yahoo.com
6	Wendell	Maggio	51	Ana_OConnell@gmail.com
7	Warren	Wintheiser	47	Andres.Gutmann60@gmail.com
8	Pablo	Heidenreich	18	Anahi98@gmail.com
9	Brody	Johnson	41	Melody.Runolfsdottir@gmail.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	Erica	Hintz	54	Betty_Schuppe26@gmail.com
1	Homer	Larkin	22	Jamir88@gmail.com
2	Harriet	Lakin	49	Tiffany.Gleason41@yahoo.com
3	Tina	Dooley	18	Llewellyn_Spinka@gmail.com
4	Dominick	Prosacco	19	Claude_Conroy-White@gmail.com
5	Kaleigh	Kirlin	60	Annette.Schulist@hotmail.com
6	Aniya	Waelchi	56	Jake.Sawayn@gmail.com
7	Marjorie	Runte	31	Eileen.Shields@hotmail.com
8	Celia	Larkin	20	Carlo.Mosciski@gmail.com
9	Sonia	Runolfsdottir	55	Reed35@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	Jackson	DuBuque	61	Curtis.Hayes@yahoo.com	756.967.1918 x509	admin	inactive	2/19/2026	12/7/2025
1	Glenn	Nicolas	27	Rodolfo.Kunze10@gmail.com	437-602-3866	admin	inactive	9/4/2025	11/15/2025
2	Donna	Reichel	36	Ana24@hotmail.com	279.349.4018	user	active	11/9/2025	4/22/2026
3	Jimmy	Ortiz	53	Wilford5@gmail.com	535.936.2876 x244	admin	active	5/18/2025	4/9/2026
4	Tina	Okuneva	26	Tiffany.Pollich@gmail.com	544.807.2997 x930	admin	active	9/4/2025	1/20/2026
5	Madge	Grimes	51	Irma_Runolfsson24@gmail.com	977-419-6331	user	inactive	7/22/2025	2/28/2026
6	Salvador	Fadel	40	Jacqueline_Nitzsche98@gmail.com	498.622.8295	user	active	10/15/2025	8/13/2025
7	Daphnee	Balistreri	50	Angela.Hermann12@hotmail.com	618-968-3677 x045	admin	inactive	12/21/2025	1/11/2026
8	Baylee	Marks	47	Nasir_Tillman49@hotmail.com	1-309-647-0824 x494	admin	inactive	5/30/2025	4/27/2026
9	Amos	Shanahan	25	Florian17@gmail.com	811.223.3936 x684	admin	active	1/21/2026	1/2/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	Dorris	Wilderman	51	Jabari.Nolan30@yahoo.com
1	Adolf	Kshlerin	38	Santos.Lebsack0@gmail.com
2	Brenda	O'Connell	44	Tyrell.Schowalter@hotmail.com
3	Lola	Zieme	57	Vaughn6@gmail.com
4	Belinda	Rippin	25	Nels12@yahoo.com
5	Caroline	Purdy	55	Alec.DuBuque@gmail.com
6	Elva	Prohaska-Zieme	56	Patti_Nienow73@hotmail.com
7	Alysa	Denesik	56	Melanie83@yahoo.com
8	Hattie	Sipes	50	Camryn.Herzog@gmail.com
9	Chesley	Bahringer	35	Jana94@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	Earnest	Rempel	48	Geneva_OKeefe25@hotmail.com
1	Kirk	Dach	43	Douglas.Muller@hotmail.com
2	Darrin	Schinner	38	Gerda_Schumm@hotmail.com
3	Nakia	Koss	34	Sallie_Turner76@hotmail.com
4	Albert	Gerlach	51	Elwin_VonRueden35@gmail.com
5	Jacquelyn	Moen	37	Beverly46@gmail.com
6	Wilber	Bauch	23	Saul10@hotmail.com
7	Adrienne	Jacobs	20	Bradford_OHara@hotmail.com
8	Randy	Ortiz	49	Bryan33@hotmail.com
9	Penelope	Raynor	48	Marta.Borer9@gmail.com
id	firstName	lastName	age	email
	name		age	email
	user

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

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

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

id	firstName	lastName	age	email
0	Oceane	Lubowitz	27	Fritz.Skiles-Boyer@yahoo.com
1	Edith	Hickle	30	Sophie59@hotmail.com
2	Hanna	Fahey	57	Rylan90@gmail.com
3	Alexander	Schroeder-Lebsack	31	Joseph40@hotmail.com
4	Stacy	O'Hara	20	Laron_Johnson@gmail.com
5	Geraldine	Kilback	20	Beverly40@gmail.com
6	Darby	Lebsack	44	Antonia.Hayes0@gmail.com
7	Lynda	O'Conner	39	Dylan_Kassulke51@gmail.com
8	Tommie	Schmeler	36	Doreen_Cormier@hotmail.com
9	Lowell	Mayer	43	Anita_Satterfield@gmail.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	Agustin	Klein	44	Alex94@gmail.com
1	Eliane	Bartoletti	39	Connie16@yahoo.com
2	Nicolas	Olson	51	Ella30@gmail.com
3	Rosemarie	Friesen	25	Merle73@gmail.com
4	Mac	Lakin	60	Kay_Huel@yahoo.com
5	Virgil	Hudson	32	Lincoln.Reynolds77@gmail.com
6	Garry	Williamson	28	Sarina_Wilderman@hotmail.com
7	Pam	O'Reilly	45	Lyla.Zboncak@yahoo.com
8	Tammy	Bayer	43	Roberto_Hilll84@yahoo.com
9	Addison	Mraz	25	Emmet.Schroeder@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	Eloy	Bogan	29	Mike82@gmail.com
1	Virgil	Russel	54	Dillon.Pacocha98@hotmail.com
2	Enid	Mayert	58	Lester.Wehner73@hotmail.com
3	Angelo	Franey	39	Roderick_Kutch19@yahoo.com
4	Berta	Shields	61	Mauricio_Bednar@hotmail.com
5	Shelley	Huel-Medhurst	54	Violet74@gmail.com
6	Destany	Hane	27	Julian89@yahoo.com
7	Joel	Runte	65	Juston.Barton54@gmail.com
8	Xander	Beier	56	Geo_Maggio35@yahoo.com
9	Austin	Mayer	38	Bertha20@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	Luz	Labadie	64	Geo.Greenfelder@yahoo.com
1	Catharine	Hyatt	33	Blanca74@gmail.com
2	Calvin	Schmeler	60	Monte70@gmail.com
3	Charles	Cronin	25	Boyd.Leannon@yahoo.com
4	Connie	Dare	57	Ransom_Lang61@hotmail.com
5	Aubree	Kulas	23	Faith53@hotmail.com
6	Elyssa	Wolf-McLaughlin	25	Conor.Stiedemann85@hotmail.com
7	Johann	Beatty	31	Joann82@yahoo.com
8	Christ	Konopelski-Cremin	41	Leland99@yahoo.com
9	Branson	Schneider	34	Ellsworth.Grant@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	Winston	Toy	59	Zoie93@yahoo.com
3	Mina	Satterfield	48	Jaren.Marks91@hotmail.com
7	Esta	Lockman	48	Cole53@hotmail.com
1	Dixie	Langworth	43	Carson29@hotmail.com
2	Alfred	Bruen	43	Dolores_Beahan@gmail.com
5	Alma	Sanford	39	Micaela13@yahoo.com
6	Gardner	Bayer	39	Jermain_Raynor@hotmail.com
9	Leopold	McKenzie	35	Clifford_Schuppe@gmail.com
4	Antoinette	MacGyver	31	Deanna69@hotmail.com
0	Maribel	Turner	23	Rylan.Zieme@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	Dave	Jenkins	39	Joanna59@hotmail.com
1	Connie	Ebert	46	Homer_Breitenberg98@gmail.com
2	Laurel	Roberts	47	Dannie_Barrows@yahoo.com
3	Flavie	Collier	61	Miranda_Heaney67@gmail.com
4	Doris	Volkman	25	Leo.Parker@yahoo.com
5	Boyd	Stokes	48	Deven61@hotmail.com
6	Karl	Rempel	57	Tristian.OReilly38@gmail.com
7	Jazmyne	Kiehn	59	Warren46@hotmail.com
8	Quinten	Beier	46	Ruben_Senger@yahoo.com
9	Kristine	Rogahn	22	Daphney_Ward@gmail.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	Tomas	Schamberger	61	Mae73@gmail.com
1	Rosa	Jacobs	51	Okey61@gmail.com
2	Lorine	Bins	46	Clementina_Mante62@yahoo.com
3	Lucille	Kassulke	62	Kariane_Kessler@hotmail.com
4	Ricardo	Sauer	39	Marlene.Hegmann24@hotmail.com
5	Brittany	Murazik	51	Lupe.Stanton44@gmail.com
6	Erica	Strosin	29	Franz_Braun2@hotmail.com
7	Annie	Russel	31	Sue22@hotmail.com
8	Jerrod	Pfeffer	21	Darryl.Tremblay41@hotmail.com
9	Wilfrid	Will	39	Bonnie.Jacobson93@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	Sidney	Stamm	21	Rebecca.Sipes@gmail.com
1	Meredith	Paucek	21	Emmett2@hotmail.com
2	Aniyah	Murray	65	Mike31@gmail.com
3	Nichole	McKenzie	40	Loren.Adams39@hotmail.com
4	Monique	Denesik-Ferry	42	Albina_McKenzie82@yahoo.com
5	Leo	Rowe	45	Robyn_Grimes@hotmail.com
6	Stella	Stark-Legros	38	Braxton46@hotmail.com
7	Geraldine	Reilly	24	Braeden.Borer@hotmail.com
8	Myrtis	Reinger	49	Ettie30@gmail.com
9	Broderick	Bartoletti	20	Lucile61@hotmail.com

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

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

Manual Sorting

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

id	firstName	lastName	age	email
0	Wilbur	Von	40	Amanda57@hotmail.com
1	Aglae	Tremblay	49	Stacy.MacGyver92@yahoo.com
2	Merle	Becker	24	Austin_Friesen0@hotmail.com
3	Ora	Abernathy	51	Luther_Kulas64@hotmail.com
4	Van	Kris	44	Antonette58@gmail.com
5	Britney	Hoeger	40	Dejuan78@gmail.com
6	Cassandre	Schamberger	19	Darryl81@hotmail.com
7	Sam	Jones	35	Leigh.Gutkowski@gmail.com
8	Darrell	Morar	57	Corene21@yahoo.com
9	Hattie	O'Conner	38	Sheryl43@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	Shanel	Cummerata	21	Ann_Trantow96@hotmail.com
1	Ulices	Welch	27	Guillermo50@gmail.com
2	Merritt	Zboncak-Crona	51	Madison.Heaney@gmail.com
3	Abdiel	Grant	58	Lauriane12@hotmail.com
4	Annabel	McDermott-Bosco	32	Katherine.Wuckert@hotmail.com
5	Mattie	Nienow	29	Matt_Jerde@yahoo.com
6	Jewell	Smitham	44	Pauline69@gmail.com
7	Delia	Cartwright	38	Brain.Dickinson33@gmail.com
8	Jayda	Gutkowski	48	Giovanna54@gmail.com
9	Reuben	Lind	34	Lowell94@yahoo.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Clementina	Connelly	28	Norman_Runolfsdottir69@hotmail.com
1	Chaya	Batz	63	Kirstin.Walker@gmail.com
2	Eloise	Muller	31	Alfredo9@yahoo.com
3	Juana	Hintz	56	Everett30@yahoo.com
4	Darin	Halvorson	28	Albertha_Harber93@hotmail.com
5	Tony	Miller	21	Elias64@gmail.com
6	Harriet	Roberts	58	Alvin.Farrell-Johnson18@gmail.com
7	Amira	Labadie	53	Shari.Hodkiewicz52@hotmail.com
8	Corine	Kunze	23	Brook.Cremin@gmail.com
9	Mertie	Gulgowski	34	Felicita.Cremin@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	Gia	Purdy	29	Alton66@hotmail.com
1	Nathaniel	Baumbach	54	Montana_Von54@gmail.com
2	Danielle	Metz	59	Parker.Parker@yahoo.com
3	Cyril	Beer	20	Tami_Lemke38@yahoo.com
4	Lowell	Larson	48	Gerardo.Ledner@hotmail.com
5	Lindsey	Bernier	42	Markus71@yahoo.com
6	Flossie	Daugherty	45	Timothy_Stanton40@hotmail.com
7	Bethel	Witting	31	Amelia84@gmail.com
8	Carmen	Kertzmann	39	Marty.Kassulke@yahoo.com
9	Tracey	Feest	18	Ray.McCullough12@gmail.com
10	Roberta	O'Kon	57	Doreen_Wisozk@yahoo.com
11	Abel	Altenwerth-Abshire	61	Gary73@hotmail.com
12	Mathew	Sauer	28	Chaim31@hotmail.com
13	Penny	Harvey	33	Ulises39@hotmail.com
14	Charlie	Bechtelar	47	Yolanda.Purdy@yahoo.com
15	Dean	Cremin	19	Danyka66@yahoo.com
16	Shania	Sawayn	32	Kelsi_Beer72@yahoo.com
17	Isaac	Larson	57	Jerome98@hotmail.com
18	Emmett	Quitzon	31	Humberto.Jenkins19@yahoo.com
19	Lorenzo	Cummings	29	Adaline19@gmail.com

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

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

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

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

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

Set Default Page Index and Page Size

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

id	firstName	lastName	age	email
10	Wanda	Pfannerstill	43	Roberto_Schoen@yahoo.com
11	Stephany	Champlin	32	Eula.Dietrich43@yahoo.com
12	Dovie	Murray	25	Valentin1@yahoo.com
13	Traci	Herzog	45	Stewart.Wolff83@yahoo.com
14	Wilburn	Kessler	59	Quincy.Koch82@yahoo.com
15	Clarabelle	Collier	37	Murphy_Kling26@yahoo.com
16	Mike	Hilpert	63	Terence.Maggio22@hotmail.com
17	Shaun	Langworth	64	Alberto_Glover@hotmail.com
18	Shawn	Bernier	53	Dane_Sporer78@gmail.com
19	Florencio	Wiza	20	Jacquelyn76@gmail.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	Ted	Hettinger	55	Linda_Bernier28@yahoo.com
1	Alejandrin	Kulas	55	Ryley31@hotmail.com
2	Otho	Feest	58	Reed52@yahoo.com
3	Rosina	Zulauf	21	Nelson.Conn58@yahoo.com
4	Markus	Bergstrom	39	Lorna_Welch98@gmail.com
5	Grady	Wilkinson	54	Lance_Rohan-Effertz53@gmail.com
6	Pauline	Hermann	36	Winston.Goldner@yahoo.com
7	Shelly	Morar	53	Moriah.Steuber77@yahoo.com
8	Tate	Dibbert	57	Janie2@yahoo.com
9	Meredith	Kirlin	64	Alejandro_OKeefe37@hotmail.com
10	Cindy	Daniel	37	Luis.Barrows81@yahoo.com
11	Ivan	Morar	28	Ryan.Lockman84@yahoo.com
12	Kenny	Ledner	28	Dejuan2@gmail.com
13	Angelo	MacGyver	30	Adeline.Champlin0@yahoo.com
14	Kayla	Homenick	40	Alexander7@gmail.com
15	Christine	Turcotte	33	Randolph_Mann@yahoo.com
16	Bettye	Cassin	54	Cleora.Hamill@gmail.com
17	Chesley	Waters	46	Abbigail29@hotmail.com
18	Jerry	Gutmann	44	Scarlett89@hotmail.com
19	Lyle	Hills	59	Trisha_Abshire51@yahoo.com

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

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

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

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

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

Control Pagination

id	firstName	lastName	age	email
0	Alicia	Gutmann	61	Adrianna.Franey-Gutkowski42@yahoo.com
1	Hermina	Jacobson	50	Traci24@gmail.com
2	Clarence	Leffler	51	Kieran28@hotmail.com
3	Jasper	Rau	52	Chester_Kub91@gmail.com
4	Guido	Harvey	35	Micaela_Reinger@hotmail.com
5	Lance	Effertz	34	Arthur_Durgan-Walker79@hotmail.com
6	Monroe	Beahan	23	Lexi68@hotmail.com
7	Mitchell	Wilkinson-Rice	25	Yvonne10@yahoo.com
8	Franklin	Keeling	60	Loraine_Weissnat25@yahoo.com
9	John	Mraz	40	Jerrell_Hagenes36@yahoo.com
10	Dawn	Crist	42	Vesta95@yahoo.com
11	Cecelia	Wisozk	50	Angie_Dicki@hotmail.com
12	Joana	Wyman-Buckridge	28	Miriam_Bernhard@gmail.com
13	Rick	Grady	61	Kelley.Schultz@gmail.com
14	Dustin	Mitchell	34	Ida.Kris91@hotmail.com
15	Troy	Parker	25	Jerry_Waters@yahoo.com
16	Ana	Kris	44	Ira_Wolf@gmail.com
17	Rebecca	Mann	34	Ann_Bogisich98@hotmail.com
18	Adrien	Quitzon	25	Lloyd94@yahoo.com
19	Laverna	Quitzon	57	Jerod.Wehner59@hotmail.com

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

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

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

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

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

Enable Row Selection

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

id	firstName	lastName	age	email
0	Ernest	Jones	28	Jaeden_Torp@gmail.com
1	Adella	Kuhic	48	Evan77@gmail.com
2	Lola	MacGyver	57	Kayden.Fahey@hotmail.com
3	Henry	Marks	30	Viva_Gibson@yahoo.com
4	Heaven	Block	22	Reina.Predovic38@yahoo.com
5	Eileen	Kshlerin	51	Erik_Langosh@gmail.com
6	Jocelyn	Fahey	35	Charlotte1@gmail.com
7	Jerome	Schaden	56	Johnny_Yundt33@gmail.com
8	Cary	Weber	38	Beverly.Dach98@hotmail.com
9	Chad	Gutkowski	63	Kyler.Hegmann-Wehner58@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	Emanuel	Predovic	47	Christian.Collins@hotmail.com
1	Richard	Mayert	36	Kathryn19@gmail.com
2	Aniya	Skiles	62	Salvatore_Durgan12@hotmail.com
3	Derrick	Pagac	56	Darion90@hotmail.com
4	Vergie	Hammes	51	Leland.Mayer@yahoo.com
5	Freda	Marquardt	43	Flora32@yahoo.com
6	Tricia	Windler	18	Alison.Kuvalis@gmail.com
7	Destinee	Gorczany	44	Janae.Miller32@hotmail.com
8	Josh	Wyman	33	Elyssa50@yahoo.com
9	Louie	Shields	46	Dudley_Brakus@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	Kaley	O'Hara	47	Fred_Hamill31@hotmail.com
1	Winifred	Jacobs	21	Sophia.Daugherty19@hotmail.com
2	Kirk	McLaughlin	60	Eliezer.Nicolas@gmail.com
3	Adolphus	Stiedemann	52	Oda_Nikolaus@gmail.com
4	Cooper	Sanford	43	Russell.Hirthe8@hotmail.com
5	Tiara	Abernathy	37	Eriberto.Schimmel@yahoo.com
6	Anne	Flatley	54	Euna.Auer25@yahoo.com
7	Krystal	Beahan	38	Wendell49@hotmail.com
8	Kellie	Bashirian	57	Darlene22@gmail.com
9	Kaylin	Emard	57	Rudolph34@yahoo.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	Marlen	Thompson	65	Kailyn60@hotmail.com
1	Christine	Haag	21	Jaunita28@yahoo.com
2	Hortense	Boehm	20	Dwayne.Shanahan59@yahoo.com
3	Ian	Orn	64	Billie.Hagenes15@gmail.com
4	Thea	Kohler	49	Alanis96@hotmail.com
5	Brigitte	Lesch	27	Micah_Doyle39@gmail.com
6	Loretta	Harber	55	Jayme57@yahoo.com
7	Alexandra	Koss	43	Susie_MacGyver-Weimann12@yahoo.com
8	Marc	Armstrong	39	Ross.Miller@yahoo.com
9	Alphonso	Fritsch	42	Sidney.Lind24@yahoo.com

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

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

Disable Row

To disable a row, set enableRowSelection to a function that returns a boolean.

id	firstName	lastName	age	email
0	Dee	Jenkins	42	Reynold_Tillman@hotmail.com
1	Benny	Collier	21	Olive.Rolfson@gmail.com
2	Bobbie	Becker	36	Faye_Wisozk@hotmail.com
3	Moshe	Becker-Cole	18	Debbie.Carter@gmail.com
4	Juanita	McLaughlin	49	Carole_Yundt33@hotmail.com
5	Dawn	Toy	57	James_Altenwerth96@hotmail.com
6	Jennie	Lehner-Beahan	22	Silvia33@hotmail.com
7	Deshawn	Brakus	22	Floyd_Rempel-Strosin96@hotmail.com
8	Mario	McCullough	21	Larissa6@hotmail.com
9	Zula	Bergstrom	51	Kelley_Spinka46@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	Tatum	Smitham	25	Tasha48@gmail.com
1	Sandrine	Fritsch	38	Luigi.Grady69@yahoo.com
2	Julian	Wilkinson	27	Benjamin.Kassulke@yahoo.com
3	Oleta	Lockman	65	Angela.Herman@hotmail.com
4	Jean	Ankunding	53	Hal.Greenfelder98@hotmail.com
5	Estel	Steuber	29	Greyson.Tremblay46@gmail.com
6	Maegan	Reilly	56	Jolie24@gmail.com
7	Maybell	Kozey	27	Noble_Swift@hotmail.com
8	Lori	Corkery	41	Ora_Blanda77@yahoo.com
9	Geneva	Crona	61	Hermann_Tremblay65@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	Viola	Jaskolski	46	Vernice.Von@hotmail.com
1	April	Dibbert	20	Ryan.Hilpert57@yahoo.com
2	Giles	Fritsch	61	Kaya.Cole-Cormier67@gmail.com
3	Elijah	Howe	56	Shelley.Kovacek@hotmail.com
4	Elias	Skiles	39	Lyla_Abshire@hotmail.com
5	Lindsey	Swaniawski	57	Domenico.Schmidt@hotmail.com
6	Nina	Stroman-McCullough	35	Ivory77@gmail.com
7	Ilene	Hyatt	56	Rosalyn81@gmail.com
8	Joann	DuBuque	38	Myrtle74@hotmail.com
9	Chelsea	Predovic	54	Shelley_Nitzsche@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
3	Kendra	Shanahan	19	Gussie13@gmail.com
4	Dawn	Bernier	60	Gordon.Mueller1@gmail.com
8	Tad	Yost	41	Emmett_Bashirian-Goyette75@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	Tate	Lemke	50	Loy_Wisoky30@yahoo.com
1	Walter	Bernier	42	Julian.Casper78@gmail.com
2	Steve	Bins	29	Marilyn.Abshire68@yahoo.com
3	Renee	Heaney	41	Molly.Ziemann@yahoo.com
4	Kaylie	Wilderman	28	Horace54@yahoo.com
5	Chad	Rau	65	Kirk39@hotmail.com
6	Francisco	Kertzmann	25	Dianne_Thompson@hotmail.com
7	Christop	Rohan	56	Margarette_OConnell@hotmail.com
8	Darien	Blanda	39	Ben.Leuschke70@hotmail.com
9	Kurt	Sawayn	54	Garry.Rath46@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	Madelynn	Yundt	31	Bryant_Wiza55@hotmail.com
1	Wilton	Lueilwitz	45	Estelle1@hotmail.com
2	Jose	Lesch	63	Lauretta.Schultz@gmail.com
3	Hubert	Weissnat	65	Christy_Quigley@yahoo.com
4	Tamara	Feeney	40	Mathew.Kuhn@gmail.com
5	Marie	Wilderman	49	Flavie_Stark69@hotmail.com
6	Donna	Ankunding	35	Andrea_Schumm66@yahoo.com
7	Debbie	Olson	59	Corey.Wehner@gmail.com
8	Thalia	Gorczany	56	Bella.Hoppe@yahoo.com
9	Timmy	Dietrich	46	Yvonne4@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	Stephanie	Senger	43	Phillip36@hotmail.com
1	Veronica	Hoeger	61	Torrey_Yundt@hotmail.com
2	Sidney	Schroeder	46	Marion.McLaughlin@gmail.com
3	Christopher	Sanford	38	Diana_Durgan54@yahoo.com
4	Marshall	Gislason	61	Myriam_Kuvalis@hotmail.com
5	Perry	Thiel	36	Katarina_Sauer@yahoo.com
6	Kaleb	Huel	29	Grayson91@hotmail.com
7	Daryl	Hessel	49	Kenna_Schamberger@gmail.com
8	Alessandro	Greenholt	46	Ashton34@yahoo.com
9	Tim	Kovacek	50	Emanuel50@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.