Table

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

id	firstName	lastName	age	email
0	Roosevelt	Bednar	31	Violet.Kiehn17@gmail.com
1	Savanna	Torp	34	Gideon.Parker60@yahoo.com
2	Clementina	Kiehn	34	Harley4@hotmail.com
3	Jayda	Tremblay	41	Makenzie41@hotmail.com
4	Stella	Torphy	39	Alize_Ledner54@hotmail.com
5	Demetris	Ruecker	45	Brisa_Rath@yahoo.com
6	Marlin	Klein	65	Mohammed.Reinger4@gmail.com
7	Micah	Gorczany	45	Meagan_Lowe92@yahoo.com
8	Kaya	Ebert	44	Stephania13@gmail.com
9	Fabian	Heidenreich	39	Francesca_Kiehn@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	Werner	Bednar-Runolfsdottir	49	Theodore53@hotmail.com
1	Clementine	McCullough	48	Devon_Morar95@gmail.com
2	Seamus	Graham	59	Fannie83@gmail.com
3	Jamey	Hilll	45	Ron_Osinski@yahoo.com
4	Kaylee	Konopelski	23	Tyson.Steuber@hotmail.com
5	Jalyn	Batz-Glover	60	Keeley_Rolfson@gmail.com
6	Corene	Yost	28	Chadd.Haley32@yahoo.com
7	Abigail	Altenwerth	55	Sydnie70@yahoo.com
8	Kyla	McGlynn	51	Eula56@gmail.com
9	Harmon	Heidenreich	60	Sally35@hotmail.com

id	firstName	lastName	age	email
0	Werner	Bednar-Runolfsdottir	49	Theodore53@hotmail.com
1	Clementine	McCullough	48	Devon_Morar95@gmail.com
2	Seamus	Graham	59	Fannie83@gmail.com
3	Jamey	Hilll	45	Ron_Osinski@yahoo.com
4	Kaylee	Konopelski	23	Tyson.Steuber@hotmail.com
5	Jalyn	Batz-Glover	60	Keeley_Rolfson@gmail.com
6	Corene	Yost	28	Chadd.Haley32@yahoo.com
7	Abigail	Altenwerth	55	Sydnie70@yahoo.com
8	Kyla	McGlynn	51	Eula56@gmail.com
9	Harmon	Heidenreich	60	Sally35@hotmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Imogene	Veum	53	Iva61@gmail.com
1	Josefa	Funk	52	Rylan61@yahoo.com
2	Kamryn	Thompson	33	Rosalee66@yahoo.com
3	Don	Ondricka	65	Rasheed.Kulas65@gmail.com
4	Pinkie	Hessel	28	Kira7@hotmail.com
5	Reed	Jenkins	20	Adolf48@yahoo.com
6	Karlee	Schuster	50	Peggie.Schuster@hotmail.com
7	Milford	Hartmann	35	Jarrod51@hotmail.com
8	Erin	Tremblay	63	Randi_King40@hotmail.com
9	Camryn	Schimmel	53	Cleta34@hotmail.com

id	firstName	lastName	age	email
0	Imogene	Veum	53	Iva61@gmail.com
1	Josefa	Funk	52	Rylan61@yahoo.com
2	Kamryn	Thompson	33	Rosalee66@yahoo.com
3	Don	Ondricka	65	Rasheed.Kulas65@gmail.com
4	Pinkie	Hessel	28	Kira7@hotmail.com
5	Reed	Jenkins	20	Adolf48@yahoo.com
6	Karlee	Schuster	50	Peggie.Schuster@hotmail.com
7	Milford	Hartmann	35	Jarrod51@hotmail.com
8	Erin	Tremblay	63	Randi_King40@hotmail.com
9	Camryn	Schimmel	53	Cleta34@hotmail.com

