Table

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

id	firstName	lastName	age	email
0	Santino	Gleichner	49	Chelsey_Larson89@hotmail.com
1	Danyka	Abshire	44	Talia_Reichert@yahoo.com
2	Javier	Witting	27	Layne.Konopelski87@yahoo.com
3	Granville	Stehr	63	Elvis60@yahoo.com
4	Lacy	Ernser	63	Sister_Hills52@hotmail.com
5	Axel	Lynch	65	Dax_Lang82@gmail.com
6	Mikayla	Hilpert	59	Sam52@gmail.com
7	Maryam	Koepp	62	Steve.Mann@yahoo.com
8	Herta	DuBuque	50	Macie7@gmail.com
9	Jaren	Willms	56	Samantha46@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	Princess	Muller	24	Selina.Dicki@gmail.com
1	Taurean	Homenick	50	Zakary_Runolfsson57@yahoo.com
2	Tillman	Huel	38	Andy3@yahoo.com
3	Jennifer	Littel	48	Ervin_Ledner10@gmail.com
4	Garett	Ziemann	51	Jamey_Kihn@gmail.com
5	Monroe	Bernier	42	Dudley.White-Gleichner6@hotmail.com
6	Kris	Lind	56	Crystel.Gutkowski@hotmail.com
7	Brycen	Waelchi	47	Felicity22@hotmail.com
8	Linnie	Armstrong-Towne	26	Clint_Hartmann95@hotmail.com
9	Myrl	Rath	22	Virgil.Grady2@hotmail.com

id	firstName	lastName	age	email
0	Princess	Muller	24	Selina.Dicki@gmail.com
1	Taurean	Homenick	50	Zakary_Runolfsson57@yahoo.com
2	Tillman	Huel	38	Andy3@yahoo.com
3	Jennifer	Littel	48	Ervin_Ledner10@gmail.com
4	Garett	Ziemann	51	Jamey_Kihn@gmail.com
5	Monroe	Bernier	42	Dudley.White-Gleichner6@hotmail.com
6	Kris	Lind	56	Crystel.Gutkowski@hotmail.com
7	Brycen	Waelchi	47	Felicity22@hotmail.com
8	Linnie	Armstrong-Towne	26	Clint_Hartmann95@hotmail.com
9	Myrl	Rath	22	Virgil.Grady2@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	Lily	Bauch	18	Patricia_Howe@hotmail.com
1	Norberto	Sanford	64	Margarita_Kirlin@yahoo.com
2	Wyatt	Goldner	34	Leonard_Wiza@gmail.com
3	Herbert	Hickle	30	Ashlee.Deckow@hotmail.com
4	Deondre	Davis	19	Horace57@yahoo.com
5	Serena	Goodwin	38	Watson.Kessler@gmail.com
6	Lemuel	Mitchell	36	Merlin_Beier48@gmail.com
7	Duane	Treutel	62	Lane.Rempel@gmail.com
8	Dewitt	Hackett	28	Talia18@yahoo.com
9	Sage	Skiles	38	Bret.Klein71@yahoo.com

id	firstName	lastName	age	email
0	Lily	Bauch	18	Patricia_Howe@hotmail.com
1	Norberto	Sanford	64	Margarita_Kirlin@yahoo.com
2	Wyatt	Goldner	34	Leonard_Wiza@gmail.com
3	Herbert	Hickle	30	Ashlee.Deckow@hotmail.com
4	Deondre	Davis	19	Horace57@yahoo.com
5	Serena	Goodwin	38	Watson.Kessler@gmail.com
6	Lemuel	Mitchell	36	Merlin_Beier48@gmail.com
7	Duane	Treutel	62	Lane.Rempel@gmail.com
8	Dewitt	Hackett	28	Talia18@yahoo.com
9	Sage	Skiles	38	Bret.Klein71@yahoo.com

