feat(dashboard): configurable product views (#13408)

* feat: add a reusable configurable data table

* fix: cleanup

* fix: cleanup

* fix: cache invalidation

* fix: test

* fix: add configurable products

* feat: add configurable product table

* fix: build errors+table style

* fix: sticky header column

* add translations

* fix: cleanup counterenderer

* fix: formatting

* fix: client still skips nulls

* fix: test

* fix: cleanup

* fix: revert client bracket format

* fix: better typing

* fix: add placeholder data to product list

Author: srindom

integration-tests/http/__tests__/views/admin/columns.spec.ts

@@ -224,7 +224,7 @@ medusaIntegrationTestRunner({
             id: "title",
             name: "Title",
             field: "title",
-            default_visible: true,
+            default_visible: false,
           })
 
           const handleColumn = response.data.columns.find(
@@ -235,7 +235,7 @@ medusaIntegrationTestRunner({
             id: "handle",
             name: "Handle",
             field: "handle",
-            default_visible: true,
+            default_visible: false,
           })
         })
       })

packages/admin/dashboard/src/components/data-table/data-table.tsx

@@ -66,12 +66,14 @@ interface DataTableProps<TData> {
   filters?: DataTableFilter[]
   commands?: DataTableCommand[]
   action?: DataTableActionProps
+  actions?: DataTableActionProps[]
   actionMenu?: DataTableActionMenuProps
   rowCount?: number
   getRowId: (row: TData) => string
   enablePagination?: boolean
   enableSearch?: boolean
   autoFocusSearch?: boolean
+  enableFilterMenu?: boolean
   rowHref?: (row: TData) => string
   emptyState?: DataTableEmptyStateProps
   heading?: string
@@ -105,12 +107,14 @@ export const DataTable = <TData,>({
   filters,
   commands,
   action,
+  actions,
   actionMenu,
   getRowId,
   rowCount = 0,
   enablePagination = true,
   enableSearch = true,
   autoFocusSearch = false,
+  enableFilterMenu,
   rowHref,
   heading,
   subHeading,
@@ -138,6 +142,7 @@ export const DataTable = <TData,>({
   const effectiveEnableViewSelector = isViewConfigEnabled && enableViewSelector
 
   const enableFiltering = filters && filters.length > 0
+  const showFilterMenu = enableFilterMenu !== undefined ? enableFilterMenu : enableFiltering
   const enableCommands = commands && commands.length > 0
   const enableSorting = columns.some((column) => column.enableSorting)
 
@@ -381,7 +386,7 @@ export const DataTable = <TData,>({
             )}
           </div>
           <div className="flex items-center gap-x-2">
-            {enableFiltering && <UiDataTable.FilterMenu />}
+            {showFilterMenu && <UiDataTable.FilterMenu />}
             {enableSorting && <UiDataTable.SortingMenu />}
             {enableSearch && (
               <div className="w-full md:w-auto">
@@ -392,7 +397,8 @@ export const DataTable = <TData,>({
               </div>
             )}
             {actionMenu && <ActionMenu variant="primary" {...actionMenu} />}
-            {action && <DataTableAction {...action} />}
+            {actions && actions.length > 0 && <DataTableActions actions={actions} />}
+            {!actions && action && <DataTableAction {...action} />}
           </div>
         </div>
       </UiDataTable.Toolbar>
@@ -505,3 +511,13 @@ const DataTableAction = ({
   )
 }
 
+const DataTableActions = ({ actions }: { actions: DataTableActionProps[] }) => {
+  return (
+    <div className="flex items-center gap-x-2">
+      {actions.map((action, index) => (
+        <DataTableAction key={index} {...action} />
+      ))}
+    </div>
+  )
+}
+