id	firstName	lastName	age	email
0	Imogene	Veum	53	Iva61@gmail.com
1	Josefa	Funk	52	Rylan61@yahoo.com
2	Kamryn	Thompson	33	Rosalee66@yahoo.com
3	Don	Ondricka	65	Rasheed.Kulas65@gmail.com
4	Pinkie	Hessel	28	Kira7@hotmail.com
5	Reed	Jenkins	20	Adolf48@yahoo.com
6	Karlee	Schuster	50	Peggie.Schuster@hotmail.com
7	Milford	Hartmann	35	Jarrod51@hotmail.com
8	Erin	Tremblay	63	Randi_King40@hotmail.com
9	Camryn	Schimmel	53	Cleta34@hotmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Unique	Nitzsche	48	Kendrick.Schamberger72@yahoo.com
1	Alysha	Anderson	30	Dean63@gmail.com
2	Jonathan	Crooks	52	Valentina84@yahoo.com
3	Jeremie	Gusikowski	46	Milford.Osinski@gmail.com
4	Tyson	Klocko	50	Fernando6@hotmail.com
5	Winona	DuBuque	35	Lyric37@hotmail.com
6	Justyn	O'Conner	60	Marlen.Barton50@gmail.com
7	Gail	Kulas	32	Clara.Bins98@hotmail.com
8	Willie	Rogahn-Nitzsche	18	Reuben_Ritchie-Runte39@hotmail.com
9	Evalyn	Wyman	59	Liliane_Metz65@hotmail.com

id	firstName	lastName	age	email
0	Unique	Nitzsche	48	Kendrick.Schamberger72@yahoo.com
1	Alysha	Anderson	30	Dean63@gmail.com
2	Jonathan	Crooks	52	Valentina84@yahoo.com
3	Jeremie	Gusikowski	46	Milford.Osinski@gmail.com
4	Tyson	Klocko	50	Fernando6@hotmail.com
5	Winona	DuBuque	35	Lyric37@hotmail.com
6	Justyn	O'Conner	60	Marlen.Barton50@gmail.com
7	Gail	Kulas	32	Clara.Bins98@hotmail.com
8	Willie	Rogahn-Nitzsche	18	Reuben_Ritchie-Runte39@hotmail.com
9	Evalyn	Wyman	59	Liliane_Metz65@hotmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Eladio	Mitchell	60	Marlon92@hotmail.com
1	Jeramy	Armstrong	38	Martin.Glover84@hotmail.com
2	Tina	Lind	63	Rowland.Heller43@hotmail.com
3	Efrain	Zemlak	22	Connor_Hand@gmail.com
4	Monty	Denesik	18	Keagan69@yahoo.com
5	Abigale	Nader	19	Nia.Kihn80@hotmail.com
6	Oran	Conn	34	Trystan_Ryan57@gmail.com
7	Wendy	Doyle	29	Linnea2@gmail.com
8	Gerard	Franey	54	Tanner.Gottlieb53@hotmail.com
9	Garnet	McGlynn	63	Enid.Swaniawski@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Helena	Marks	18	Tyler58@yahoo.com
1	Moises	Lang	65	Heloise75@gmail.com
2	Dale	Price	40	Cleora_Jakubowski@gmail.com
3	Grover	Jacobson	48	Kody77@yahoo.com
4	Adalberto	Schamberger	33	Vena_OHara@hotmail.com
5	Alexandra	Harvey	27	Kendra.Nolan37@hotmail.com
6	Magnolia	Brakus	23	Rosemary.Weissnat18@gmail.com
7	Thomas	Bode	37	Jace.OHara15@yahoo.com
8	Kristopher	Skiles	25	Jermaine.Emmerich@gmail.com
9	Thad	Wunsch	59	Timmothy_Shields76@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

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	Zane	Hansen	33	Delilah27@gmail.com
1	Emmett	Kris	28	Lola51@gmail.com
2	Vicente	Bruen	20	Amalia65@hotmail.com
3	Alexander	Collins	63	Nat_Grady87@gmail.com
4	Aurelio	Trantow	34	Juvenal_Rodriguez5@hotmail.com
5	Rafael	Deckow	37	Tommie.Bailey@gmail.com
6	Brooks	Strosin	65	Elody.Kassulke@yahoo.com
7	Annabelle	Jast-Schmitt	24	Ollie_Cole@gmail.com
8	Kenton	Wolff	27	Armani_McLaughlin@hotmail.com
9	Macey	Jast	36	Derek_Rice39@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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

Striped

To enable striped rows, set striped to true.

