Shadcn React Table

Search documentation

Search the docs

Localization

Every user-facing string can be translated. Override any subset of strings with the localization option, which accepts a partial of the localization table.

Localization
GitHub
ID
2261
45000134754
099
AvaThompsonOwnerEngineeringactive22$45,000Jan 2, 2023
0%
LiamNguyenAdminMarketinginactive25$47,137Jan 13, 2023
9%
NoahSilvaEditorDesignpending28$49,274Jan 24, 2023
18%
EmmaCarterViewerSalesactive31$51,411Feb 4, 2023
27%
OliviaRossiOwnerSupportinactive34$53,548Feb 15, 2023
36%
WilliamWalkerAdminEngineeringpending37$55,685Feb 26, 2023
45%
SophiaPatelEditorMarketingactive40$57,822Mar 9, 2023
54%
JamesMullerViewerDesigninactive43$59,959Mar 20, 2023
63%
IsabellaParkOwnerSalespending46$62,096Mar 31, 2023
72%
LucasReyesAdminSupportactive49$64,233Apr 11, 2023
81%
$4,120,536
Filas por página
1–10 de 48
import { DataTable, useDataTable } from "@/components/ui/data-table"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  localization: {
    searchPlaceholder: "Buscar...",
    noResults: "Sin resultados.",
    paginationRange: (start, end, total) =>
      `${start}–${end} de ${total}`,
  },
})

return <DataTable table={table} />

Function-valued entries handle interpolation and plurals. For example, paginationRange: (start, end, total) => ... builds the range label from the current values.

App-wide defaults

To set defaults for many tables at once, wrap a subtree in DataTableConfigProvider. Per-call localization options still override the provider.

import { DataTableConfigProvider } from "@/components/ui/data-table"

<DataTableConfigProvider localization={{ noResults: "Sin resultados." }}>
  {children}
</DataTableConfigProvider>

Partial overrides

You only need to supply the keys you want to change — everything else falls back to the built-in defaults.