Table

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

id	firstName	lastName	age	email
0	Joana	Nikolaus	45	Jessica.Hahn@hotmail.com
1	Joy	Auer	57	Bryce88@hotmail.com
2	Lonzo	Crist	57	Layne.Stracke76@gmail.com
3	Audrey	Murphy	39	Marlee50@gmail.com
4	Norval	Durgan	29	Cruz95@hotmail.com
5	Alvis	Stehr	37	Jana_Nitzsche-Ondricka1@gmail.com
6	Joann	Smith	38	Syble_Kertzmann@hotmail.com
7	Zita	Trantow	18	Chanelle.Smitham52@gmail.com
8	Joanne	Treutel-Dach	20	Garland_Wilderman40@gmail.com
9	Nelle	Kilback	44	Matilde.Fay@yahoo.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	Otto	Gerlach	53	Kali.Blanda80@yahoo.com
1	Cali	Aufderhar	63	German_Ruecker79@hotmail.com
2	Kaya	Krajcik	19	Lyla1@gmail.com
3	Helene	Moen	41	Jaden.Volkman26@gmail.com
4	Libbie	Stroman	37	Odie.Williamson32@yahoo.com
5	Juliet	Steuber	27	Alessia53@hotmail.com
6	Megan	Little	38	Joseph33@yahoo.com
7	Earnestine	Hudson	31	Rosamond.OHara@hotmail.com
8	Kayli	Skiles-Bode	48	Ezra_Steuber@yahoo.com
9	Quinn	Haag	60	Piper.Weimann-Cassin@gmail.com

id	firstName	lastName	age	email
0	Otto	Gerlach	53	Kali.Blanda80@yahoo.com
1	Cali	Aufderhar	63	German_Ruecker79@hotmail.com
2	Kaya	Krajcik	19	Lyla1@gmail.com
3	Helene	Moen	41	Jaden.Volkman26@gmail.com
4	Libbie	Stroman	37	Odie.Williamson32@yahoo.com
5	Juliet	Steuber	27	Alessia53@hotmail.com
6	Megan	Little	38	Joseph33@yahoo.com
7	Earnestine	Hudson	31	Rosamond.OHara@hotmail.com
8	Kayli	Skiles-Bode	48	Ezra_Steuber@yahoo.com
9	Quinn	Haag	60	Piper.Weimann-Cassin@gmail.com

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

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

Change Size

id	firstName	lastName	age	email
0	Onie	Brekke	30	Lulu43@gmail.com
1	Chelsie	Zemlak	64	Jessie21@yahoo.com
2	Brice	Mohr	30	Kristie.Murray59@hotmail.com
3	Olin	Daniel	20	Ivory.Littel@hotmail.com
4	Greg	Streich	63	Edgardo_Altenwerth@gmail.com
5	Kailey	Littel	46	Osbaldo_Wuckert4@yahoo.com
6	Caden	Konopelski	19	Miracle78@hotmail.com
7	Barrett	Moen	18	Sherry.Balistreri@hotmail.com
8	Abigail	Carter	46	Arturo_Kessler37@gmail.com
9	Sabina	Hansen	57	Dereck_Bednar13@gmail.com

id	firstName	lastName	age	email
0	Onie	Brekke	30	Lulu43@gmail.com
1	Chelsie	Zemlak	64	Jessie21@yahoo.com
2	Brice	Mohr	30	Kristie.Murray59@hotmail.com
3	Olin	Daniel	20	Ivory.Littel@hotmail.com
4	Greg	Streich	63	Edgardo_Altenwerth@gmail.com
5	Kailey	Littel	46	Osbaldo_Wuckert4@yahoo.com
6	Caden	Konopelski	19	Miracle78@hotmail.com
7	Barrett	Moen	18	Sherry.Balistreri@hotmail.com
8	Abigail	Carter	46	Arturo_Kessler37@gmail.com
9	Sabina	Hansen	57	Dereck_Bednar13@gmail.com

id	firstName	lastName	age	email
0	Onie	Brekke	30	Lulu43@gmail.com
1	Chelsie	Zemlak	64	Jessie21@yahoo.com
2	Brice	Mohr	30	Kristie.Murray59@hotmail.com
3	Olin	Daniel	20	Ivory.Littel@hotmail.com
4	Greg	Streich	63	Edgardo_Altenwerth@gmail.com
5	Kailey	Littel	46	Osbaldo_Wuckert4@yahoo.com
6	Caden	Konopelski	19	Miracle78@hotmail.com
7	Barrett	Moen	18	Sherry.Balistreri@hotmail.com
8	Abigail	Carter	46	Arturo_Kessler37@gmail.com
9	Sabina	Hansen	57	Dereck_Bednar13@gmail.com

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

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

Change Color Scheme

id	firstName	lastName	age	email
0	Ulices	Blick	43	Casper80@gmail.com
1	Jamir	Turner	60	Kade2@yahoo.com
2	Brook	Baumbach	33	Darien_VonRueden@yahoo.com
3	Shania	West	27	Kali65@gmail.com
4	Irwin	Gottlieb	48	Eldridge.Lockman63@hotmail.com
5	Ellie	Hessel-Bradtke	36	Johnpaul_Larkin@gmail.com
6	Lonzo	McDermott	56	Whitney73@yahoo.com
7	Eladio	Schmitt	39	Jed_Greenfelder76@gmail.com
8	Ward	Harber	62	Hilda.Walker53@gmail.com
9	Davon	Kuhic	24	Betsy85@yahoo.com