id	firstName	lastName	age	email
0	Harry	Luettgen	59	King_Crona71@gmail.com
1	Kathryne	Grady	22	Tanya_Ferry@hotmail.com
2	Marco	Christiansen	29	Jamie.Jast@yahoo.com
3	Adrain	Hoeger	41	Jaquelin81@hotmail.com
4	Judd	Donnelly	40	Adele.Schmitt22@gmail.com
5	Clark	DuBuque	35	Tyshawn_Runte11@gmail.com
6	Liana	Schimmel	20	Friedrich.Monahan88@yahoo.com
7	Guiseppe	Harber	31	Arne60@hotmail.com
8	Ayana	Lesch-Brown	60	Justus.Turcotte61@hotmail.com
9	Cooper	Willms	59	Odie_Heller@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

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	Oswald	Wyman-Rath	41	Xander_Kulas55@gmail.com	(872) 537-1134 x0547	admin	inactive	5/10/2025	11/28/2024
1	Isidro	Klein	40	Franz21@gmail.com	(207) 546-9866 x9750	user	inactive	2/26/2025	6/9/2025
2	Tristian	Goldner	58	Marcos_Skiles-Fahey@yahoo.com	233.964.3488 x797	admin	inactive	4/20/2025	7/13/2025
3	Elaina	Lesch	63	Shayne.Lubowitz@gmail.com	(963) 924-2426 x749	admin	active	8/4/2025	7/28/2025
4	Lue	Quitzon	25	Helmer.West@yahoo.com	(712) 735-8798 x564	user	inactive	4/6/2025	8/21/2025
5	Lucinda	Paucek	32	Cynthia_Zieme@hotmail.com	610.331.0207 x843	user	inactive	2/9/2025	5/11/2025
6	Avis	Kulas	32	Blake.Reichel86@gmail.com	586-280-2705 x675	user	inactive	3/31/2025	7/23/2025
7	Eliezer	Jenkins	23	Christopher18@hotmail.com	(337) 836-9689 x09655	user	active	1/18/2025	11/6/2024
8	Judson	Kulas-Hickle	27	Kay18@gmail.com	1-313-860-1435 x07648	user	inactive	10/26/2024	5/8/2025
9	Estelle	Morar	37	Elta20@yahoo.com	568-461-0288 x43627	user	active	6/15/2025	8/9/2025

const data = useMemo<Data[]>(() => createData(), [])

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

Header Groups

id	user
	name		age	email
	firstName	lastName	age	email
0	Daniella	Runolfsdottir	61	Mathew93@yahoo.com
1	Santino	Carter	18	Francis.Purdy@yahoo.com
2	Chesley	Bergstrom	26	Tyrique58@yahoo.com
3	Maymie	Mayer	62	Gunnar79@gmail.com
4	Tyree	Hagenes	49	Ricky_OReilly15@hotmail.com
5	Lila	Graham	57	Ashley50@hotmail.com
6	Troy	Metz	32	Caterina75@gmail.com
7	Naomi	Blick	38	Harmony_Hackett55@gmail.com
8	Margaret	Jacobs	54	Cheyenne88@gmail.com
9	Itzel	Predovic	56	Maxwell_Thiel61@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<Data[]>(() => createData(), [])

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

id	user
	name		age	email
	firstName	lastName	age	email
0	King	Ebert	28	Janis85@gmail.com
1	Trenton	Crooks	27	Jakayla6@gmail.com
2	Martina	Kunze	51	Gia.Turcotte1@hotmail.com
3	Cyrus	Kertzmann	19	Gillian.Weissnat@yahoo.com
4	Lillie	Schneider	18	Lempi.Rolfson21@yahoo.com
5	Simone	Ferry	53	Michaela.Crona21@yahoo.com
6	Griffin	Predovic	25	Marie.Padberg53@yahoo.com
7	Felipe	Braun	25	Freeman64@hotmail.com
8	Rickie	O'Connell	27	Dulce33@gmail.com
9	Iliana	Rogahn	40	Alvis_Witting@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<Data[]>(() => createData(), [])

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	Drake	Stroman	37	Agustin28@gmail.com
1	Beth	Muller	20	Greyson.Wuckert@hotmail.com
2	Terrell	Gottlieb	44	Jailyn.Carroll@hotmail.com
3	Pansy	Block	42	Collin_Koepp2@gmail.com
4	Felipa	Leuschke	23	Elmer.Rath93@hotmail.com
5	Elwin	Franey	29	Kiera74@hotmail.com
6	Carter	Mitchell	49	Kieran74@hotmail.com
7	Sasha	Koss	64	Alford.Green@hotmail.com
8	Savion	Stamm	25	Jamey_Waters@gmail.com
9	Kirsten	O'Connell	51	Darryl.Strosin37@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

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	Vinnie	Bernhard	57	Judd_Balistreri@yahoo.com
1	Gregg	Grimes	38	Shayne_Schumm54@gmail.com
2	Thurman	Reilly	37	Citlalli.Stiedemann55@gmail.com
3	Brady	Roberts	51	Emory.Kreiger@gmail.com
4	Rita	Lowe	48	Columbus.Schamberger97@hotmail.com
5	Vena	Lakin	44	Efren.Conn68@gmail.com
6	Shane	Schmidt	29	Dessie16@yahoo.com
7	Dawn	Hirthe	38	Clementina.Kunze@hotmail.com
8	Royce	Grimes	21	Webster_Kozey12@gmail.com
9	Melody	Rath	64	Blaze60@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

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	Charity	Rempel	22	Jerrod_Kunde@gmail.com
1	Kailee	Bartell	36	Reanna_Kiehn91@gmail.com
2	Maia	Wisoky	54	Don86@gmail.com
3	Lindsay	Considine	51	Chanelle_Dicki@hotmail.com
4	Maude	Johns	64	Theodore_Schiller85@hotmail.com
5	Simone	Predovic	62	Dolly_Kuhlman@gmail.com
6	Juwan	Klocko	31	Freeman.Fahey32@hotmail.com
7	Damaris	Kunde	24	Sarah54@hotmail.com
8	Elias	Cremin	59	Heather_Rodriguez@gmail.com
9	Kieran	Shields	60	Cathy97@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

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	Telly	Langosh	33	Cade_Bayer@gmail.com
1	Simone	Ortiz	54	Arjun.Franey-Schuster95@yahoo.com
2	Joan	Donnelly	24	Delia_Kuhn9@gmail.com
3	Antonia	Schaden	24	Montana_Dibbert@gmail.com
4	Arne	Stark	49	Lesley17@yahoo.com
5	Fiona	Graham	51	Lucy49@yahoo.com
6	Evert	Spinka	35	Triston14@yahoo.com
7	Pete	Runte	56	Daryl.Koss71@gmail.com
8	Grover	Stoltenberg	50	Jabari13@yahoo.com
9	Nestor	McKenzie	38	Jailyn_Smitham@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

