Data Table Hooks - Admin Components

The data table hooks build the columns, filters, query parameters, and empty state of a DataTable component. The Medusa Admin uses them in its list pages, such as the sales channels list, to keep tables consistent across the dashboard.

Code
1import {2  useDataTableDateColumns,3  useDataTableDateFilters,4  useSalesChannelTableColumns,5  useSalesChannelTableEmptyState,6  useSalesChannelTableFilters,7  useSalesChannelTableQuery,8} from "@medusajs/dashboard/hooks"

useDataTableDateColumns#

The useDataTableDateColumns hook returns the sortable created_at and updated_at columns of a data table. Each column shows the formatted date and a tooltip with the date and time, both translated to the Medusa Admin's active language.

Example#

Append the date columns to your table's own columns:

Code
1import {2  useDataTableDateColumns,3} from "@medusajs/dashboard/hooks"4import { createDataTableColumnHelper } from "@medusajs/ui"5import { useMemo } from "react"6
7const columnHelper = createDataTableColumnHelper()8
9const useColumns = () => {10  const dateColumns = useDataTableDateColumns()11
12  return useMemo(13    () => [14      columnHelper.accessor("name", {15        header: "Name",16        enableSorting: true,17      }),18      ...dateColumns,19    ],20    [dateColumns]21  )22}

The hook's type parameter is the table's row type, which must have the created_at and updated_at properties. For example, use useDataTableDateColumns<HttpTypes.AdminProduct>().

Returns#

Returns a DataTableColumnDef<TData>[] with the created_at and updated_at column definitions, in that order. Both columns have sorting enabled. Pass them in the columns prop of the DataTable component. TData is the type of a single row in the table.

useDataTableDateFilters#

The useDataTableDateFilters hook returns the created_at and updated_at filters of a data table. Each filter has the presets today, last seven days, last thirty days, last ninety days, and last twelve months, along with a custom range option.

Example#

Append the date filters to your table's own filters:

Code
1import {2  useDataTableDateFilters,3} from "@medusajs/dashboard/hooks"4import { createDataTableFilterHelper } from "@medusajs/ui"5import { useMemo } from "react"6
7const filterHelper = createDataTableFilterHelper()8
9const useFilters = () => {10  const dateFilters = useDataTableDateFilters()11
12  return useMemo(13    () => [14      filterHelper.accessor("status", {15        label: "Status",16        type: "radio",17        options: [18          { label: "Draft", value: "draft" },19          { label: "Published", value: "published" },20        ],21      }),22      ...dateFilters,23    ],24    [dateFilters]25  )26}

The applied filters are set as query parameters whose values are JSON strings, such as {"$gte":"2025-04-01T00:00:00.000Z"}. Parse them with JSON.parse before you send them to the Medusa backend.

Parameters#

Returns#

Returns a DataTableFilter[] with the created_at and updated_at filter definitions, in that order. Pass them in the filters prop of the DataTable component.

useSalesChannelTableColumns#

The useSalesChannelTableColumns hook returns the columns of a sales channels data table. The Medusa Admin uses it in the sales channels list page and in the forms that select a product's sales channels.

Example#

Code
1import { DataTable } from "@medusajs/dashboard/components"2import {3  useSalesChannels,4  useSalesChannelTableColumns,5} from "@medusajs/dashboard/hooks"6
7const SalesChannelTable = () => {8  const columns = useSalesChannelTableColumns()9  const { sales_channels, count, isPending } =10    useSalesChannels()11
12  return (13    <DataTable14      data={sales_channels ?? []}15      columns={columns}16      rowCount={count}17      getRowId={(row) => row.id}18      isLoading={isPending}19    />20  )21}

Returns#

Returns a DataTableColumnDef<HttpTypes.AdminSalesChannel>[] with the sortable name, description, and is_disabled columns, followed by the created_at and updated_at columns of the useDataTableDateColumns hook. The is_disabled column renders a status cell that shows whether the sales channel is enabled or disabled.

useSalesChannelTableFilters#

The useSalesChannelTableFilters hook returns the filters of a sales channels data table.

Example#

Code
1import { DataTable } from "@medusajs/dashboard/components"2import {3  useSalesChannelTableColumns,4  useSalesChannelTableFilters,5} from "@medusajs/dashboard/hooks"6
7const SalesChannelTable = ({ salesChannels, count }) => {8  const columns = useSalesChannelTableColumns()9  const filters = useSalesChannelTableFilters()10
11  return (12    <DataTable13      data={salesChannels}14      columns={columns}15      filters={filters}16      rowCount={count}17      getRowId={(row) => row.id}18    />19  )20}

Returns#

Returns a DataTableFilter[] with an is_disabled radio filter that has the enabled and disabled options, followed by the created_at and updated_at filters of the useDataTableDateFilters hook.

useSalesChannelTableQuery#

The useSalesChannelTableQuery hook reads the sales channel table's query parameters from the URL and returns the parameters to pass to the list sales channels request.

Example#

Code
1import {2  useSalesChannels,3  useSalesChannelTableQuery,4} from "@medusajs/dashboard/hooks"5
6const PAGE_SIZE = 207
8const SalesChannelTable = () => {9  const searchParams = useSalesChannelTableQuery({10    pageSize: PAGE_SIZE,11  })12
13  const { sales_channels, count } =14    useSalesChannels(searchParams)15
16  // ...17}

The hook reads the offset, q, order, created_at, updated_at, and is_disabled query parameters, and it parses the values that aren't strings.

Parameters#

The hook accepts an object with the following properties:

Returns#

Returns an HttpTypes.AdminSalesChannelListParams object with the query parameters of the list sales channels request, including limit, offset, q, order, created_at, updated_at, and is_disabled.

useSalesChannelTableEmptyState#

The useSalesChannelTableEmptyState hook returns the translated empty state content of a sales channels data table.

Example#

Code
1import { DataTable } from "@medusajs/dashboard/components"2import {3  useSalesChannelTableColumns,4  useSalesChannelTableEmptyState,5} from "@medusajs/dashboard/hooks"6
7const SalesChannelTable = ({ salesChannels, count }) => {8  const columns = useSalesChannelTableColumns()9  const emptyState = useSalesChannelTableEmptyState()10
11  return (12    <DataTable13      data={salesChannels}14      columns={columns}15      rowCount={count}16      getRowId={(row) => row.id}17      emptyState={emptyState}18    />19  )20}

Returns#

Returns a DataTableEmptyStateProps object with an empty property, shown when the store has no sales channels, and a filtered property, shown when the applied filters match no sales channels. Each has a heading and a description.