id	firstName	lastName	age	email
0	Ulices	Blick	43	Casper80@gmail.com
1	Jamir	Turner	60	Kade2@yahoo.com
2	Brook	Baumbach	33	Darien_VonRueden@yahoo.com
3	Shania	West	27	Kali65@gmail.com
4	Irwin	Gottlieb	48	Eldridge.Lockman63@hotmail.com
5	Ellie	Hessel-Bradtke	36	Johnpaul_Larkin@gmail.com
6	Lonzo	McDermott	56	Whitney73@yahoo.com
7	Eladio	Schmitt	39	Jed_Greenfelder76@gmail.com
8	Ward	Harber	62	Hilda.Walker53@gmail.com
9	Davon	Kuhic	24	Betsy85@yahoo.com

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

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

Add Outer Border

To add an outer border, set withBorder to true.

id	firstName	lastName	age	email
0	Fletcher	Kuphal	43	Kenny58@gmail.com
1	Carey	Reichel	47	Vaughn69@yahoo.com
2	Alexie	Little	18	Alaina73@yahoo.com
3	Monty	Kling	26	Fritz66@yahoo.com
4	Amos	Ankunding	57	Russ23@gmail.com
5	Dwight	Hahn	22	Leopoldo.Gerlach45@hotmail.com
6	Robyn	Volkman	62	Alice52@yahoo.com
7	Karli	Robel	50	Savion.Collins@gmail.com
8	Irvin	Blanda	27	Golden_Fisher37@yahoo.com
9	Aiyana	Sipes	37	Titus.Kreiger84@gmail.com

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

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

Add Column Separators

To add column separators, set withColumnBorders to true.

id	firstName	lastName	age	email
0	Lorna	Tremblay	62	Issac_Hickle@hotmail.com
1	Ephraim	Blick	62	Doreen.Torphy16@yahoo.com
2	Terrence	Smitham-Becker	48	Joesph_Ullrich58@hotmail.com
3	Raven	Macejkovic	28	Daphney_Beatty@hotmail.com
4	Raina	Gottlieb	47	Marquise_Oberbrunner@gmail.com
5	Vanessa	O'Kon	56	London.Champlin@gmail.com
6	Wilfrid	Wintheiser	37	Maye_Wintheiser@gmail.com
7	Sydnee	Olson	40	Montana_Langosh18@hotmail.com
8	Shelley	Wolff	61	Vincenzo14@yahoo.com
9	Isobel	Bernhard-Cremin	59	Kaleb_Mueller46@hotmail.com

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

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

Highlight on Row Hover

To highlight rows when hovered, set highlightOnHover to true.

id	firstName	lastName	age	email
0	Luz	White	45	Cameron_Baumbach@yahoo.com
1	Arvel	Pouros	27	Ulices.Sanford@hotmail.com
2	Roderick	Jaskolski	23	Sonny.Batz91@yahoo.com
3	Jacinto	Wolf	36	Stacey20@yahoo.com
4	Earl	Legros	57	Nicholaus19@hotmail.com
5	Sage	Kemmer	30	Muhammad.Grimes48@yahoo.com
6	Troy	Waters	37	Wava.Marquardt@hotmail.com
7	Meaghan	Willms	51	Mabelle.Bashirian@yahoo.com
8	Trent	Jones	21	Makenna40@yahoo.com
9	Edwin	Farrell-Lindgren	47	Osborne72@hotmail.com

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

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

Striped

To enable striped rows, set striped to true.

id	firstName	lastName	age	email
0	Rosemarie	Feeney	25	Jed35@yahoo.com
1	Laurence	Wintheiser	18	Beau_Schoen@hotmail.com
2	Schuyler	Muller	42	Jackson.Graham64@gmail.com
3	Eleanor	Barrows	62	Annie.Grady@gmail.com
4	Keely	Mraz	52	Sierra_Turner21@yahoo.com
5	Madge	Kemmer	61	Jed17@gmail.com
6	Ricardo	Dibbert	50	Amiya_Schaden@gmail.com
7	Jaylon	McKenzie	59	Giovanna_Cronin60@yahoo.com
8	Henri	Mitchell	42	Isom.Farrell80@hotmail.com
9	Maximus	Crist	18	Meta64@yahoo.com

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

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

Scroll Area

To enable scroll area, set withScrollArea to true.

id	firstName	lastName	age	email	phone	role	status	createdAt	updatedAt
0	Tianna	Dietrich	55	Sallie99@gmail.com	1-597-486-2648 x074	user	inactive	5/9/2026	5/10/2026
1	Darby	Hauck	34	Percival93@gmail.com	(365) 867-4965 x256	user	inactive	12/22/2025	5/1/2026
2	Hallie	Stokes	29	Freida.Klocko85@gmail.com	983-715-0895 x75997	user	inactive	2/19/2026	7/17/2026
3	Freddy	D'Amore	43	Kailee.Mayer43@yahoo.com	955.890.0263 x3221	user	active	3/4/2026	4/22/2026
4	Jaron	Hegmann	46	Milan.Murphy44@hotmail.com	895-273-7850 x096	user	active	7/9/2026	4/25/2026
5	Stefanie	Langworth	31	Hermann_Ortiz6@gmail.com	392.312.4541 x3288	admin	active	7/29/2026	7/17/2026
6	Darron	Rice	18	Merlin.OKeefe@gmail.com	(521) 285-2938 x679	admin	inactive	12/6/2025	4/11/2026
7	Deja	Schimmel	46	Weldon.Yost@yahoo.com	(515) 839-3599 x33149	user	inactive	6/4/2026	12/26/2025
8	Lennie	Gibson	26	Vera1@gmail.com	(772) 272-0203 x3947	user	inactive	3/4/2026	3/7/2026
9	Michelle	Toy	55	Clayton85@gmail.com	765-385-7523 x07425	user	active	8/10/2026	3/18/2026

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

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