return (
  <Table
    columns={columns}
    data={data}
    onRowDoubleClick={(row) => console.log(row)}
    withScrollArea
  />
)

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

Set Default Sorting

To set the default sorting, set defaultSorting to an array of objects with the column id and direction.

id	firstName	lastName	age	email
7	Ocie	Hackett	62	Herbert90@yahoo.com
4	Maurice	Hagenes	59	Destiney51@yahoo.com
9	Schuyler	Nienow	58	Alfredo.Lang78@gmail.com
6	Malvina	Fritsch	55	Laney.Gleichner47@gmail.com
8	Zakary	Johns	54	Chelsie_Stiedemann@gmail.com
5	Franco	Wolf	51	Carroll98@yahoo.com
1	Freda	Russel	43	Lenora68@hotmail.com
3	Laney	Rempel	33	Georgette_Bogan48@hotmail.com
0	Vivien	Connelly	32	Novella_Graham25@gmail.com
2	Joshuah	Kling	25	Autumn96@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Candida	Doyle	40	Melyssa91@gmail.com
1	Charlene	Bayer	26	Antonina.Hilpert@hotmail.com
2	Valentin	Nolan	18	Hugh.Kassulke97@yahoo.com
3	Kavon	Langworth	42	Terence.Goldner@hotmail.com
4	Robin	Kessler	37	Josefa.Cronin-Klein@yahoo.com
5	Davion	Huels	45	Emmie_Hyatt-Crona81@yahoo.com
6	Bridgette	Stiedemann	20	Xander_Weimann69@hotmail.com
7	Kale	Morissette	63	Liliane44@hotmail.com
8	Morris	Sipes	42	Albert48@gmail.com
9	Floyd	Konopelski	64	Eugene_DuBuque@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Ariane	Hills	57	Elroy.Murray35@gmail.com
1	Alexandria	Hand	31	Estelle.Ziemann@yahoo.com
2	Lenna	Price-Pacocha	36	Rosetta_Ferry19@hotmail.com
3	Rossie	Legros-Hessel	57	Bryce_Rodriguez38@gmail.com
4	Garrett	Jacobs	18	Frederique.Schmitt71@hotmail.com
5	Chesley	Weber	63	Marianna.Price@gmail.com
6	Maxwell	Stoltenberg-Gorczany	54	Cicero.Hirthe-Bernier@gmail.com
7	Katharina	Friesen	62	Jaleel_Wiegand24@yahoo.com
8	Ned	Lind-Batz	47	Eliezer.Schuppe@gmail.com
9	Charles	Sipes	55	Kody_Kilback70@yahoo.com

