add rowHref

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

@@ -1,18 +1,20 @@
 import {
   Button,
   DataTableCommand,
+  DataTableEmptyStateProps,
   DataTableFilter,
   DataTableFilteringState,
   DataTablePaginationState,
+  DataTableRowSelectionState,
   DataTableSortingState,
   Heading,
   DataTable as Primitive,
   useDataTable,
 } from "@medusajs/ui"
 import { ColumnDef } from "@tanstack/react-table"
-import { ReactNode, useState } from "react"
+import React, { ReactNode, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Link, useSearchParams } from "react-router-dom"
+import { Link, useNavigate, useSearchParams } from "react-router-dom"
 
 import { useQueryParams } from "../../hooks/use-query-params"
 import { ActionMenu } from "../common/action-menu"
@@ -62,12 +64,16 @@ interface DataTableProps<TData> {
   enablePagination?: boolean
   enableSearch?: boolean
   autoFocusSearch?: boolean
-  onRowClick?: (row: TData) => void
-  emptyState?: any
+  rowHref?: (row: TData) => string
+  emptyState?: DataTableEmptyStateProps
   heading: string
   prefix?: string
   pageSize?: number
   isLoading?: boolean
+  rowSelection?: {
+    state: DataTableRowSelectionState
+    onRowSelectionChange: (value: DataTableRowSelectionState) => void
+  }
 }
 
 export const DataTable = <TData,>({
@@ -82,11 +88,12 @@ export const DataTable = <TData,>({
   enablePagination = true,
   enableSearch = true,
   autoFocusSearch = false,
-  onRowClick,
+  rowHref,
   heading,
   prefix,
   pageSize = 10,
   emptyState,
+  rowSelection,
   isLoading = false,
 }: DataTableProps<TData>) => {
   const { t } = useTranslation()
@@ -189,14 +196,39 @@ export const DataTable = <TData,>({
   const { pagination: paginationTranslations, toolbar: toolbarTranslations } =
     useDataTableTranslations()
 
+  const navigate = useNavigate()
+
+  const onRowClick = useCallback(
+    (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, row: TData) => {
+      if (!rowHref) {
+        return
+      }
+
+      const href = rowHref(row)
+
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+        window.open(href, "_blank", "noreferrer")
+        return
+      }
+
+      if (event.shiftKey) {
+        window.open(href)
+        return
+      }
+
+      navigate(href)
+    },
+    [navigate, rowHref]
+  )
+
   const instance = useDataTable({
     data,
     columns,
     filters,
     commands,
     rowCount,
     getRowId,
-    onRowClick,
+    onRowClick: rowHref ? onRowClick : undefined,
     pagination: enablePagination
       ? {
           state: pagination,
@@ -221,6 +253,7 @@ export const DataTable = <TData,>({
           onSearchChange: handleSearchChange,
         }
       : undefined,
+    rowSelection,
     isLoading,
   })
 

packages/admin/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx

@@ -24,17 +24,18 @@ import { useDate } from "../../../../../hooks/use-date"
 import { useQueryParams } from "../../../../../hooks/use-query-params"
 
 const PAGE_SIZE = 10
-const PREFIX = "c"
 
 export const CustomerGroupListTable = () => {
   const { t } = useTranslation()
-  const navigate = useNavigate()
   const { getWidgets } = useDashboardExtension()
 
-  const { q, order, offset, created_at, updated_at } = useQueryParams(
-    ["q", "order", "offset", "created_at", "updated_at"],
-    PREFIX
-  )
+  const { q, order, offset, created_at, updated_at } = useQueryParams([
+    "q",
+    "order",
+    "offset",
+    "created_at",
+    "updated_at",
+  ])
 
   const columns = useColumns()
   const filters = useFilters()
@@ -74,9 +75,7 @@ export const CustomerGroupListTable = () => {
           heading={t("customerGroups.domain")}
           rowCount={count}
           getRowId={(row) => row.id}
-          onRowClick={(row) => {
-            navigate(`/customer-groups/${row.id}`)
-          }}
+          rowHref={(row) => `/customer-groups/${row.id}`}
           action={{
             label: t("actions.create"),
             to: "/customer-groups/create",
@@ -92,7 +91,6 @@ export const CustomerGroupListTable = () => {
             },
           }}
           pageSize={PAGE_SIZE}
-          prefix={PREFIX}
           isLoading={isPending}
         />
       </Container>

packages/design-system/ui/src/blocks/data-table/components/data-table-table.tsx

@@ -186,7 +186,7 @@ const DataTableTable = ({ emptyState }: DataTableTableProps) => {
                     key={row.id}
                     onMouseEnter={() => setHoveredRowId(row.id)}
                     onMouseLeave={() => setHoveredRowId(null)}
-                    onClick={() => instance.onRowClick?.(row)}
+                    onClick={(e) => instance.onRowClick?.(e, row)}
                     className={clx("group/row last:border-b-0", {
                       "cursor-pointer": !!instance.onRowClick,
                     })}

packages/design-system/ui/src/blocks/data-table/use-data-table.tsx

@@ -80,7 +80,10 @@ interface DataTableOptions<TData>
   /**
    * The function to execute when a row is clicked.
    */
-  onRowClick?: (row: TData) => void
+  onRowClick?: (
+    event: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
+    row: TData
+  ) => void
   /**
    * The total count of rows. When working with pagination, this will be the total
    * number of rows available, not the number of rows currently being displayed.
@@ -126,7 +129,10 @@ interface UseDataTableReturn<TData>
   onSearchChange: (search: string) => void
   getCommands: () => DataTableCommand[]
   getRowSelection: () => DataTableRowSelectionState
-  onRowClick?: (row: TData) => void
+  onRowClick?: (
+    event: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
+    row: TData
+  ) => void
   emptyState: DataTableEmptyState
   isLoading: boolean
   showSkeleton: boolean