Header Groups

id	user
	name		age	email
	firstName	lastName	age	email
0	Zoe	Zieme	64	Raleigh.Kautzer13@hotmail.com
1	Telly	Williamson	51	Keegan_Leffler@yahoo.com
2	Jarret	Osinski	37	Schuyler_Trantow8@hotmail.com
3	Mariam	Carter	65	Hobart.Fadel30@yahoo.com
4	Tyshawn	Cartwright	46	Sid.Hackett@hotmail.com
5	Savanah	Yundt	19	Melisa_Pollich@gmail.com
6	Eliseo	Gerhold	51	Modesta79@gmail.com
7	Adelbert	Rohan	56	Rolando_Johnston96@gmail.com
8	Manuel	Champlin	63	Fay_Hoeger@hotmail.com
9	Mack	Collins	33	Hoyt_Crist76@yahoo.com

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

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

id	user
	name		age	email
	firstName	lastName	age	email
0	Lew	Spencer	36	Tamia.Kreiger@hotmail.com
1	Tasha	Ernser	57	Clemens.McKenzie@hotmail.com
2	Timmothy	Pfannerstill	30	Selena.Yost@gmail.com
3	Kian	Bosco	58	Dovie9@gmail.com
4	Odie	Lueilwitz	33	Jazmin66@hotmail.com
5	Bennie	VonRueden	41	Vincenza_Bruen81@hotmail.com
6	Sammy	Tremblay	62	Tressie_OConner@gmail.com
7	Tia	Hayes	61	Nicklaus26@yahoo.com
8	Dakota	Kshlerin	21	Jamey_Hintz69@gmail.com
9	Peyton	Kuhic	52	Keenan80@yahoo.com
id	firstName	lastName	age	email
	name		age	email
	user

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

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

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

id	firstName	lastName	age	email
0	Allan	Adams	59	Idell_Beier@hotmail.com
1	Stefanie	Armstrong-Hansen	62	Lexi_Mertz@gmail.com
2	Kameron	Mayert	31	Dee0@yahoo.com
3	Denis	Flatley	37	Augusta.Wiegand@hotmail.com
4	Tamara	Quigley	59	Jennifer11@yahoo.com
5	Hildegard	McKenzie	30	Christop92@yahoo.com
6	Della	Howell	40	Cora.Smitham71@gmail.com
7	Jovani	Swaniawski	32	Alec98@yahoo.com
8	Robbie	Stamm	37	Antonette_Morissette51@hotmail.com
9	Lawrence	Leuschke	46	Dorthy.Wilderman78@hotmail.com

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

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

Set Initial Focusable Cell

To set the initial focusable cell, set initialFocusableCell to an object with the column and row indices ({ colIndex: number, rowIndex: number }). The default is { colIndex: 0, rowIndex: 0 }.

id	firstName	lastName	age	email
0	Ari	Frami	18	Zachery.Wyman@yahoo.com
1	Lauriane	Glover	60	Robert_OConnell@yahoo.com
2	Jan	Kshlerin	35	Darren.OHara16@gmail.com
3	Aditya	Schuster	49	Anderson.Schmidt72@hotmail.com
4	Jermain	Funk	40	Addison_Rippin@yahoo.com
5	Steven	Murray	61	Eloise.Streich@yahoo.com
6	Christine	Baumbach	50	Tobin.Berge34@hotmail.com
7	Rochelle	Franey	19	Alexanne16@gmail.com
8	Jedidiah	Dickinson	48	Vivien.Kerluke38@gmail.com
9	Emory	Vandervort	21	Barry_Murray10@yahoo.com

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

return (
  <Table
    columns={columns}
    data={data}
    initialFocusableCell={{ colIndex: 1, rowIndex: 0 }}
    withScrollArea
  />
)

Handle Row Click Event

To handle the row click event, use onRowClick.

id	firstName	lastName	age	email
0	Judy	Rutherford	64	Scot69@hotmail.com
1	Rodrigo	Brown	28	Alisa_Mann@hotmail.com
2	Teri	Cremin	50	Eusebio_Cummings@yahoo.com
3	Jacques	Kuhlman	37	Maudie77@hotmail.com
4	Johnathan	Hyatt	30	Alicia.Hessel@gmail.com
5	Javier	Hirthe	26	Arno.Kshlerin@gmail.com
6	Vallie	Parker	33	Rosamond.Beahan40@hotmail.com
7	Camryn	Wunsch	59	Lyle29@gmail.com
8	Dino	Murazik	38	Haven.Simonis92@yahoo.com
9	Rose	Wunsch	51	Deondre_Shanahan3@gmail.com

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

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

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

Handle Row Double Click Event

To handle the row double click event, use onRowDoubleClick.

id	firstName	lastName	age	email
0	Elwin	O'Connell	41	Henrietta.Satterfield@hotmail.com
1	Lew	Mertz	51	Demetrius_Dicki81@yahoo.com
2	Okey	Lesch-Klein	28	Jaiden.Bergnaum90@hotmail.com
3	Avery	Breitenberg	25	Faye.Rutherford@yahoo.com
4	Kirsten	Daniel	20	Ashley.Renner83@yahoo.com
5	Peter	Stark	22	Reynold47@hotmail.com
6	Sven	Koelpin	61	Cassandra_Daniel@yahoo.com
7	Lance	Trantow	35	Willy.Connelly@yahoo.com
8	Kolby	Ondricka	22	Anastasia76@hotmail.com
9	Ian	Senger	21	Darrell_Hyatt80@yahoo.com

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

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

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

Set Default Sorting

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

