Made by ScaleRadix Homepage
Scale UI Radix
DocumentationDocumentationComponents CatalogComponents CatalogPlayroomPlayroom
Radix PrimitivesFont Awesome Icons
Components

Data Table

Data table element using under the hood [TanStack Table](https://tanstack.com/table/v8/docs/introduction).

Report an issue
Id
User Name
Enabled
Admin
Rating
Random Type
Phone Number
Updated At
Created At
Notes
b438b6fa-765b-4706-8b22-88adb9b5534aHortense.KundeNoNo94350785865081394(286) 633-4685 x6566May 27, 2025November 20, 2023Careo autem mollitia allatus vae quis supra acceptus paens.
822b5b86-ed50-446b-bf5c-9b26358a125aKay.Howe35NoNo102634510420923559458.571.6890 x42450April 24, 2024July 28, 2025Defluo tardus talis administratio suggero tumultus asperiores.
c44a1aeb-77c9-419d-85ec-9c1dde212668Colleen_KossYesYes76708387761938422269-851-6607 x5474September 5, 2024January 31, 2024Tutis audentia cur vox capillus.
ee178503-13ce-404f-98a0-7f617f5cc37bClark.OConner-StreichYesYes4cicuta conturbo352-708-0170 x7987August 20, 2025July 30, 2024Constans vetus arcesso vilicus tristis tyrannus anser patior acceptus.
b013e589-39a4-467e-b9f8-807e3065d0eaLenora38NoNo32946253908992201942.231.0635 x1622March 15, 2025November 2, 2024Illo suasoria verecundia nobis candidus.
bc3d7c35-facb-437c-9a01-5f745363d74eTabitha.Quigley44NoYes27776395664573114839.946.4202 x23191December 20, 2024August 8, 2024Corrigo ustilo cicuta accusator versus urbs.
4811d6af-300b-4e76-88da-3c2293b54f0aNoelia73NoNo10brevis a1-572-581-8443 x95889April 29, 2024May 25, 2024Decet vicissitudo cubicularis demulceo provident cultellus vulgivagus.
13524c80-f90a-4629-bba3-88b5ca08d928Bernice_Cummings38YesYes2deprimo decimus586.889.6876 x77057March 16, 2024August 25, 2024Culpa animus est decumbo somnus inflammatio.
00bbfe7a-7361-4a37-9f02-4fe2fc8ee6aaChelsea.GislasonNoNo72031437641573278421.298.1267 x819March 4, 2024November 23, 2024Volaticus solus numquam earum tendo amiculum abbas.
f755c6c7-d177-44fe-a713-475c7df39df4Adrien_BergnaumNoNo1autus acsi(267) 492-0562 x35872March 22, 2024October 7, 2024Quaerat desino patria temperantia fuga velit vinitor veritas tego.
364a5c1c-9d69-48fc-b82e-3ae33dd542fdJonathon92YesYes44906792229205994550-895-2936 x641August 26, 2025November 6, 2023Bos claudeo tribuo cornu agnosco auxilium.
df4a1b6e-4f85-4a33-b3f7-c799fa30376cAshtyn64NoYes2porro altus236.437.7715October 31, 2024March 17, 2025Corporis curto tabella somniculosus labore consectetur autus auctus aggredior aggredior.
d60e343f-1bea-4d3a-8b7d-bec877086217Wyatt.Homenick42NoYes8consequuntur consequuntur630.284.9323 x3607July 20, 2024August 1, 2024Deduco derideo coniuratio defessus cultellus eaque.
93890836-d570-44a5-934f-17082a4b5041Edwina.KutchYesNo10demonstro absum(634) 830-4931 x01356October 21, 2023August 4, 2025Arcesso excepturi spiculum cohibeo.
a4ee12b0-d5b0-4312-967e-ab14f8c0110eZena_Friesen86YesNo5centum decerno260-621-5241December 21, 2023December 7, 2023Iste temperantia textor.
f227dc82-6b50-49bb-b256-6168b96e9fdaYvette1YesNo107547839174711388847-402-0340 x06104February 25, 2025September 2, 2025Angulus aegrotatio beatus alveus abduco.
4205d4bb-0f2b-46df-b3d8-fa93b4df0f57Oral74NoNo9tego concedo1-906-328-7351 x08750July 23, 2024June 24, 2024Aro atavus patria ante.
3f3c9692-7f63-4e9b-980c-fbcdf478274dArnaldo_Stoltenberg93NoNo7attollo brevis451.523.8871 x29460October 2, 2024February 4, 2025Ancilla corporis vinco.
30cd8e24-09e9-41ba-82de-649fbccfd433Cordell6YesNo10alienus officia1-914-616-5347 x3990June 3, 2025January 24, 2025Vis triumphus tristis.
ee3e0e7d-4cc1-4ed9-8b57-27c82db0cd86Rhianna.HeathcoteNoNo369248873850953091-217-568-7917 x70005April 9, 2025July 12, 2024Ater vinum caries.
d58725f9-7849-4b14-83be-6a026aa32f57Talia.Langosh5NoYes6universe tutis906-829-8128 x116January 5, 2024November 11, 2024Patior casso trado voluntarius chirographum uredo clarus.
5c206219-24b1-4f48-9c35-36bb27bba3d4Keegan_OConnerNoYes1surculus quasi1-515-741-0689 x3984July 13, 2024May 21, 2024Absque cariosus caterva.
b2bb71be-5cb0-40ad-be29-43b67d38d29dShaylee55YesNo97955738450225404(955) 997-6614July 29, 2024December 4, 2023Acceptus tabula dedico.
74822d0e-5e15-49f1-bc9a-f558a4b130bfCesar.Osinski40NoYes6calcar velociter(821) 284-6378 x86882November 23, 2024March 30, 2024Velit denuncio tredecim accommodo usque vinco combibo sui.
d163b604-3185-43e5-a28e-c243e4279201Cary_PadbergNoYes8campana talis1-222-227-2515 x62076September 6, 2024July 5, 2025Synagoga vivo arca artificiose xiphias cotidie laboriosam vinco peccatus usus.
bd7f2c39-cb7e-42b4-8b30-cd2c599e9d6aMertie_Keebler54YesNo91845874079590436724-939-9046 x0306August 23, 2024March 30, 2024Illo concedo videlicet voluptates auctor volutabrum odio utique claro.
00607bab-9f3e-4f06-ba9f-a9eed6bf37c9Dianna_KovacekYesNo43720775510979569331.588.1362July 22, 2025February 17, 2025Amissio aer audeo crustulum.
c20e5586-4bcd-4cb3-9b4b-1660eaca5822Luigi_Ryan67YesNo84280664730450171(260) 282-4963 x8245November 21, 2024October 3, 2023Dolorum defungo traho supra vicissitudo caecus.
23a4aa1b-534e-49a3-a5c5-d3b1daf0200dLuigi15NoYes7repellat absconditus543-314-5943 x86179September 17, 2024September 12, 2024Aveho cornu comes vulnero arx atavus degusto cervus.
d6ad4b64-e972-4eaf-b01e-77377bacc645Haleigh.Boehm32NoNo10confugo collum347-960-4853 x8554January 30, 2025August 18, 2024Civitas astrum tracto comis antea audacia cupiditate.
4b5922ed-e714-4e65-b487-564330ff116cAlan.Leuschke96NoYes48319753194003847622-402-6719 x40923August 20, 2024May 14, 2024Antiquus dolore aeneus sulum.
5f1045dd-bdbd-474a-a51d-d7712cd0c867Abdiel_SpencerNoYes10audeo taedium830.471.3813 x517April 13, 2025December 26, 2024Aperte abduco cenaculum tunc antepono tendo vetus laudantium vacuus.
3bc79141-3e07-484c-8937-00b2f5b76aaeJoe_OConner36YesYes2solitudo volutabrum1-280-908-1070April 24, 2024November 1, 2023Antea supra voluptas.
3654b482-da89-43d1-8e9f-4ea0191ba2a9Melisa.StreichNoNo65482484533887976(930) 845-8230 x6286July 16, 2025November 4, 2023Cubicularis in sequi deorsum eum cur audentia volubilis thesis patrocinor.
0e1c0cd7-8df0-42da-9471-0bbbe464aa6eTerrell22YesYes4congregatio tubineus(829) 338-6417May 20, 2024March 23, 2025Provident communis aestas pariatur talus nemo paulatim.
<DataTable.Root
  className="h-[300px] max-h-[300px]"
  columns={MOCKS.DATA_TABLE_USERS_COLUMNS}
  data={MOCKS.DATA_TABLE_USERS}
>

  {({ table }) => (

    <DataTable.Table>

      <DataTable.Header>

        {table.getHeaderGroups().map(headerGroup => (

          <DataTable.HeaderGroup key={headerGroup.id}>

            {headerGroup.headers.map(header => (

              <DataTable.ColumnHeaderCell key={header.id} header={header} />

            ))}

          </DataTable.HeaderGroup>

        ))}

      </DataTable.Header>

      <DataTable.Body>

        {table.getRowModel().rows.map(row => (

          <DataTable.Row key={row.id}>

            {row.getVisibleCells().map(cell => (

              <DataTable.Cell key={cell.id} cell={cell} />

            ))}

          </DataTable.Row>

        ))}

      </DataTable.Body>

    </DataTable.Table>

  )}

</DataTable.Root>

API Reference

Contains the pagination controls for the table based on the div element.

PaginationTotal

Displays the current pages, the total number of pages, and the total number of rows.

PaginationPageSize

Allow users to change the number of rows per page.

Examples

With all features

Id
User Name
Enabled
Admin
Rating
Random Type
Phone Number
Updated At
Created At
Notes
b438b6fa-765b-4706-8b22-88adb9b5534aHortense.KundeNoNo94350785865081394(286) 633-4685 x6566May 27, 2025November 20, 2023Careo autem mollitia allatus vae quis supra acceptus paens.
822b5b86-ed50-446b-bf5c-9b26358a125aKay.Howe35NoNo102634510420923559458.571.6890 x42450April 24, 2024July 28, 2025Defluo tardus talis administratio suggero tumultus asperiores.
c44a1aeb-77c9-419d-85ec-9c1dde212668Colleen_KossYesYes76708387761938422269-851-6607 x5474September 5, 2024January 31, 2024Tutis audentia cur vox capillus.
ee178503-13ce-404f-98a0-7f617f5cc37bClark.OConner-StreichYesYes4cicuta conturbo352-708-0170 x7987August 20, 2025July 30, 2024Constans vetus arcesso vilicus tristis tyrannus anser patior acceptus.
b013e589-39a4-467e-b9f8-807e3065d0eaLenora38NoNo32946253908992201942.231.0635 x1622March 15, 2025November 2, 2024Illo suasoria verecundia nobis candidus.
bc3d7c35-facb-437c-9a01-5f745363d74eTabitha.Quigley44NoYes27776395664573114839.946.4202 x23191December 20, 2024August 8, 2024Corrigo ustilo cicuta accusator versus urbs.
4811d6af-300b-4e76-88da-3c2293b54f0aNoelia73NoNo10brevis a1-572-581-8443 x95889April 29, 2024May 25, 2024Decet vicissitudo cubicularis demulceo provident cultellus vulgivagus.
13524c80-f90a-4629-bba3-88b5ca08d928Bernice_Cummings38YesYes2deprimo decimus586.889.6876 x77057March 16, 2024August 25, 2024Culpa animus est decumbo somnus inflammatio.
00bbfe7a-7361-4a37-9f02-4fe2fc8ee6aaChelsea.GislasonNoNo72031437641573278421.298.1267 x819March 4, 2024November 23, 2024Volaticus solus numquam earum tendo amiculum abbas.
f755c6c7-d177-44fe-a713-475c7df39df4Adrien_BergnaumNoNo1autus acsi(267) 492-0562 x35872March 22, 2024October 7, 2024Quaerat desino patria temperantia fuga velit vinitor veritas tego.
364a5c1c-9d69-48fc-b82e-3ae33dd542fdJonathon92YesYes44906792229205994550-895-2936 x641August 26, 2025November 6, 2023Bos claudeo tribuo cornu agnosco auxilium.
df4a1b6e-4f85-4a33-b3f7-c799fa30376cAshtyn64NoYes2porro altus236.437.7715October 31, 2024March 17, 2025Corporis curto tabella somniculosus labore consectetur autus auctus aggredior aggredior.
d60e343f-1bea-4d3a-8b7d-bec877086217Wyatt.Homenick42NoYes8consequuntur consequuntur630.284.9323 x3607July 20, 2024August 1, 2024Deduco derideo coniuratio defessus cultellus eaque.
93890836-d570-44a5-934f-17082a4b5041Edwina.KutchYesNo10demonstro absum(634) 830-4931 x01356October 21, 2023August 4, 2025Arcesso excepturi spiculum cohibeo.
a4ee12b0-d5b0-4312-967e-ab14f8c0110eZena_Friesen86YesNo5centum decerno260-621-5241December 21, 2023December 7, 2023Iste temperantia textor.
f227dc82-6b50-49bb-b256-6168b96e9fdaYvette1YesNo107547839174711388847-402-0340 x06104February 25, 2025September 2, 2025Angulus aegrotatio beatus alveus abduco.
4205d4bb-0f2b-46df-b3d8-fa93b4df0f57Oral74NoNo9tego concedo1-906-328-7351 x08750July 23, 2024June 24, 2024Aro atavus patria ante.
3f3c9692-7f63-4e9b-980c-fbcdf478274dArnaldo_Stoltenberg93NoNo7attollo brevis451.523.8871 x29460October 2, 2024February 4, 2025Ancilla corporis vinco.
30cd8e24-09e9-41ba-82de-649fbccfd433Cordell6YesNo10alienus officia1-914-616-5347 x3990June 3, 2025January 24, 2025Vis triumphus tristis.
ee3e0e7d-4cc1-4ed9-8b57-27c82db0cd86Rhianna.HeathcoteNoNo369248873850953091-217-568-7917 x70005April 9, 2025July 12, 2024Ater vinum caries.
d58725f9-7849-4b14-83be-6a026aa32f57Talia.Langosh5NoYes6universe tutis906-829-8128 x116January 5, 2024November 11, 2024Patior casso trado voluntarius chirographum uredo clarus.
5c206219-24b1-4f48-9c35-36bb27bba3d4Keegan_OConnerNoYes1surculus quasi1-515-741-0689 x3984July 13, 2024May 21, 2024Absque cariosus caterva.
b2bb71be-5cb0-40ad-be29-43b67d38d29dShaylee55YesNo97955738450225404(955) 997-6614July 29, 2024December 4, 2023Acceptus tabula dedico.
74822d0e-5e15-49f1-bc9a-f558a4b130bfCesar.Osinski40NoYes6calcar velociter(821) 284-6378 x86882November 23, 2024March 30, 2024Velit denuncio tredecim accommodo usque vinco combibo sui.
d163b604-3185-43e5-a28e-c243e4279201Cary_PadbergNoYes8campana talis1-222-227-2515 x62076September 6, 2024July 5, 2025Synagoga vivo arca artificiose xiphias cotidie laboriosam vinco peccatus usus.
bd7f2c39-cb7e-42b4-8b30-cd2c599e9d6aMertie_Keebler54YesNo91845874079590436724-939-9046 x0306August 23, 2024March 30, 2024Illo concedo videlicet voluptates auctor volutabrum odio utique claro.
00607bab-9f3e-4f06-ba9f-a9eed6bf37c9Dianna_KovacekYesNo43720775510979569331.588.1362July 22, 2025February 17, 2025Amissio aer audeo crustulum.
c20e5586-4bcd-4cb3-9b4b-1660eaca5822Luigi_Ryan67YesNo84280664730450171(260) 282-4963 x8245November 21, 2024October 3, 2023Dolorum defungo traho supra vicissitudo caecus.
23a4aa1b-534e-49a3-a5c5-d3b1daf0200dLuigi15NoYes7repellat absconditus543-314-5943 x86179September 17, 2024September 12, 2024Aveho cornu comes vulnero arx atavus degusto cervus.
d6ad4b64-e972-4eaf-b01e-77377bacc645Haleigh.Boehm32NoNo10confugo collum347-960-4853 x8554January 30, 2025August 18, 2024Civitas astrum tracto comis antea audacia cupiditate.
4b5922ed-e714-4e65-b487-564330ff116cAlan.Leuschke96NoYes48319753194003847622-402-6719 x40923August 20, 2024May 14, 2024Antiquus dolore aeneus sulum.
5f1045dd-bdbd-474a-a51d-d7712cd0c867Abdiel_SpencerNoYes10audeo taedium830.471.3813 x517April 13, 2025December 26, 2024Aperte abduco cenaculum tunc antepono tendo vetus laudantium vacuus.
3bc79141-3e07-484c-8937-00b2f5b76aaeJoe_OConner36YesYes2solitudo volutabrum1-280-908-1070April 24, 2024November 1, 2023Antea supra voluptas.
3654b482-da89-43d1-8e9f-4ea0191ba2a9Melisa.StreichNoNo65482484533887976(930) 845-8230 x6286July 16, 2025November 4, 2023Cubicularis in sequi deorsum eum cur audentia volubilis thesis patrocinor.
0e1c0cd7-8df0-42da-9471-0bbbe464aa6eTerrell22YesYes4congregatio tubineus(829) 338-6417May 20, 2024March 23, 2025Provident communis aestas pariatur talus nemo paulatim.
Showing1 - 10 of 35items
<DataTable.Root
  className="h-[300px] max-h-[300px]"
  columns={MOCKS.DATA_TABLE_USERS_COLUMNS}
  data={MOCKS.DATA_TABLE_USERS}
>

  {({ table }) => (

    <>

      <DataTable.Table layout="fixed">

        <DataTable.Header>

          {table.getHeaderGroups().map(headerGroup => (

            <DataTable.HeaderGroup key={headerGroup.id}>

              {headerGroup.headers.map(header => (

                <DataTable.ColumnHeaderCell key={header.id} header={header}>

                  {header.column.getCanSort() ? (

                    <DataTable.ColumnHeaderSort header={header} />

                  ) : null}

                  {header.column.getCanFilter() ? (

                    <DataTable.ColumnHeaderFilter header={header} />

                  ) : null}

                </DataTable.ColumnHeaderCell>

              ))}

            </DataTable.HeaderGroup>

          ))}

        </DataTable.Header>

        <DataTable.Body>

          {table.getRowModel().rows.map(row => (

            <DataTable.Row key={row.id}>

              {row.getVisibleCells().map(cell => (

                <DataTable.Cell key={cell.id} cell={cell} />

              ))}

            </DataTable.Row>

          ))}

        </DataTable.Body>

      </DataTable.Table>

      <DataTable.Pagination>

        <DataTable.PaginationPageNavigation />

        <DataTable.PaginationTotal />

        <DataTable.PaginationPageSize />

      </DataTable.Pagination>

    </>

  )}

</DataTable.Root>
PreviousTable 🆕 🧪
NextTabs
Edit this page on GitHub.