const data = useMemo<Data[]>(() => createData(), [])

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	Nolan	Erdman	48	Napoleon27@gmail.com
1	Gardner	Gislason	35	Einar.McLaughlin68@yahoo.com
2	Kolby	Nitzsche	63	Heber.Stracke27@hotmail.com
3	Serena	Collier	54	Wilfred10@gmail.com
4	Porter	Rogahn	61	Saul_Wilderman46@gmail.com
5	Omer	Schuppe	50	Erin66@gmail.com
6	Mia	Reichert	56	Marilie.Ebert31@hotmail.com
7	Neva	Boyle	38	Gladyce_Bins@yahoo.com
8	Priscilla	Powlowski	63	Anahi_Hartmann74@hotmail.com
9	Kayley	Hand	56	Myrtle_Jaskolski10@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Benny	Okuneva	30	Randy39@hotmail.com
1	Otho	Padberg	31	Irving.Veum45@gmail.com
2	Gustave	Franecki	35	Elissa_Lindgren62@gmail.com
3	Travon	Padberg	19	Darrell.Ferry@hotmail.com
4	Cierra	Batz	64	Hope68@hotmail.com
5	Alek	Hauck	34	Yvette31@yahoo.com
6	Zola	Murphy	51	Sigmund_Ferry18@yahoo.com
7	Laila	Rau	63	Michel_Stehr@gmail.com
8	Kaley	Ankunding	38	Alaina_Okuneva74@hotmail.com
9	Malika	Lesch	34	Humberto93@gmail.com