id	firstName	lastName	age	email
1	Ivan	Bergnaum	61	Destiny_Brekke59@yahoo.com
2	Shaun	Balistreri	57	Moriah.Klocko50@hotmail.com
3	Chyna	Cummings	51	Berniece44@yahoo.com
7	Vernon	Cartwright	47	Camylle.Legros-Wisoky@gmail.com
5	Penelope	Grady	37	Eldon28@gmail.com
0	Sibyl	Brown	35	Kerry77@hotmail.com
6	Devon	Nader	32	Frank68@yahoo.com
9	Haven	Schmitt	23	Dayana7@hotmail.com
4	Fritz	McLaughlin	22	Dimitri93@gmail.com
8	Tyree	Trantow	18	Tanya_Berge90@yahoo.com

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

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

Disable Sorting

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

id	firstName	lastName	age	email
0	Lamar	Ankunding	53	Roslyn.McDermott49@hotmail.com
1	Magnus	Collier	42	Vito83@hotmail.com
2	Melany	Williamson	30	Valentine_Douglas67@gmail.com
3	Thelma	Bernier	47	Loren_Prosacco@hotmail.com
4	Melany	Cronin	52	Makenzie86@yahoo.com
5	Earline	Lockman	27	Alexandria56@hotmail.com
6	Michel	Barton	52	Leigh_Larkin@gmail.com
7	Colt	Stokes-Langworth	18	Nya5@yahoo.com
8	Jarrett	Schulist	20	Jayce.Walker48@hotmail.com
9	Ethel	McGlynn	39	Irene_Kassulke21@yahoo.com

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

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

Disable Multi Sorting

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

id	firstName	lastName	age	email
0	Zoe	Yost	47	Caleigh_Frami50@hotmail.com
1	Enola	Strosin	25	Julio.Cormier40@hotmail.com
2	Hiram	Grimes	20	Jena_OConnell93@hotmail.com
3	Jadon	Bailey	59	Toby1@gmail.com
4	Kathy	Ledner	39	Modesta_Schroeder84@gmail.com
5	Fannie	McClure	24	Jorge.Koss@yahoo.com
6	Katelin	Champlin	38	Geraldine_Greenfelder@hotmail.com
7	Jasen	Beatty	36	Frieda21@hotmail.com
8	Savanah	Goyette	53	Wiley.Toy46@yahoo.com
9	Alfred	Hansen	20	Julius_Schumm11@gmail.com

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

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

Set Maximum Sortable Columns

To set the maximum sortable columns, set maxMultiSortColCount to a number.

id	firstName	lastName	age	email
0	Irwin	Lowe	63	Cynthia77@hotmail.com
1	Danial	Fritsch	54	Milford_Halvorson@hotmail.com
2	Verna	Hammes	62	Sim4@yahoo.com
3	Jaylen	Crooks	57	Timmy.Weimann34@yahoo.com
4	Carla	Lemke	58	Samanta41@gmail.com
5	Jamison	Cremin	50	Ruthie55@gmail.com
6	Gerry	Rath	37	Alfredo81@gmail.com
7	Jenna	Harber	60	Daisha68@gmail.com
8	Talia	Considine	43	Keeley76@hotmail.com
9	Aubrey	Dietrich	62	Ashton.Kiehn33@hotmail.com

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

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

Manual Sorting

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

id	firstName	lastName	age	email
0	Isom	Hane	34	Macey_Emard41@yahoo.com
1	Candida	Kuhic	27	Roxane75@yahoo.com
2	Willow	Runolfsson	20	Herbert.Blanda16@gmail.com
3	Elaina	Morar	23	Antwon.Schaefer@yahoo.com
4	Norma	Gulgowski	37	Marilyn.Jast19@hotmail.com
5	Wilma	Collins	45	Jed.Heidenreich-Labadie@gmail.com
6	Pinkie	Jenkins	54	Layla.Kessler@hotmail.com
7	Dillon	Stracke	62	Becky99@yahoo.com
8	Marilou	Brakus	45	Cesar.Stehr8@yahoo.com
9	Reina	Parisian	34	Bruce95@yahoo.com

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

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

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

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

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

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

id	firstName	lastName	age	email
0	Pattie	Mraz	22	Federico65@gmail.com
1	Addison	Koch	44	Ron.OConnell@yahoo.com
2	Ryley	Abernathy	27	Jefferey47@hotmail.com
3	Kenyatta	Mertz	33	Margarete_Zemlak@hotmail.com
4	Marlen	Green	57	Marielle_Witting@hotmail.com
5	Celestine	Reichel	24	Sigurd.Rowe@gmail.com
6	Noemi	Bosco	56	Myrna7@gmail.com
7	Jonatan	Harvey	32	Marjolaine.Windler71@hotmail.com
8	Maribel	Douglas	31	Jovani48@gmail.com
9	Michaela	Gutmann	42	Jimmy99@yahoo.com

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

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

Control Sorting

id	firstName	lastName	age	email
0	Elian	Graham	35	Marsha18@yahoo.com
1	Ocie	Terry	60	Vincent_Koelpin1@gmail.com
2	Harley	Lang	25	Flavio_Gleason58@yahoo.com
3	Essie	Spencer	50	Heather32@hotmail.com
4	Tina	Kautzer	38	Orin.Schiller@gmail.com
5	Colt	Armstrong	40	Alexandrea32@hotmail.com
6	Rosalia	Grant	57	Cristian_Kovacek@hotmail.com
7	Wade	McLaughlin	30	Sean16@hotmail.com
8	Shayne	Altenwerth	41	Kiera63@gmail.com
9	Jane	Kozey	27	Brielle_Corwin@gmail.com

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

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

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

