Table Utilities - Admin Components

Note: These utilities are available since Medusa v2.21.0.

The @medusajs/dashboard/lib subpath exports the utilities that back the Medusa Admin's configurable tables. Use them to define which data a ConfigurableDataTable shows, and how it renders each cell.

Code
import {
  createTableAdapter,
  defineCellRenderer,
} from "@medusajs/dashboard/lib"

Tip: Refer to the View Configurations guide for full examples of both utilities.

createTableAdapter#

Creates a type-safe table adapter that tells a ConfigurableDataTable which entity to render, how to fetch its data, and how each row behaves. The utility applies defaults for getRowId, pageSize, and queryPrefix, then merges your adapter on top of them.

Code
import { createTableAdapter } from "@medusajs/dashboard/lib"
import { sdk } from "../lib/sdk"
import { useQuery } from "@tanstack/react-query"

export const brandTableAdapter = createTableAdapter({
  entity: "brand",
  entityName: "Brands",
  useData: (fields, params) => {
    const { data, isLoading, isError, error } = useQuery({
      queryKey: ["brands", fields, params],
      queryFn: () => sdk.client.fetch("/admin/brands", {
        query: { ...params, fields },
      }),
    })

    return {
      data: data?.brands,
      count: data?.count,
      isLoading,
      isError,
      error,
    }
  },
  getRowHref: (brand) => `/brands/${brand.id}`,
})

Parameters#

adapterobject

The adapter's configuration. TData is the row type, which createTableAdapter infers from the data that useData returns.

Returns#

Returns the same TableAdapter<TData> object with the default getRowId, pageSize, and queryPrefix applied. Pass it to a ConfigurableDataTable.

defineCellRenderer#

Registers a cell renderer for a render mode in the global registry. A column opts into the renderer through its render mode. Registering an existing render mode replaces it, which lets you override a built-in renderer.

Call it once when your admin extension loads.

Code
import { defineCellRenderer } from "@medusajs/dashboard/lib"
import { Badge } from "@medusajs/ui"

defineCellRenderer("brand_tier", {
  render: (value, row, column, t) => (
    <Badge size="xsmall">{value ?? "-"}</Badge>
  ),
  align: "center",
  truncateTooltip: false,
})

Parameters#

typeRenderMode

The render mode to register the renderer for. Pass a BuiltInRenderMode to replace a built-in renderer, or any other string for a custom mode.

defobject

The renderer's definition.

Found a problem with this page?Report Issue

Edited Nov 14·Edit this page