const defaultData = useMemo<Data[]>(() => createData(), [])
const [data, setData] = useState<Data[]>(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	Ron	Spencer	19	Thad_Abernathy46@hotmail.com
1	Makenna	Beahan-McKenzie	52	Mike_Morar@gmail.com
2	Karen	Farrell	29	Javier_Zieme32@hotmail.com
3	Annamae	Bernhard	55	Devon_Lakin@hotmail.com
4	Aryanna	Wilkinson	51	Etha.Hills5@yahoo.com
5	Brent	Walker	32	Josefa.Will@gmail.com
6	Mattie	Botsford	60	Rahsaan41@hotmail.com
7	Jamil	West	48	Estell_Schuppe@yahoo.com
8	Grayson	Weber	55	Rolando_Howell@hotmail.com
9	Gennaro	Zboncak	40	Aglae39@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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

Control Sorting

id	firstName	lastName	age	email
0	Charlotte	Powlowski	46	Montana_Crona-Balistreri@yahoo.com
1	Ashlynn	Weimann	23	Wallace.Ruecker76@hotmail.com
2	Hailie	Moore	18	Emory.Feest97@hotmail.com
3	Devon	Morissette	18	Ruben_Schmitt@hotmail.com
4	Gust	Bayer	36	Hettie.Conroy11@gmail.com
5	Letha	Tromp	59	Alberta_Davis@yahoo.com
6	Bell	Kuphal	42	Maximilian_Armstrong42@hotmail.com
7	Jarret	Smith	48	Alize.Welch31@hotmail.com
8	Sigmund	Harvey	25	Giovanni.Orn39@hotmail.com
9	Montana	Johnson	23	Webster.Sauer7@gmail.com

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

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	Morris	Wisozk	64	Tomas.Bartell29@gmail.com
1	Asha	Littel	63	Margret_Steuber@yahoo.com
2	Jackeline	Quigley	25	Justen_Mosciski28@gmail.com
3	Krista	Cremin	31	Delta75@yahoo.com
4	Otis	Parisian	59	Sarai_Williamson@hotmail.com
5	Brian	Schuppe	55	Martine87@gmail.com
6	Noble	Hintz	44	Delbert.Schmitt@gmail.com
7	Rosa	Kohler	62	Zachariah.Schuster-Effertz50@yahoo.com
8	Abelardo	Schinner	41	Khalid.Marvin@hotmail.com
9	Brent	Goodwin	64	Nyasia35@hotmail.com
10	Alexander	Schultz	55	Eliseo_Harber@gmail.com
11	Edmond	Goodwin	55	Kelsi.Kub61@gmail.com
12	Vernice	Ebert	33	Dedrick48@hotmail.com
13	Summer	Osinski	40	Marjory_Brown21@hotmail.com
14	Jimmy	Zemlak	62	Alf57@gmail.com
15	Leonel	Raynor	54	Antonette.Wunsch11@yahoo.com
16	Rosalinda	Sawayn	61	Monique16@hotmail.com
17	Everette	Walsh	56	Alexie41@gmail.com
18	Abagail	Corwin	41	Deion.Ruecker@hotmail.com
19	Marcellus	VonRueden	31	Demarco_Hand@gmail.com

const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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	Pierre	O'Hara	45	Johnson_Schuppe93@hotmail.com
11	Vaughn	Yundt	52	Beatrice_Dibbert93@gmail.com
12	Jonatan	Maggio	44	Mac_Aufderhar82@hotmail.com
13	Gabrielle	Dietrich-Gutmann	23	Crystel95@yahoo.com
14	Ellsworth	Schneider	63	Allene5@gmail.com
15	Lavada	Bashirian	49	Aditya.Hayes45@hotmail.com
16	Chesley	Wyman	36	Beau.Murazik@gmail.com
17	Ernestine	Kuhlman	26	Joesph_Dooley29@hotmail.com
18	Cordia	Carroll	61	Ezekiel.Jacobson@yahoo.com
19	Vernie	Barton	23	Hubert.Streich65@gmail.com

const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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	Myra	Ryan	47	Junior_Kunde64@gmail.com
1	Jorge	Carroll	30	Rogelio84@gmail.com
2	Macy	Upton	32	Marian35@hotmail.com
3	Gabriella	Kozey	59	Carmine_Ryan@gmail.com
4	Jolie	Hirthe	58	Vicenta53@hotmail.com
5	Jimmy	Rowe	25	Gerda.Rice@hotmail.com
6	Darlene	Schuster	49	Gregg90@yahoo.com
7	Jany	Bashirian	19	Ronny_Hartmann@gmail.com
8	Timothy	Zemlak	39	Kenyon_Bartell@yahoo.com
9	Shaniya	Heller-Hills	36	Melisa.Rempel85@gmail.com
10	Luna	Schroeder	22	Waino34@hotmail.com
11	Darryl	Skiles	38	Daphnee.Prohaska4@hotmail.com
12	Maureen	Koelpin	34	Sydni8@gmail.com
13	Queenie	Feeney	54	Lilian.Stiedemann@yahoo.com
14	Rita	Corkery	49	Earnestine4@hotmail.com
15	Melyna	Schneider	31	Arianna_Marquardt82@yahoo.com
16	Madison	Sauer	36	Carrie87@gmail.com
17	Lottie	Denesik	37	Jerrod44@hotmail.com
18	Murl	Lynch	26	Otto_Nienow29@gmail.com
19	Trever	Champlin	23	Kayleigh.Pacocha92@yahoo.com

const { t } = useI18n("table")
const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const rowCount = 40
const defaultData = useMemo<Data[]>(() => createData(rowCount), [])
const data = useMemo<Data[]>(
  () =>
    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	Kallie	Pollich	25	Margarete.Steuber@yahoo.com
1	Andy	Hintz	26	Myriam23@yahoo.com
2	Frieda	Nolan	61	Javon.Walker19@gmail.com
3	Viva	Stark	63	Maribel.Block-Nader@gmail.com
4	Brenden	O'Keefe	63	Esmeralda_Farrell@yahoo.com
5	Marianna	Effertz	27	Dudley67@hotmail.com
6	German	McCullough	54	Avis24@gmail.com
7	Marlee	Bode	39	Melisa_Flatley53@yahoo.com
8	Lonzo	Harvey	41	Gina_Steuber@hotmail.com
9	Rhett	Runolfsson	41	Yvette5@yahoo.com
10	Sydnee	Robel	62	Leif79@yahoo.com
11	Zaria	Heaney	59	Sean15@yahoo.com
12	Alexane	Friesen	59	Betty.Farrell49@gmail.com
13	Ernestine	Gulgowski	18	Olin.Hammes@hotmail.com
14	Halie	Braun	21	Erich.Braun@yahoo.com
15	Shyanne	Goyette	55	Nicholas_Hickle@yahoo.com
16	Monserrat	Bailey	28	Travon_Christiansen87@hotmail.com
17	Brielle	Maggio	22	Gerry91@gmail.com
18	Gwen	Conroy-Hermiston	27	Lawrence.Rippin@hotmail.com
19	Darrick	Crooks	52	Destini96@yahoo.com

const [pagination, setPagination] = useState<PaginationState>({
  pageIndex: 0,
  pageSize: 20,
})
const { t } = useI18n("table")
const data = useMemo<Data[]>(() => createData(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	Karson	Crona	18	Jarrod37@yahoo.com
1	Carol	Franey	41	Toni46@gmail.com
2	Keshawn	Glover	65	Wendell_Robel91@gmail.com
3	Berta	Satterfield	63	Regan8@yahoo.com
4	Charley	Douglas	30	Geovanny6@gmail.com
5	Marion	Hessel	35	Estelle.Dibbert3@hotmail.com
6	Anissa	Zieme	28	Anastacio.Daugherty@gmail.com
7	Reese	Bruen	26	Stefan31@hotmail.com
8	Vernice	Emmerich	24	Otho40@yahoo.com
9	Imogene	O'Hara	45	Marlin8@hotmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Cecilia	Weimann	56	Joelle.Hoppe@hotmail.com
1	Simone	Hoppe	58	Clarabelle_Bayer54@hotmail.com
2	Sim	Rau	60	Ayla_Flatley@hotmail.com
3	Ida	Cartwright	20	Lavada25@hotmail.com
4	Alayna	Collins	42	Devin85@hotmail.com
5	Norma	Donnelly-Wintheiser	22	Ollie.Sipes17@gmail.com
6	Jarrett	Mraz	45	Coy_Paucek3@hotmail.com
7	Kody	Blanda	43	Polly_Johns86@gmail.com
8	Antwan	Torp	27	Johathan_Wuckert@gmail.com
9	Jefferey	Romaguera	63	Kamryn23@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Rudolph	Wiegand	61	Nicolas_Tillman74@gmail.com
1	Zula	Collins	20	Rod.Pacocha55@hotmail.com
2	Consuelo	Bechtelar	49	Rosalia_Feil37@yahoo.com
3	Allison	Skiles	50	Darrion.Fritsch@hotmail.com
4	Salvador	Beier	34	Mariah39@yahoo.com
5	Nettie	Kozey	45	Bernhard.Russel57@hotmail.com
6	Ethel	Williamson	45	Cecilia_Grant22@gmail.com
7	Rosalyn	Bartoletti	54	Hailey_Johns63@hotmail.com
8	Khalil	Wisozk	48	Gordon_Hagenes67@hotmail.com
9	Della	Gleason	23	Adrianna.McKenzie@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Verla	Armstrong	20	Dedric58@yahoo.com
1	Vito	Corkery	61	Edd_Lebsack@hotmail.com
2	Eileen	Wyman	63	Kyleigh_Franey@gmail.com
3	Carmel	Hayes	25	Kallie33@yahoo.com
4	Imogene	Wolff	48	Marjorie.Muller17@hotmail.com
5	Evert	Cremin	51	Kellie_McLaughlin@hotmail.com
6	Alfonso	Wuckert-VonRueden	26	Paolo.Howe22@hotmail.com
7	Aurelio	Sanford	18	Lonnie_Hagenes38@hotmail.com
8	Dino	Mertz	19	Alvah6@hotmail.com
9	Brayan	Morissette	18	Esteban_Schmitt@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Dianna	Ryan	19	Ephraim_Dibbert@yahoo.com
1	Gunnar	Wilkinson	51	Maegan74@gmail.com
2	Nora	Witting	60	Lia_OKon@hotmail.com
3	Ansel	Marks	51	Eula.Conn62@gmail.com
4	Theodore	O'Hara	34	Haskell_Goldner46@yahoo.com
5	Genoveva	Feil	25	Lina21@gmail.com
6	Isidro	Oberbrunner	53	Rosario.Ritchie@hotmail.com
7	Aimee	Davis	37	Allie_Lesch@yahoo.com
8	Petra	Jenkins	31	Carolyne99@hotmail.com
9	Godfrey	Nienow	28	Arielle_Pacocha@hotmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Angela	Mueller	37	Olen.Bahringer61@yahoo.com
1	Amira	Kihn	35	Mattie.Stanton35@hotmail.com
2	Dimitri	Cremin	22	Gerry.Hessel@hotmail.com
3	Jay	Mosciski	54	Darien.Lemke@yahoo.com
4	Melyssa	Cummings	36	August.Brown@gmail.com
5	Joanie	Reinger	19	Reed_Hegmann-Franecki25@yahoo.com
6	Tracy	Koepp	43	Brandt31@hotmail.com
7	Hadley	Runolfsson	31	Jess.Larson94@yahoo.com
8	Marcelino	Kozey	62	Benedict_Hane23@gmail.com
9	Kenya	Stroman	18	Ivy68@yahoo.com

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

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	Fay	King	40	Clemmie36@gmail.com
1	Bernie	Johnson	55	Laverne43@yahoo.com
2	Vida	Lowe	38	Fabian_White68@gmail.com
3	Clara	Braun	28	Karen.Smith@hotmail.com
4	Hollie	Schulist	27	Derrick97@yahoo.com
5	Elouise	Lesch	55	Catalina.Brakus@yahoo.com
6	Ernie	Leffler	54	Jaylan.Corwin@gmail.com
7	Abdul	Schowalter	52	Jerrold_Satterfield@hotmail.com
8	Tommie	Braun	57	Quinten_Raynor58@hotmail.com
9	Aliza	Crooks	34	Isabella.Stroman@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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
8	Hillary	Murazik	53	Jaquelin.Kovacek@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Maria	Marvin	38	Marguerite_McClure61@yahoo.com
1	Efren	Roberts	43	Earlene.Gulgowski@yahoo.com
2	Dax	Graham	29	Sylvia46@hotmail.com
3	Deborah	Quitzon	25	Godfrey.Morar@hotmail.com
4	Reymundo	Abernathy	28	Autumn57@hotmail.com
5	Brice	Little-Rice	18	Clare.OConnell@hotmail.com
6	Tillman	Schuppe	33	Shanel1@hotmail.com
7	Jordy	Conroy	57	Jayson8@gmail.com
8	Stevie	Reynolds	20	Donavon_Walter@yahoo.com
9	Dahlia	Feest	34	Pierre92@hotmail.com

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

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	Estevan	Huels	32	Genoveva_Breitenberg@gmail.com
1	Troy	Will	44	Gennaro_Schamberger86@hotmail.com
2	Marley	Schroeder	51	Queen.Schmeler@hotmail.com
3	Julio	Thompson	18	Gregory35@hotmail.com
4	Abbie	Heathcote-Swaniawski	39	Horacio_Wolf@hotmail.com
5	Lempi	Oberbrunner	30	Audreanne_Schulist36@gmail.com
6	Ibrahim	Hills	18	Corene_OConner@yahoo.com
7	Anastasia	Larson	36	Amanda_Dickens@gmail.com
8	Jacques	Wiza	50	Roberta.Heaney39@hotmail.com
9	Nickolas	Turner	38	Niko.Franey-Satterfield88@hotmail.com

const data = useMemo<Data[]>(() => createData(), [])

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	Coralie	Bartell	20	Dewitt31@gmail.com
1	Aleen	Kub	47	Kasandra.Hackett@hotmail.com
2	Ebony	Hammes	43	Yvette_Crooks35@yahoo.com
3	Destinee	Runte	23	Nasir.Shields61@yahoo.com
4	Kristin	Ziemann	45	Dangelo26@hotmail.com
5	Isaac	Gulgowski	38	Berneice77@hotmail.com
6	Herta	Rodriguez	61	Burnice_Larson76@yahoo.com
7	Jaylin	Kozey	52	Benton_Conroy6@hotmail.com
8	Ashley	Rath	37	Treva_Lynch13@gmail.com
9	Richmond	Koss	52	Rasheed.Shanahan@gmail.com

const data = useMemo<Data[]>(() => createData(), [])

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.
`highlightOnHover`	`false`	`boolean` If `true`, highlight the row when the table row is hovered.
`highlightOnSelected`	`false`	`boolean` If `true`, highlight the row when the table row is selected.
`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" ...` 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.
`stickyFooter`	`false`	`boolean` If `true`, display the sticky footer.
`stickyHeader`	`false`	`boolean` If `true`, display the sticky header.
`striped`	`false`	`boolean` If `true`, display striped rows.
`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.
`withBorder`	`false`	`boolean` If `true`, display the outer border of the table.
`withCheckbox`	`true`	`boolean` If `true`, the table will have a checkbox column.
`withColumnBorders`	`false`	`boolean` If `true`, display line on the columns of the table.
`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

Currently, this section is being updated due to the migration of v2.

Table

Usage

Change Variant

Change Size

Change Color Scheme

Add Outer Border

Add Column Separators

Highlight on Row Hover

Striped

Scroll Area

Header Groups

Footer Groups

Disable Keyboard Navigation

Set Initial Focusable Cell

Handle Row Click Event

Handle Row Double Click Event

Set Default Sorting

Disable Sorting

Disable Multi Sorting

Set Maximum Sortable Columns

Manual Sorting

Change Sorting Toggle

Control Sorting

Set Default Page Index and Page Size

Enable Row Selection

Set Default Selected Rows

Enable Row Selection on Click

Hide Checkbox

Disable Row

Control Row Selection

Use Filter

Set Default Filter

Control Filter

Enable Column Resizing

Change Column Resizing Method

Props

Accessibility