Enable Pagination

To enable pagination, set enablePagination to true and set the component that controls the pagination to header or footer. The default is false.

id	firstName	lastName	age	email
0	Elenora	Kub	43	Ray_Langworth@hotmail.com
1	Shelley	Pfannerstill	25	Kurt64@hotmail.com
2	Presley	Wunsch	50	Lois.Berge@hotmail.com
3	Evalyn	Goyette	18	Frederique_Rowe@yahoo.com
4	Floyd	Volkman	60	Kyle_Witting@yahoo.com
5	Glenn	Littel	55	Vladimir.Bruen31@hotmail.com
6	Alverta	Gibson	30	Jaeden_Hermann78@gmail.com
7	Brando	Murphy-Kassulke	35	Astrid_Nader85@gmail.com
8	Brady	Ritchie	27	Lavern49@hotmail.com
9	Shanon	Hyatt	33	Cleta.Langworth32@gmail.com
10	Guillermo	Kessler	56	Austyn.Paucek@gmail.com
11	Marian	Ward	44	Omar82@yahoo.com
12	Ashton	Quitzon	58	Paxton_Mohr47@gmail.com
13	Billy	Kautzer	41	Demond_Flatley@gmail.com
14	Zion	Hodkiewicz	40	Jalyn.Stracke60@yahoo.com
15	Buford	Wisoky	40	Yasmine_Hartmann24@yahoo.com
16	Lori	Kessler	48	Pearline.Herzog58@gmail.com
17	Rosalind	Halvorson	44	Kirsten_Feest25@gmail.com
18	Kent	Hermiston	27	Jaylen.Hand40@gmail.com
19	Zetta	Jakubowski	29	Emelia.Gleichner@gmail.com

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

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

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

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

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

Set Default Page Index and Page Size

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

id	firstName	lastName	age	email
10	Clark	Crist	62	Mercedes.Howell43@yahoo.com
11	Nichole	Reinger	55	Lee.Adams@gmail.com
12	Bryant	Funk	28	Kristin_Smitham38@gmail.com
13	Cale	Johns	36	Megane.Krajcik@hotmail.com
14	Monty	Lueilwitz	56	Estell53@yahoo.com
15	Johnny	Wyman	25	Ignatius_Feil@yahoo.com
16	Ernie	Littel	26	Jovan.Batz-Bashirian9@yahoo.com
17	Katrine	Quigley	54	Pasquale.Herman@gmail.com
18	Beryl	Lowe	49	Fern.Bartell@hotmail.com
19	Drake	Wilderman	46	Milford_Kris7@gmail.com

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

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

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

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

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

Use Manual Pagination

To use manual pagination, set manualPagination to true. The default is false.

id	firstName	lastName	age	email
0	Ashlee	Little	51	Chandler86@yahoo.com
1	Reina	Effertz	49	Kyla28@gmail.com
2	Patrick	Haley	32	Malachi82@gmail.com
3	Lessie	Dietrich	62	Andrew.Kris-Hermann57@gmail.com
4	Lura	Weissnat	50	Walter.Schmeler54@hotmail.com
5	Tremayne	Murray	48	Kaya.Weimann@gmail.com
6	Coy	Mills	47	Jacob_Johnson@gmail.com
7	Yessenia	Williamson	19	Karine23@gmail.com
8	Darrin	Feeney	41	Charles85@yahoo.com
9	John	Cole	65	Amira.Schamberger57@hotmail.com
10	Berry	Kunze	53	Terri.Mills53@yahoo.com
11	Katlyn	Corkery	40	Mina98@hotmail.com
12	Jayde	Mueller	36	Ronny_Berge27@gmail.com
13	Ruthie	Keeling	22	Justina.Hirthe@gmail.com
14	Madelynn	Jones	58	Jairo3@gmail.com
15	Eriberto	Klein	52	Lisandro_Greenfelder@gmail.com
16	Gail	Paucek	62	Amari26@yahoo.com
17	Mortimer	Swaniawski-Champlin	22	Dayna.Runte@hotmail.com
18	Shannon	Ondricka	47	Sergio.Wolff@gmail.com
19	Taya	Swift	22	Orlando.Durgan@gmail.com

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

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

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

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

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

Control Pagination

id	firstName	lastName	age	email
0	Janice	Zieme	59	Bernard_McClure@yahoo.com
1	Ciara	Nader	58	Shirley_Haag78@yahoo.com
2	Antone	Rolfson-Nolan	54	Gerard77@yahoo.com
3	Torey	Bechtelar	46	Myles_Hills@gmail.com
4	Jan	Keeling	55	Corene.Sipes@yahoo.com
5	Allie	Windler	35	Katherine_Vandervort22@gmail.com
6	Josiah	Bartell	29	Toney71@hotmail.com
7	Bethel	Brown	42	Arnold.Witting48@gmail.com
8	Roselyn	Towne	29	Jamey.Kilback@yahoo.com
9	Alexandrine	Hyatt	50	Miguel54@yahoo.com
10	Monserrat	Gusikowski	64	Ahmad49@gmail.com
11	Kelsi	Flatley	50	Alana.Volkman@gmail.com
12	Lorenzo	Herzog	31	Becky37@hotmail.com
13	Sedrick	Murazik	42	Natasha.Kunze-McDermott@yahoo.com
14	Valerie	Bauch	34	Zoe76@gmail.com
15	Jordi	Runte	35	Kylee.Beatty4@hotmail.com
16	Elody	Feeney	22	Rahul_Johns@yahoo.com
17	Koby	Armstrong	40	Emmanuelle.Lowe@yahoo.com
18	Ernestine	Thiel	54	Justice72@hotmail.com
19	Elise	Breitenberg	50	Kavon.Satterfield@gmail.com

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

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

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

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

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

