Table Utilities - Admin Components

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
1import {2  createTableAdapter,3  defineCellRenderer,4} from "@medusajs/dashboard/lib"

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
1import { createTableAdapter } from "@medusajs/dashboard/lib"2import { sdk } from "../lib/sdk"3import { useQuery } from "@tanstack/react-query"4
5export const brandTableAdapter = createTableAdapter({6  entity: "brand",7  entityName: "Brands",8  useData: (fields, params) => {9    const { data, isLoading, isError, error } = useQuery({10      queryKey: ["brands", fields, params],11      queryFn: () => sdk.client.fetch("/admin/brands", {12        query: { ...params, fields },13      }),14    })15
16    return {17      data: data?.brands,18      count: data?.count,19      isLoading,20      isError,21      error,22    }23  },24  getRowHref: (brand) => `/brands/${brand.id}`,25})

Parameters#

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
1import { defineCellRenderer } from "@medusajs/dashboard/lib"2import { Badge } from "@medusajs/ui"3
4defineCellRenderer("brand_tier", {5  render: (value, row, column, t) => (6    <Badge size="xsmall">{value ?? "-"}</Badge>7  ),8  align: "center",9  truncateTooltip: false,10})

Parameters#