id	firstName	lastName	age	email
0	Lily	Bauch	18	Patricia_Howe@hotmail.com
1	Norberto	Sanford	64	Margarita_Kirlin@yahoo.com
2	Wyatt	Goldner	34	Leonard_Wiza@gmail.com
3	Herbert	Hickle	30	Ashlee.Deckow@hotmail.com
4	Deondre	Davis	19	Horace57@yahoo.com
5	Serena	Goodwin	38	Watson.Kessler@gmail.com
6	Lemuel	Mitchell	36	Merlin_Beier48@gmail.com
7	Duane	Treutel	62	Lane.Rempel@gmail.com
8	Dewitt	Hackett	28	Talia18@yahoo.com
9	Sage	Skiles	38	Bret.Klein71@yahoo.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	Michaela	Kuhic-Macejkovic	28	Leonie20@hotmail.com
1	Bailey	Williamson	56	Immanuel.Lindgren38@yahoo.com
2	Irwin	Kihn	45	Dahlia_Armstrong40@yahoo.com
3	Rico	Dickens-O'Kon	57	Jessika.Wisozk@gmail.com
4	Velda	Davis	52	Nicholaus.Mosciski91@yahoo.com
5	Hailee	Torphy	47	Hermina4@hotmail.com
6	Ellen	Wintheiser	59	Jan.Prohaska@yahoo.com
7	Jovanny	Kilback	43	Pierce.Kuphal71@yahoo.com
8	Alfred	Friesen	33	Maya_Marks76@yahoo.com
9	Queenie	Schaefer	65	Maya.Mante@yahoo.com