Enable Row Selection

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

id	firstName	lastName	age	email
0	Kenneth	Reilly	63	Jeanne44@yahoo.com
1	Meta	Hagenes-Yundt	55	Maurice88@hotmail.com
2	Keara	Conn	26	Milan.Baumbach@gmail.com
3	Cassandra	Kuvalis	34	Abigayle66@hotmail.com
4	Alfred	Wiza	24	Coralie70@yahoo.com
5	Newell	Barrows	26	Enrique.Sawayn64@hotmail.com
6	Julian	Bauch	51	Emelie55@hotmail.com
7	Marques	Altenwerth	52	Izabella65@hotmail.com
8	Murl	Zboncak	62	Elody_Krajcik@gmail.com
9	Skye	Kuphal	31	Leonard62@hotmail.com

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

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

Set Default Selected Rows

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

id	firstName	lastName	age	email
0	Martine	Flatley	54	Jacynthe.Toy73@gmail.com
1	Camilla	Pacocha	48	Foster_Boehm@hotmail.com
2	Coty	Howell	43	Danyka.Hamill27@gmail.com
3	Penelope	Powlowski-Ankunding	29	Freddy.Smitham-Prohaska61@gmail.com
4	Jaylin	Bogisich	27	Titus_Reynolds35@gmail.com
5	Lambert	Huel	64	Providenci_Jacobi@yahoo.com
6	Brandy	Kassulke	25	Avery_Yundt@hotmail.com
7	Beau	Emard	43	Bria.Macejkovic@yahoo.com
8	Rahsaan	Schulist	31	Ray_Heathcote47@gmail.com
9	Kamryn	Bruen	52	Ward_Ward72@hotmail.com

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

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

Enable Row Selection on Click

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

id	firstName	lastName	age	email
0	Blanche	Turcotte	30	Oleta28@hotmail.com
1	Conor	Spencer	27	Margret_Langosh86@gmail.com
2	Xavier	Walter	58	Judd.Bergnaum51@gmail.com
3	Lane	Ratke	25	Sidney.Wyman@hotmail.com
4	Althea	Bergstrom	45	Nash_Mertz70@yahoo.com
5	Clay	Goodwin	32	Oceane.Harvey@yahoo.com
6	Humberto	Olson	40	Myra_McLaughlin@yahoo.com
7	Lelia	Wisoky	24	Garry5@gmail.com
8	Crystal	Jerde	43	Damian.Wintheiser@yahoo.com
9	Eleonore	Lakin	61	Kristen.Blick@yahoo.com

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

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

Hide Checkbox

To hide the checkbox, set withCheckbox to false. The default is true.

id	firstName	lastName	age	email
0	Jackson	Pagac	44	Camren.Koss@yahoo.com
1	Jonatan	Walker	55	Shemar_Jacobs@yahoo.com
2	Gilberto	Bogan	19	Angela.Mayert6@gmail.com
3	Devyn	Yundt	33	Amaya78@hotmail.com
4	Eugenia	Ryan-Schultz	20	Elissa44@yahoo.com
5	Marvin	Barton	34	Candido73@yahoo.com
6	Winnifred	Conroy	24	Aubrey.Crist96@yahoo.com
7	Kianna	Stehr	22	Lauretta.Donnelly@hotmail.com
8	Adrien	Hagenes	22	Jakob_Bartoletti@gmail.com
9	Annamae	Torphy	39	Mack.Oberbrunner-Quitzon@yahoo.com

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

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

Disable Row

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

id	firstName	lastName	age	email
0	Coy	Keeling	42	Hazel.Schumm@yahoo.com
1	Neal	Osinski	63	Ambrose0@gmail.com
2	Emerson	Prohaska	60	Rufus.Zboncak61@gmail.com
3	Laury	Heaney	39	Jennie.Russel@gmail.com
4	Jarvis	Bartoletti	22	Kristian76@hotmail.com
5	Meda	Rutherford	43	Jeffrey31@gmail.com
6	Claudine	Kerluke	54	Cecilia_Spinka@gmail.com
7	Stephanie	Fay	42	Crystel_Anderson83@gmail.com
8	Maude	Zboncak	63	August.Bogisich67@hotmail.com
9	Christina	Harris	28	Faye35@hotmail.com

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

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

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

Control Row Selection

id	firstName	lastName	age	email
0	Omari	Wisoky	37	Alyson80@hotmail.com
1	Mack	Hilll-Hickle	47	Wellington56@gmail.com
2	Misael	Little	31	Maxie.Leuschke@hotmail.com
3	Camryn	Mante	55	Terri_Carter30@yahoo.com
4	Sydni	Durgan	57	Kevin41@hotmail.com
5	Hattie	Mayer	19	Dock_Pfannerstill@hotmail.com
6	Monroe	Trantow	29	Reilly99@hotmail.com
7	Christine	Von	44	Rodrigo_Koss42@hotmail.com
8	Rubye	Feest	57	Veronica.Harber-Lebsack39@gmail.com
9	Logan	Auer	27	Jayme.Abernathy@gmail.com

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

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

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

Use Filter

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

id	firstName	lastName	age	email
0	Kendall	Howell	56	Zoe27@hotmail.com
1	Elta	Senger	43	Shelley9@gmail.com
2	Eloy	Stracke	56	Noemie_OKon89@gmail.com
3	Bailey	Homenick	46	Matteo74@gmail.com
4	Bernadette	Schultz	42	Rogelio_Feest@yahoo.com
5	Kale	Leffler	28	Stuart.Friesen@hotmail.com
6	Cydney	Swaniawski	35	Lilly_Corkery@yahoo.com
7	Dwight	Champlin	62	Justyn92@gmail.com
8	Shaylee	Wuckert	49	Vince_Swift49@hotmail.com
9	Linnie	Lindgren	60	Ila28@hotmail.com

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

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

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

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

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

