Product Table Cells - Admin Components

The product table cells render a product's data in a data table column the same way the Medusa Admin does. The Medusa Admin uses them in its products list and in the tables that let the user pick items when creating an order edit, return, or claim.

Code
1import {2  ProductCell,3  ProductHeader,4} from "@medusajs/dashboard/components"

Each cell has a matching header component that renders the column's translated label. The header components accept no props.

Example#

Pass a header component to a column's header and a cell component to its cell:

src/admin/routes/products/page.tsx
1import {2  DataTable,3  ProductCell,4  ProductHeader,5  ProductStatusCell,6  ProductStatusHeader,7} from "@medusajs/dashboard/components"8import { createDataTableColumnHelper } from "@medusajs/ui"9
10const columnHelper = createDataTableColumnHelper()11
12const columns = [13  columnHelper.display({14    id: "product",15    header: () => <ProductHeader />,16    cell: ({ row }) => (17      <ProductCell product={row.original} />18    ),19  }),20  columnHelper.accessor("status", {21    header: () => <ProductStatusHeader />,22    cell: ({ row }) => (23      <ProductStatusCell status={row.original.status} />24    ),25  }),26]

Every cell renders a placeholder when its value is missing or empty, except for ProductCell, which always renders a thumbnail and a title.

ProductCell#

Shows a product's thumbnail next to its title. The title truncates when it doesn't fit the cell.

ProductHeader renders the "Product" label and accepts no props.

ProductStatusCell#

Shows a product's status as a colored status indicator. It renders a placeholder when the status isn't one of the four product statuses.

ProductStatusHeader renders the "Status" label and accepts no props.

SalesChannelsCell#

Shows the names of the sales channels that a product is available in. If there are more than two, the cell shows the first two and a tooltip listing the rest.

SalesChannelHeader renders the "Sales Channels" label and accepts no props.

VariantCell#

Shows the number of a product's variants, such as "3 variants".

VariantHeader renders the "Variants" label and accepts no props.

Related Components#

• Data Table: how to build a data table that fetches its records from the Medusa backend.
• Thumbnail: the component that ProductCell uses to show a product's thumbnail.