id	firstName	lastName	age	email
0	Michaela	Kuhic-Macejkovic	28	Leonie20@hotmail.com
1	Bailey	Williamson	56	Immanuel.Lindgren38@yahoo.com
2	Irwin	Kihn	45	Dahlia_Armstrong40@yahoo.com
3	Rico	Dickens-O'Kon	57	Jessika.Wisozk@gmail.com
4	Velda	Davis	52	Nicholaus.Mosciski91@yahoo.com
5	Hailee	Torphy	47	Hermina4@hotmail.com
6	Ellen	Wintheiser	59	Jan.Prohaska@yahoo.com
7	Jovanny	Kilback	43	Pierce.Kuphal71@yahoo.com
8	Alfred	Friesen	33	Maya_Marks76@yahoo.com
9	Queenie	Schaefer	65	Maya.Mante@yahoo.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	Melany	Wisoky	19	Roxane.Cronin53@yahoo.com
1	Hank	Blick	31	Austen.Kiehn@gmail.com
2	Ulices	Lockman	41	Kurt.Lindgren@gmail.com
3	Elliot	Hyatt	39	Beaulah_Doyle62@yahoo.com
4	Dewitt	Thiel	36	Joanny.Osinski77@gmail.com
5	Darron	Blick	56	Jeffery7@yahoo.com
6	Javonte	Schimmel	63	Zelma_Anderson82@gmail.com
7	Susan	Lehner	54	Jerry57@yahoo.com
8	Carlos	Langworth	39	Rosa.Greenfelder-Schimmel64@yahoo.com
9	Frank	Altenwerth	22	Tomas_Williamson@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	Eusebio	Hirthe	51	Daisha.Runolfsson@hotmail.com
1	Sigurd	Kihn	19	Lola.Tromp@hotmail.com
2	Matteo	Metz-Leuschke	50	Esmeralda64@gmail.com
3	Frederic	Sanford	52	Blanca63@yahoo.com
4	Maurine	Fritsch	42	Michale.Kirlin2@yahoo.com
5	Tanya	Kulas	36	Orie79@yahoo.com
6	Karen	Marks	43	Jennifer_Nikolaus79@yahoo.com
7	Vita	Torp	18	Dahlia_Beer@hotmail.com
8	Alva	Kris	33	Vella_Hansen@gmail.com
9	Victoria	Kessler	22	Jensen.Dare83@gmail.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	Janie	Goodwin	55	Chadd88@hotmail.com
1	Queenie	Kilback	25	Virgil.Gutkowski@gmail.com
2	Deon	Schmidt-Heaney	35	Gregory2@hotmail.com
3	Tyrell	Nolan	18	Jennifer_Hane1@yahoo.com
4	Benton	Graham	30	Alba82@yahoo.com
5	Zoila	Hamill	41	Gerda.Collier@hotmail.com
6	Kenyon	Beer	51	Gregorio.Durgan@gmail.com
7	Stone	Douglas	60	Bobbie61@hotmail.com
8	Ladarius	Gislason	42	Cheyanne_Vandervort-Fritsch59@gmail.com
9	Pink	Williamson	18	Eleazar54@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	Rhianna	Trantow	43	Missouri68@yahoo.com
1	Horacio	Lueilwitz	64	Lupe78@gmail.com
2	Beaulah	Kozey	46	Jeffry.Muller-Kutch19@gmail.com
3	Gunnar	Schoen	44	Nico.Lowe@yahoo.com
4	Kade	Kerluke	37	Nyah.Aufderhar@gmail.com
5	Moises	Powlowski	35	Dock.Maggio28@hotmail.com
6	Margie	Daugherty	21	Karlee83@gmail.com
7	Darlene	Schamberger	33	Webster47@hotmail.com
8	Daija	Kautzer	47	Gretchen.Kihn@yahoo.com
9	Deja	Hamill	42	Lloyd54@gmail.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	Ransom	Stark	20	Daniela9@gmail.com	1-308-463-3663 x50346	admin	inactive	2/8/2025	10/15/2025
1	Terrell	Rowe	49	Delia.Runte3@gmail.com	354.687.5083	user	active	9/26/2025	12/20/2025
2	Wendy	Renner	58	Andrew.Jaskolski19@gmail.com	(395) 913-5247 x406	admin	active	3/4/2025	7/2/2025
3	Loyal	Macejkovic	60	Addison39@yahoo.com	793.809.4272	user	inactive	4/17/2025	3/14/2025
4	Carlie	Nitzsche	31	Colton.Schaefer98@hotmail.com	1-925-228-9163 x97282	admin	inactive	4/5/2025	6/21/2025
5	Maci	Heidenreich	37	Lenora77@hotmail.com	(228) 288-2238 x0541	user	active	2/19/2025	1/28/2025
6	Joany	Cremin	40	Gabe.Donnelly@gmail.com	1-710-710-6618 x0789	admin	active	4/2/2025	6/11/2025
7	Salvador	Labadie-Gleason	54	Van86@hotmail.com	(983) 527-1076 x469	user	inactive	10/9/2025	11/9/2025
8	Summer	Goyette	48	Greg99@hotmail.com	1-741-940-1733 x0487	user	active	2/5/2025	2/21/2025
9	Judd	Larson	50	Oceane11@yahoo.com	929-745-1068 x5261	user	active	8/22/2025	7/18/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	Evans	Cummerata	59	Winifred80@hotmail.com
1	Howard	Bayer	31	Ellie.Renner49@gmail.com
2	Adrian	Dickinson	64	Hester_Wuckert59@hotmail.com
3	Jaylon	Marks	63	Donnell35@gmail.com
4	Jade	Ortiz	42	Lewis.Gleichner-Pfannerstill41@yahoo.com
5	Edythe	Dicki	18	Berta62@hotmail.com
6	Dakota	Kshlerin	18	Wava_Price@yahoo.com
7	Damian	Kuvalis	60	Gisselle61@hotmail.com
8	Elissa	Spinka	30	Jennyfer.Mayer52@gmail.com
9	Brionna	Feeney	22	Katharina_Stark76@gmail.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	Roel	Lakin-Mann	44	Brooks32@hotmail.com
1	Edwin	Kshlerin	21	Brock97@yahoo.com
2	Delia	Nolan	26	Jenifer25@hotmail.com
3	Alvah	Medhurst	35	Cedrick51@yahoo.com
4	Malachi	Dibbert	41	Beth_Turcotte@hotmail.com
5	Howell	Kessler	21	Clair27@gmail.com
6	Aglae	Welch	64	Murray78@yahoo.com
7	Herbert	Jenkins	23	Brenna98@yahoo.com
8	Verner	Daugherty	45	Jedediah.Effertz@yahoo.com
9	Wilfredo	Dicki	42	Kevon.Daugherty@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<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	Alayna	Mertz	54	Saul.Mayer59@gmail.com
1	Flo	Marquardt-Beatty	42	Annabelle19@hotmail.com
2	Marion	Tillman	37	Doris.Hane@yahoo.com
3	Kailyn	Carroll	55	Scottie16@yahoo.com
4	Adella	Corwin	63	Victor_Kuhlman23@yahoo.com
5	Serena	Wuckert	18	Henry_Mayert-Bruen@yahoo.com
6	Nettie	Hartmann	51	Shanna_Green88@hotmail.com
7	Amari	Gerlach	43	Isac_Kuvalis@hotmail.com
8	Sean	Hayes	51	Hector.Schmidt33@hotmail.com
9	Dandre	Hauck	49	Eusebio_Ward12@hotmail.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	Laverne	Terry	56	Heidi_Franey82@hotmail.com
1	Verdie	Greenholt	45	Frank.Zulauf@gmail.com
2	Norene	Fay	46	Alysa.Bartell@gmail.com
3	Ted	Stracke	45	Kianna57@gmail.com
4	Elizabeth	Gerlach	26	Cary1@yahoo.com
5	Megane	Turcotte	23	Efrain_Kohler@gmail.com
6	Noemy	McDermott-Kassulke	24	Francis65@gmail.com
7	Ally	Roob	19	Cierra30@yahoo.com
8	Anahi	Anderson	56	Melyssa_Huels24@hotmail.com
9	Maybelle	Bergnaum	59	Lucile_Turner46@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	Dominique	Metz	19	Lew.McDermott@yahoo.com
1	Lou	Wiegand	33	Cleta78@gmail.com
2	Gonzalo	Stiedemann	48	Jace_Raynor65@gmail.com
3	Hermann	Jaskolski	38	Keshawn_Witting-Kihn32@hotmail.com
4	Bradly	Cronin	27	Melisa.Lesch@gmail.com
5	Leonor	Jacobi	39	Renee.Pacocha@gmail.com
6	Dudley	Heaney	34	Keaton_Kuhlman@hotmail.com
7	Rossie	Smitham	56	Ambrose.Baumbach@yahoo.com
8	Jana	Kirlin	18	Quinton_Pagac40@hotmail.com
9	Valentine	Franey	36	Zelda.Welch38@gmail.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	Leonor	Nienow	38	Santino6@hotmail.com
1	Eudora	Fisher	63	Khalil_Stroman43@hotmail.com
2	Buford	Bednar	31	Warren_Morissette@gmail.com
3	Burdette	Wisozk	27	Adrain_MacGyver70@gmail.com
4	Mike	Spinka	42	Celestine_McLaughlin@gmail.com
5	Lucas	Jacobs	41	Celestino.DAmore@yahoo.com
6	Angelita	Cummings	58	Abner_Marks7@gmail.com
7	Pearline	Schultz	65	Neal48@yahoo.com
8	Myrna	Franey	52	Alysson.Moen49@yahoo.com
9	Daphne	Stoltenberg	31	Louie7@gmail.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
3	Jordi	Gottlieb	63	Osvaldo_Hagenes@yahoo.com
4	Bianka	Hackett	51	Alivia67@yahoo.com
8	Rogers	Runolfsson	42	Kristy59@yahoo.com
0	Jaquan	O'Hara	39	Meaghan_Cummings99@hotmail.com
2	Melisa	Cummings	38	Gloria_Langworth94@yahoo.com
9	Ruthe	Strosin	37	Ines92@hotmail.com
1	Brett	Auer	24	Cathy_Bergnaum30@gmail.com
5	Assunta	Rath	21	Gloria.Nienow@gmail.com
6	Marlin	Cruickshank	21	Gloria_Jakubowski@gmail.com
7	Herminia	Cruickshank	20	Alysa67@yahoo.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	Pierre	Larkin	37	Drew28@hotmail.com
1	Johnathan	Denesik	47	Porter79@hotmail.com
2	Esta	Roberts	47	Mateo99@hotmail.com
3	John	Mayer	22	Rahsaan_Murphy@hotmail.com
4	Esteban	Streich	29	Merlin.Nienow@yahoo.com
5	Janick	Mohr	42	Susie_Ernser@yahoo.com
6	Lenore	Emard	20	Leopoldo.Turcotte@gmail.com
7	Lyric	Berge	49	Elvera_DuBuque49@hotmail.com
8	Onie	Larkin	65	Raina96@yahoo.com
9	Martine	Moen	31	Tiara_Powlowski3@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	Mathias	Ondricka	46	Noemie.Wiza@gmail.com
1	Curt	Friesen	52	Emmanuel_Hansen10@gmail.com
2	Blaise	Baumbach	54	Bell_Simonis@gmail.com
3	Barton	Ullrich	31	Mabelle.Haley@gmail.com
4	Mossie	Ullrich	52	Esteban_Wuckert@yahoo.com
5	Carolyne	Miller	45	Jerry.Weissnat40@hotmail.com
6	Evelyn	Lehner	44	Fredy90@hotmail.com
7	Roel	Price	55	Lenore.Schmidt@hotmail.com
8	Giuseppe	Hahn	62	Gwendolyn91@hotmail.com
9	Krystina	Padberg	38	Bria.Renner74@gmail.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	Rodrigo	Wiegand	40	Roel45@gmail.com
1	Camilla	Hahn	53	Reilly.Boyle94@yahoo.com
2	Jannie	Roob	34	Barry_Carroll@yahoo.com
3	Hershel	Lind	22	Haskell87@gmail.com
4	Ryleigh	Wolff	33	Lela39@hotmail.com
5	Jeromy	Feest	56	Shawn48@hotmail.com
6	Jadon	Thompson-Runolfsson	37	Gennaro.Rowe@hotmail.com
7	Sadye	Bogan	50	Ahmed57@gmail.com
8	Vince	Terry	36	Luis75@gmail.com
9	Amelia	Bahringer	42	Marcus11@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	Caden	Torphy	28	Maureen0@yahoo.com
1	Neil	Bernhard	47	Tess5@hotmail.com
2	Juanita	Hoppe	56	Willard.Cruickshank@hotmail.com
3	Tyrel	Schulist	43	Bernhard39@yahoo.com
4	Thea	Wiegand	33	Fredy.Herman@yahoo.com
5	Barry	Hand	22	Sasha15@hotmail.com
6	Stella	Hoeger	35	Kaycee22@hotmail.com
7	Ashly	Kovacek	47	Myrtice.Mitchell@gmail.com
8	Kyra	Zboncak	32	Laurianne.Mueller@gmail.com
9	Malinda	Rohan	38	Derrick_Carroll49@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	Kacey	Quitzon	45	Corene_Jones@yahoo.com
1	Joel	O'Connell	45	Lester_Hermiston23@gmail.com
2	Brooks	Effertz	57	Zackery74@yahoo.com
3	Tiana	Hilpert	46	Harrison.Quitzon4@gmail.com
4	Flo	Graham	60	Freddie5@gmail.com
5	Timmothy	Quitzon	55	Henry_McCullough@gmail.com
6	Adele	Gleason	60	Jarrett23@gmail.com
7	Florian	Thiel-Von	35	Ericka_Lowe@yahoo.com
8	Vivian	Bergnaum	64	Elbert_Kovacek@gmail.com
9	Kristofer	Hagenes	43	Santiago.Collier@gmail.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Erik	Hoeger	43	Lea.Breitenberg93@yahoo.com
1	Florencio	Bechtelar	55	Juanita4@hotmail.com
2	Friedrich	Hartmann	39	Soledad31@hotmail.com
3	Katrine	Koelpin	30	Jerod_Hammes34@hotmail.com
4	Kenna	Dicki	51	River.Nikolaus74@hotmail.com
5	Kyle	Carroll	21	Zaria70@hotmail.com
6	Euna	Ziemann	32	Cristobal.Zemlak@gmail.com
7	Megane	Friesen	25	Merle.Jones@gmail.com
8	Thomas	Ward	25	Jarod_Nienow19@hotmail.com
9	Caleigh	Bahringer	26	Reggie2@yahoo.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	Isabel	O'Keefe	62	Ada.Robel30@gmail.com
1	Ansel	Pacocha	34	Luis.Kub@hotmail.com
2	Dandre	Gerlach	39	Hettie.Simonis@hotmail.com
3	Krystal	Reynolds	34	Koby.Romaguera99@gmail.com
4	Kelsie	Pagac	20	Ramona26@hotmail.com
5	Dominic	Harvey	51	Denis.Shanahan73@yahoo.com
6	Mike	Conn	49	Cade.Hoeger-Cormier66@hotmail.com
7	Rosalyn	McDermott	51	Art61@yahoo.com
8	Deontae	Runolfsdottir	49	Willow.Rempel26@hotmail.com
9	Dorothy	Aufderhar	43	Myrl_Friesen28@gmail.com
10	Alexandria	Rodriguez	25	Stephanie37@gmail.com
11	Patricia	Brakus	54	Keanu_Rosenbaum@hotmail.com
12	Aurore	Hayes	19	Georgette.OConner81@hotmail.com
13	Valerie	Mueller	55	Abner.Marks22@yahoo.com
14	Virgil	Wyman	20	Seamus.Kuvalis@gmail.com
15	Phyllis	Schroeder	23	Bernadette_Labadie@yahoo.com
16	Shaylee	Tremblay	64	Cynthia97@gmail.com
17	Armani	Mueller	32	Reid26@gmail.com
18	Whitney	Schamberger	36	Dora41@hotmail.com
19	Sydnee	Jakubowski	31	Cassidy_Kemmer@hotmail.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	Jadyn	DuBuque	63	Skylar.Muller@hotmail.com
11	Davon	King	39	Kaia3@gmail.com
12	Chauncey	Crona	36	Hilario30@hotmail.com
13	Concepcion	Reynolds	33	Presley_Watsica49@yahoo.com
14	Jaydon	Macejkovic	31	Hailie.Willms87@hotmail.com
15	Owen	Paucek	22	Verda.Rohan@hotmail.com
16	Alva	Goyette	57	Harvey68@yahoo.com
17	Leanna	Schmeler	47	Blaise_Schmeler@hotmail.com
18	German	Koch	61	Dakota65@hotmail.com
19	Tracy	Schmeler	28	Lafayette13@hotmail.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	Zelma	Wilkinson	38	Ressie.Fadel@hotmail.com
1	Leo	Wehner	46	Ellis.Reilly@hotmail.com
2	Cedrick	Kessler	42	Crystal_OKon68@hotmail.com
3	Karianne	Dare	56	Alejandrin16@hotmail.com
4	Mariam	Mayer	50	Elisa_Klocko@yahoo.com
5	Rowan	Rice	59	Josiah_Lueilwitz83@yahoo.com
6	Gregoria	Luettgen	32	Lane33@gmail.com
7	Raymundo	Erdman	43	Nicholaus7@gmail.com
8	Angie	Steuber	22	Vickie_Smitham@yahoo.com
9	Dorthy	MacGyver	31	Keagan.Altenwerth91@gmail.com
10	Jamel	Trantow	46	Berneice.Quitzon54@gmail.com
11	Elinore	Ritchie	47	Lorna17@hotmail.com
12	Arely	Cruickshank	47	Giovani19@gmail.com
13	Lea	Hills	39	Callie_Cremin@yahoo.com
14	Rosella	Sauer	54	Annamae97@yahoo.com
15	Terence	Schiller	42	Vincent64@gmail.com
16	Quinn	Hilpert	31	Astrid_Mante@hotmail.com
17	Markus	Hilpert	62	Lance_Ernser32@yahoo.com
18	Stacy	Konopelski	55	Brent.Hahn@gmail.com
19	Obie	Schowalter	45	Elenora.Kohler@gmail.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	Cory	Kozey	23	Kyleigh.Batz@gmail.com
1	Delphia	Gorczany	58	Coleman.Glover66@yahoo.com
2	Jared	Yost	27	Sydney_Purdy11@gmail.com
3	Javonte	West	24	Matt.Powlowski@gmail.com
4	Vicky	MacGyver	41	Jennings27@hotmail.com
5	Bette	Gleason	52	Jazlyn25@yahoo.com
6	Antonette	Kreiger	48	Jillian_Krajcik@hotmail.com
7	Lavern	Reinger	32	Malvina.Ebert@yahoo.com
8	Jaiden	Monahan	46	Cory_Armstrong@gmail.com
9	Junius	Ebert	62	Concepcion30@yahoo.com
10	Torrey	Hettinger	63	Aric22@hotmail.com
11	Kristoffer	Durgan	65	Derick57@yahoo.com
12	Jerel	Morissette	28	Marc.Abbott30@hotmail.com
13	Lyda	Bosco	30	Humberto.Parker@yahoo.com
14	Leonora	Waters	65	Wilburn.Goldner99@yahoo.com
15	Ahmed	Kemmer	30	Larissa_Hammes-Hartmann@yahoo.com
16	Tracey	Hauck	31	Rosamond94@gmail.com
17	Arnaldo	Thiel	61	Arlo_Kozey49@hotmail.com
18	Jeramie	McKenzie	36	Ana.Terry93@gmail.com
19	Hilario	Quitzon	62	Tremaine.Kunde94@gmail.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	Agnes	Schowalter	39	Rahsaan_Zieme71@gmail.com
1	Nat	McGlynn	57	Wellington_Jacobson81@hotmail.com
2	Rosalee	Koelpin	56	Retta_Wisozk18@yahoo.com
3	Lou	Von	23	Mike_Schaefer98@hotmail.com
4	Marie	Gorczany-Kertzmann	23	Roman_OKon5@gmail.com
5	Viva	Boyle	37	Alexa.Heidenreich@hotmail.com
6	Sean	Schaefer	55	Rickey0@yahoo.com
7	Jaunita	Koch	54	Delbert.Bayer78@yahoo.com
8	Derrick	Kunde	58	Joanie.Heidenreich90@hotmail.com
9	Brionna	Smitham	52	Lelah47@yahoo.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	Seamus	Okuneva	56	Mustafa_OKon32@yahoo.com
1	Jena	Klein	53	Ned64@hotmail.com
2	Brielle	Lang	37	Gonzalo70@gmail.com
3	Berneice	Fay	34	Lonnie_Feeney@gmail.com
4	Frederik	Hartmann	25	Dortha_Bradtke46@hotmail.com
5	Ima	Barton	50	Kelly_Smith44@yahoo.com
6	Evangeline	Rolfson	58	Amalia76@hotmail.com
7	Lyric	Brakus	53	Alysa40@hotmail.com
8	Ruthie	Ernser	36	Maude.Keeling12@hotmail.com
9	Lexie	Prohaska	26	Jairo17@hotmail.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	Chelsey	Aufderhar	19	Mossie.Hayes9@hotmail.com
1	Jamey	McGlynn	49	Jeromy53@gmail.com
2	Stephon	Cronin	35	Jarrod.Hegmann@hotmail.com
3	Willa	McDermott	45	Mozell_Ritchie@yahoo.com
4	Berneice	Bechtelar	61	Dario_Crist80@hotmail.com
5	Moshe	Durgan	39	Reginald78@gmail.com
6	Randal	Hartmann	56	Zoey71@hotmail.com
7	Buster	Kutch	21	Jackeline.Koepp-Gottlieb@yahoo.com
8	Kurt	Labadie	40	Daisha_Willms@yahoo.com
9	Erick	Dooley	37	Rodolfo.Hickle@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	Emanuel	Hoppe	64	Trever13@hotmail.com
1	Arely	Spinka	60	Patsy83@hotmail.com
2	Sammie	Goyette	28	Jaqueline34@hotmail.com
3	Isabella	Lindgren	46	Scotty83@yahoo.com
4	Mandy	Gerhold	23	Ettie.Schimmel@gmail.com
5	Jett	Lueilwitz	53	Aliyah.Anderson@gmail.com
6	Elsa	Schiller	20	Jacques2@yahoo.com
7	Jean	Hahn	42	Silas_Ryan-Parisian@gmail.com
8	Estelle	Schultz	49	Nikolas_Stark@hotmail.com
9	Edwin	Breitenberg	58	Delphine.Ferry@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	Leonie	Wolff	21	Jalyn.Wilkinson@gmail.com
1	Adeline	Wehner	32	Shea80@hotmail.com
2	Myrtie	Kling	42	Geovany.Heathcote82@yahoo.com
3	Liza	Auer	21	Wayne.Altenwerth@gmail.com
4	Devante	Leannon	32	Joseph37@yahoo.com
5	Abagail	Dare	21	Samara.Kub@hotmail.com
6	Francisca	Corkery	43	Adan.Gleason@yahoo.com
7	Sammie	Bogisich	20	Stephania29@yahoo.com
8	Zoila	Sanford	63	Celestino_Schmitt29@yahoo.com
9	Daisha	Corwin	25	Jillian_Shanahan@yahoo.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	Annamarie	Conroy	43	Malinda58@hotmail.com
1	Grady	Gusikowski	44	Ladarius_Schmeler@hotmail.com
2	Julio	Kuhic	27	Ariel15@yahoo.com
3	Stuart	Hagenes	61	Melba68@yahoo.com
4	Tom	Beier	29	Leda2@hotmail.com
5	Gust	Leuschke	54	Evelyn88@gmail.com
6	Lempi	Russel	60	Rogers_Bechtelar@gmail.com
7	Mikel	Hoppe	44	Adolfo.Russel22@gmail.com
8	Norris	McLaughlin	52	Giles_Crona@yahoo.com
9	Geraldine	Krajcik	28	Terrence7@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	Roosevelt	Gleason	28	Jadon67@yahoo.com
1	Elvie	Heathcote	21	Thalia.Bailey-Sanford@gmail.com
2	Kacie	Fadel	20	Frederick.Kulas@gmail.com
3	Hulda	Abernathy	54	Kirsten.Hilll@gmail.com
4	Gretchen	Rutherford	27	Jakayla_Cruickshank@hotmail.com
5	Mittie	Hyatt	38	Alverta.Bednar24@hotmail.com
6	Anya	Quitzon	54	Cleta55@hotmail.com
7	Hilbert	O'Kon	35	Burdette.Lowe@hotmail.com
8	Jerel	Moen	37	Ada_White57@gmail.com
9	Maynard	Hamill	54	Eleazar_Nikolaus@hotmail.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
0	Alisha	Walsh-Wilkinson	41	Greg0@gmail.com
1	Sandrine	Paucek	62	Ladarius70@gmail.com
3	Marion	Erdman	23	Suzanne.Larkin21@gmail.com
4	Abbie	Willms	39	Brielle42@gmail.com
5	Yasmine	Dickinson	33	Meda.Brown@gmail.com
7	Myah	Kuhic	20	Bert_Johnston@gmail.com
9	Rosamond	Klocko	39	Moses82@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	Derrick	Goldner	44	Belle73@gmail.com
1	Aiyana	Rempel	30	Clyde73@gmail.com
2	Evangeline	Cummerata	35	Magdalena.Dooley-Frami@gmail.com
3	Cayla	Cummings	27	Loraine80@gmail.com
4	Cielo	Lowe	21	Emilio.OHara89@gmail.com
5	Judah	Haag	39	Frieda_Marquardt@gmail.com
6	Catharine	Quigley	18	Kiel.Bogan@gmail.com
7	Calista	Stokes	28	Fiona_Fahey@gmail.com
8	Amy	Schmidt	23	Shakira8@yahoo.com
9	Briana	O'Keefe	58	Carlotta_Kihn@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	Eusebio	Kiehn	65	Dolores_Tromp57@gmail.com
1	Anabel	Hickle	61	Talia47@hotmail.com
2	Chanelle	Marquardt	19	Nicholaus.Smitham23@hotmail.com
3	Clemens	Gorczany	54	Jerad.Mills17@yahoo.com
4	Aimee	Moen-Schiller	45	Molly.Zieme@gmail.com
5	Jeramie	Watsica	47	Jerel4@yahoo.com
6	Kristoffer	Pfannerstill	59	Marie71@hotmail.com
7	Evangeline	Pacocha-Wolff	40	Hector_Reichel@hotmail.com
8	Raleigh	Schmeler	26	Dante.Padberg@yahoo.com
9	Yvette	Murazik	47	Jerod_Green@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	Jocelyn	Schmeler	58	Kristy_Murazik25@hotmail.com
1	Humberto	Stehr	36	Corene41@gmail.com
2	Layla	Simonis	23	Rylan.Roob@hotmail.com
3	Penelope	Botsford	31	Amelia.Wolf25@hotmail.com
4	Kaylie	Corwin	21	Camron.Smitham@yahoo.com
5	Gracie	Rogahn	25	Araceli_Halvorson16@hotmail.com
6	Leslie	Abshire	34	Fannie_Gleichner4@yahoo.com
7	Leanne	Leuschke	31	Makenzie_Considine@gmail.com
8	Jordyn	Lang	61	Deron.Mayert-Schmeler97@hotmail.com
9	Keely	Wilkinson	28	Herman.Baumbach@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