Set Default Filter

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

id	firstName	lastName	age	email
5	Obie	Raynor	33	Baby.Pollich@gmail.com
7	Reid	Schmeler	47	Werner.Glover-Homenick@gmail.com
8	Isabelle	Cummings	21	Estrella.Hoppe@gmail.com
9	Rafael	Zieme	47	Sabina32@gmail.com

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

return (
  <VStack>
    <Table
      columns={columns}
      data={data}
      defaultColumnFilters={[{ id: "email", value: "gmail" }]}
      header={(table) => {
        const value =
          (table.getColumn("email")?.getFilterValue() as string | undefined) ??
          ""

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

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

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

Control Filter

id	firstName	lastName	age	email
0	Dianne	Jacobi	64	Julius95@hotmail.com
1	Odessa	Batz	54	Edmond_Renner81@gmail.com
2	Jaylan	Hills	37	Berneice.Hartmann@yahoo.com
3	Adell	Sporer	42	Romaine_Feil75@hotmail.com
4	Vergie	Keeling	51	Randy10@gmail.com
5	Rosemary	Kilback	43	Magdalena.Abernathy@gmail.com
6	Javonte	Quigley	58	Tate.Strosin31@hotmail.com
7	Abel	Kirlin	36	Lisandro_Schoen67@gmail.com
8	Tod	Langosh	63	Deon72@yahoo.com
9	Bell	Schimmel	33	Hertha_Lueilwitz@hotmail.com

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

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

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

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

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

Enable Column Resizing

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

id	firstName	lastName	age	email
0	Marian	Huels	61	Kellen_Hane-Towne83@yahoo.com
1	Ludwig	Dickinson	30	Michele_Ankunding@gmail.com
2	Kattie	D'Amore	25	Keanu.Kulas@hotmail.com
3	Shanie	Lang	64	Eden_Ondricka31@hotmail.com
4	Karli	Welch	30	Luisa.Koch@yahoo.com
5	Fermin	Connelly	20	Zoie2@hotmail.com
6	Cindy	Ondricka-Koch	47	Juliet.Koelpin16@gmail.com
7	Daniella	Konopelski	48	Abbie_Borer@hotmail.com
8	Dortha	Goodwin	60	Odessa.Franey@yahoo.com
9	Romaine	Yost	31	Jessie_Hodkiewicz@hotmail.com

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

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

Change Column Resizing Method

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

id	firstName	lastName	age	email
0	Flo	Turcotte	29	Madie.Hettinger23@hotmail.com
1	Caroline	Wilderman	48	Stephen60@yahoo.com
2	Claudie	Leannon	39	Shari_Koepp23@yahoo.com
3	Mathilde	Schmitt	42	Alexzander82@hotmail.com
4	Albina	Lehner	33	Ibrahim_Cruickshank37@gmail.com
5	Nancy	Willms	26	Jayce20@gmail.com
6	Timmothy	Turner	57	Ali.Will28@yahoo.com
7	Stacy	Harber	47	Estell19@hotmail.com
8	Wilfred	Reynolds-Dare	39	Lindsay.Jaskolski@yahoo.com
9	Winifred	Sauer	64	Richard.McClure@gmail.com

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

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

Props

Prop	Default	Type / Description
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	-	`"line" \| "outline"` The variant of the component.
`cellProps`	-	`TransformProps<NativeTable.TdProps, Cell<Y, unknown>>` The props for the table cell.
`checkboxProps`	-	`CheckboxProps` The props for the checkbox.
`columnFilters`	-	`ColumnFiltersState` The column filters state of the table.
`defaultColumnFilters`	-	`ColumnFiltersState` The default column filters state of the table.
`defaultPagination`	-	`PaginationState` The default pagination state of the table.
`defaultRowSelection`	-	`RowSelectionState` The default row selection state of the table.
`defaultSorting`	-	`SortingState<Y>` The default sorting state of the table.
`enableAutoResizeTableWidth`	`false`	`boolean` If `true`, the table width will be automatically resized to the content.
`enableKeyboardNavigation`	`true`	`boolean` If `true`, the keyboard navigation will be enabled.
`enablePagination`	`false`	`boolean` If `true`, the pagination will be enabled.
`footer`	-	`ReactNodeOrFunction<ReactTable<Y>>` The footer of the table.
`footerGroupProps`	-	`TransformProps<NativeTable.TrProps, HeaderGroup<Y>>` The props for the table footer group.
`footerProps`	-	`TransformProps<NativeTable.ThProps, Header<Y, unknown>>` The props for the table footer.
`header`	-	`ReactNodeOrFunction<ReactTable<Y>>` The header of the table.
`headerCheckboxProps`	-	`TransformProps<CheckboxProps, Header<Y, unknown>>` The props for the table header checkbox.
`headerGroupProps`	-	`TransformProps<NativeTable.TrProps, HeaderGroup<Y>>` The props for the table header group.
`headerProps`	-	`TransformProps<NativeTable.ThProps, Header<Y, unknown>>` The props for the table header.
`initialFocusableCell`	`{rowIndex: 0, colIndex: 0}`	`{ colIndex: number; rowIndex: number }` The initial focusable cell of the table.
`layout`	-	`"-moz-initial" \| "auto" \| "fixed" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString ...` The CSS `table-layout` property.
`onColumnFiltersChange`	-	`(columnFilters: ColumnFiltersState) => void` The callback invoked when the column filters state changes.
`onPaginationChange`	-	`(pagination: PaginationState) => void` The callback invoked when the pagination state changes.
`onRowClick`	-	`(row: Row<Y>) => void` The callback invoked when the row is clicked.
`onRowDoubleClick`	-	`(row: Row<Y>) => void` The callback invoked when the row is double clicked.
`onSortingChange`	-	`(sorting: SortingState<Y>) => void` The callback invoked when the sorting state changes.
`pagination`	-	`PaginationState` The pagination state of the table.
`resizableTriggerProps`	-	`TransformProps< Omit<ResizableTriggerProps, "resizing">, Header<Y, unknown> >` The props for the resizable trigger.
`rowCheckboxProps`	-	`TransformProps<CheckboxProps, Row<Y>>` The props for the table row checkbox.
`rowProps`	-	`TransformProps<NativeTable.TrProps, Row<Y>>` The props for the table row.
`rowSelection`	-	`RowSelectionState` The row selection state of the table.
`scrollAreaProps`	-	`NativeTableAreaProps` The props for the scroll area.
`selectOnClickRow`	`false`	`boolean` If `true`, the row will be selected when the row is clicked.
`sorting`	-	`SortingState<Y>` The sorting state of the table.
`sortingIcon`	-	`ReactNodeOrFunction<false \| SortDirection>` The sorting icon of the table.
`sortingIconProps`	-	`TransformProps< Omit<SortingIconProps, "sorted">, Header<Y, unknown> >` The props for the sorting icon.
`tableProps`	-	`NativeTable.RootProps` The props for the table.
`tbodyProps`	-	`NativeTable.TbodyProps` The props for the table tbody.
`tfootProps`	-	`NativeTable.TfootProps` The props for the table tfoot.
`theadProps`	-	`NativeTable.TheadProps` The props for the table thead.
`withCheckbox`	`true`	`boolean` If `true`, the table will have a checkbox column.
`withFooterCheckbox`	`false`	`boolean` If `true`, the table will have a checkbox in the footer.
`withFooterGroups`	`false`	`boolean` If `true`, the table will have footer groups.
`withScrollArea`	`false`	`boolean` Whether to enable the scroll area.

Accessibility

The Table follows the WAI-ARIA - Table Pattern for accessibility.

Setting an aria-label on the tableProps allows it to be read by screen readers.

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

return (
  <Table
    columns={columns}
    data={data}
    tableProps={{ "aria-label": "User list" }}
  />
)

Key	Description	State
`ArrowLeft`	Moves focus one cell to the left. If focus is on the left-most cell in the row, focus does not move.	-
`ArrowRight`	Moves focus one cell to the right. If focus is on the right-most cell in the row, focus does not move.	-
`ArrowUp`	Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.	-
`ArrowDown`	Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.	-
`Home`	Moves focus to the first cell in the row that contains focus.	-
`End`	Moves focus to the last cell in the row that contains focus.	-
`PageUp`	Moves to the previous page.	`enablePagination={true}`
`PageDown`	Moves to the next page.	`enablePagination={true}`

ARIA Roles and Attributes

Element	Roles and Attributes	Usage
`table.ui-native-table__root`	`role="grid"`	Indicates that the element is a grid.
	`aria-rowcount`	Indicates the total number of rows in the table.
	`aria-colcount`	Indicates the total number of columns in the table.
	`aria-multiselectable`	Set to `"true"` if `enableRowSelection` is set.
`thead.ui-native-table__thead`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`tr.ui-native-table__tr`	`role="row"`	Indicates that the element is a row.
	`aria-rowindex`	Indicates which row the element is in the table.
	`aria-disabled`	When `enableRowSelection` is provided as a function, set `"true"` for rows that return `false`.
	`aria-selected`	Set to `"true"` if the row is selected, `"false"` if not selected.
`th.ui-native-table__th`	`role="columnheader"`	Indicates that the element is a columnheader.
	`aria-rowindex`	Indicates which row the element is in the table.
	`aria-colindex`	Indicates which column the element is in the table.
	`aria-sort`	Set to `"ascending"` for ascending order, `"descending"` for descending order, and `"none"` if no order is specified.
`tbody.ui-native-table__tbody`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`td.ui-native-table__td`	`role="gridcell"`	Indicates that the element is a gridcell.
	`aria-colindex`	Indicates which column the element is in the table.
	`aria-rowindex`	Indicates which row the element is in the table.
`tfoot.ui-native-table__tfoot`	`role="rowgroup"`	Indicates that the element is a rowgroup.
`label.ui-checkbox__root > input`	`aria-label`	Set to `"Select all rows"` for the header, and `"Select row"` for body rows.
`th.ui-native-table__th > button`	`aria-label`	Set to `"Sort ascending"` for ascending order, `"Sort descending"` for descending order, and `"Clear sorting"` when no order is specified.

Similar Components

NativeTable is a component for efficiently organizing and displaying data.

Stat is used to display numbers or data within a box.

AreaChart is a component for drawing area charts to compare multiple sets of data.

Badge is a component that emphasizes the status of an item to make it immediately recognizable.

BarChart is a component for drawing bar charts to compare multiple sets of data.

Card is a component that groups and displays related information. By default, it renders a article element.

ComposedChart is a component for drawing composed charts to compare multiple sets of data.

DataList is used to display a list of data items.

Uses Components & Hooks

Checkbox is a component used for allowing users to select multiple values from multiple options.

Icon is a general icon component that can be used in your projects.

NativeTable is a component for efficiently organizing and displaying data.