Menu

ConfigurableDataTable - Admin Components

Note: 

The ConfigurableDataTable component shows a data table whose columns, filters, and saved views the user configures from the Medusa Admin. The Medusa Admin uses it on list pages that support view configurations, such as the products, customers, and regions lists.

Use the ConfigurableDataTable component when you have the view configuration feature enabled and want to provide a customizable table experience for your users.

Code
import {
  ConfigurableDataTable,
} from "@medusajs/dashboard/components"

Unlike DataTable, you don't pass columns or data to ConfigurableDataTable. Instead, you pass an adapter that tells the component which entity to show and how to fetch its records. The component then resolves the columns and filters from the MedusaGo backend and applies the user's saved view.

Example#

Create the adapter with the createTableAdapter utility, then pass it to the component:

src/admin/routes/brands/page.tsx
import {
  ConfigurableDataTable,
} from "@medusajs/dashboard/components"
import { createTableAdapter } from "@medusajs/dashboard/lib"
import { useBrands } from "../../hooks/brands"

const adapter = createTableAdapter<Brand>({
  entity: "brands",
  entityName: "Brands",
  useData: (fields, params) => {
    const { brands, count, isLoading, isError, error } =
      useBrands({ fields, ...params })

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

const BrandsPage = () => {
  return (
    <ConfigurableDataTable
      adapter={adapter}
      heading="Brands"
      subHeading="Manage your brands"
      actions={[{ label: "Create", to: "create" }]}
    />
  )
}

export default BrandsPage

Type Argument#

ConfigurableDataTable accepts one type argument, TData, which is the type of a single row in the table.

You set it on the adapter rather than on the component. createTableAdapter infers TData from the data that your useData hook returns, and the component picks it up from the adapter prop:

Code
import { createTableAdapter } from "@medusajs/dashboard/lib"
import { useProducts } from "@medusajs/dashboard/hooks"

const adapter = createTableAdapter({
  entity: "products",
  useData: (fields, params) => {
    const { products, count, isLoading, isError, error } =
      useProducts({ fields, ...params })

    return { data: products, count, isLoading, isError, error }
  },
})

TData is now HttpTypes.AdminProduct, so the adapter's other functions receive typed rows:

Code
const adapter = createTableAdapter({
  entity: "products",
  useData: (fields, params) => {
    // ...
  },
  getRowId: (product) => product.id,
  getRowHref: (product) => `/products/${product.id}`,
})

To set the type argument explicitly, pass it to createTableAdapter. This is useful when your hook's return type is wider than the rows you show:

Code
const adapter = createTableAdapter<Brand>({
  entity: "brands",
  useData: (fields, params) => {
    // ...
  },
})

Props#

The component accepts the ConfigurableDataTableProps type:

adapterTableAdapter
The adapter that defines the table's entity, data fetching, and behavior. Create it with createTableAdapter, which also sets the TData type argument. Refer to the utility's documentation for the adapter's properties.
headingstringOptional
The table's heading. If you don't pass it, the component uses the adapter's entityName.
subHeadingstringOptional
A subheading shown under the heading.
pageSizenumberOptional
The number of records per page. If you don't pass it, the component uses the adapter's pageSize, which defaults to 20.
queryPrefixstringOptional
A prefix for the table's URL query parameters. If you don't pass it, the component uses the adapter's queryPrefix.
layout"fill" | "auto"Optional
Whether the table fills the available height.

Default: fill

actionsobject[]Optional
The buttons shown next to the table's heading.
Found a problem with this page?Report Issue
Edited Nov 14·Edit this page