chore(ui): add tsdocs for DataTable components (#11087)

Add TSDocs for `DataTable` components to generate better docs for their props

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

@@ -77,6 +77,7 @@ const DataTableActionCell = <TData,>({
     </DropdownMenu>
   )
 }
+DataTableActionCell.displayName = "DataTable.ActionCell"
 
 export { DataTableActionCell }
 export type { DataTableActionCellProps }

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

@@ -6,9 +6,17 @@ import { useDataTableContext } from "@/blocks/data-table/context/use-data-table-
 import { CommandBar } from "@/components/command-bar"
 
 interface DataTableCommandBarProps {
+  /**
+   * The label to show when items are selected. If a function is passed, 
+   * it will be called with the count of selected items.
+   */
   selectedLabel?: ((count: number) => string) | string
 }
 
+/**
+ * This component adds a command bar to the data table, which is used
+ * to show commands that can be executed on the selected rows.
+ */
 const DataTableCommandBar = (props: DataTableCommandBarProps) => {
   const { instance } = useDataTableContext()
 
@@ -55,6 +63,7 @@ const DataTableCommandBar = (props: DataTableCommandBarProps) => {
     </CommandBar>
   )
 }
+DataTableCommandBar.displayName = "DataTable.CommandBar"
 
 export { DataTableCommandBar }
 export type { DataTableCommandBarProps }

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

@@ -51,6 +51,7 @@ const DataTableFilterBar = ({
     </div>
   )
 }
+DataTableFilterBar.displayName = "DataTable.FilterBar"
 
 const DataTableFilterBarSkeleton = ({
   filterCount,

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

@@ -8,9 +8,16 @@ import { Tooltip } from "@/components/tooltip"
 import { Funnel } from "@medusajs/icons"
 
 interface DataTableFilterMenuProps {
+  /**
+   * The tooltip to show when hovering over the filter menu.
+   */
   tooltip?: string
 }
 
+/**
+ * This component adds a filter menu to the data table, allowing users
+ * to filter the table's data.
+ */
 const DataTableFilterMenu = (props: DataTableFilterMenuProps) => {
   const { instance } = useDataTableContext()
 
@@ -56,6 +63,7 @@ const DataTableFilterMenu = (props: DataTableFilterMenuProps) => {
     </DropdownMenu>
   )
 }
+DataTableFilterMenu.displayName = "DataTable.FilterMenu"
 
 const DataTableFilterMenuSkeleton = () => {
   return <Skeleton className="size-7" />

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

@@ -211,6 +211,7 @@ const DataTableFilter = ({ id, filter }: DataTableFilterProps) => {
     </Popover>
   )
 }
+DataTableFilter.displayName = "DataTable.Filter"
 
 type DataTableFilterDateContentProps = {
   id: string

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

@@ -7,9 +7,15 @@ import { Skeleton } from "@/components/skeleton"
 import { Table } from "@/components/table"
 
 interface DataTablePaginationProps {
+  /**
+   * The translations for strings in the pagination component.
+   */
   translations?: React.ComponentProps<typeof Table.Pagination>["translations"]
 }
 
+/**
+ * This component adds a pagination component and functionality to the data table.
+ */
 const DataTablePagination = (props: DataTablePaginationProps) => {
   const { instance } = useDataTableContext()
 
@@ -38,6 +44,7 @@ const DataTablePagination = (props: DataTablePaginationProps) => {
     />
   )
 }
+DataTablePagination.displayName = "DataTable.Pagination"
 
 const DataTablePaginationSkeleton = () => {
   return (

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

@@ -8,11 +8,24 @@ import * as React from "react"
 import { useDataTableContext } from "@/blocks/data-table/context/use-data-table-context"
 
 interface DataTableSearchProps {
+  /**
+   * If true, the search input will be focused on mount.
+   */
   autoFocus?: boolean
+  /**
+   * Additional classes to pass to the search input.
+   */
   className?: string
+  /**
+   * The placeholder text to show in the search input.
+   */
   placeholder?: string
 }
 
+/**
+ * This component adds a search input to the data table, allowing users
+ * to search through the table's data.
+ */
 const DataTableSearch = (props: DataTableSearchProps) => {
   const { className, ...rest } = props
   const { instance } = useDataTableContext()
@@ -43,6 +56,7 @@ const DataTableSearch = (props: DataTableSearchProps) => {
     />
   )
 }
+DataTableSearch.displayName = "DataTable.Search"
 
 const DataTableSearchSkeleton = () => {
   return <Skeleton className="h-7 w-[128px]" />

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

@@ -21,6 +21,7 @@ const DataTableSelectCell = <TData,>(props: DataTableSelectCellProps<TData>) =>
     />
   )
 }
+DataTableSelectCell.displayName = "DataTable.SelectCell"
 
 interface DataTableSelectHeaderProps<TData> {
   ctx: DataTableHeaderContext<TData, unknown>

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

@@ -40,6 +40,7 @@ const DataTableSortingIcon = (props: SortingIconProps) => {
     </svg>
   )
 }
+DataTableSortingIcon.displayName = "DataTable.SortingIcon"
 
 export { DataTableSortingIcon }
 export type { SortingIconProps }

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

@@ -10,9 +10,16 @@ import { ArrowDownMini, ArrowUpMini, DescendingSorting } from "@medusajs/icons"
 import * as React from "react"
 
 interface DataTableSortingMenuProps {
+  /**
+   * The tooltip to show when hovering over the sorting menu.
+   */
   tooltip?: string
 }
 
+/**
+ * This component adds a sorting menu to the data table, allowing users
+ * to sort the table's data.
+ */
 const DataTableSortingMenu = (props: DataTableSortingMenuProps) => {
   const { instance } = useDataTableContext()
 
@@ -114,6 +121,7 @@ const DataTableSortingMenu = (props: DataTableSortingMenuProps) => {
     </DropdownMenu>
   )
 }
+DataTableSortingMenu.displayName = "DataTable.SortingMenu"
 
 function getSortLabel(column: DataTableColumn<any, unknown>) {
   const meta = column.columnDef.meta as DataTableSortableColumnDefMeta | undefined

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

@@ -23,6 +23,9 @@ interface DataTableTableProps {
   emptyState?: DataTableEmptyStateProps
 }
 
+/**
+ * This component renders the table in a data table, supporting advanced features.
+ */
 const DataTableTable = (props: DataTableTableProps) => {
   const [hoveredRowId, setHoveredRowId] = React.useState<string | null>(null)
   const isKeyDown = React.useRef(false)
@@ -254,6 +257,7 @@ const DataTableTable = (props: DataTableTableProps) => {
     </div>
   )
 }
+DataTableTable.displayName = "DataTable.Table"
 
 interface DataTableEmptyStateDisplayProps {
   state: DataTableEmptyState

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

@@ -11,11 +11,23 @@ interface DataTableToolbarTranslations {
 }
 
 interface DataTableToolbarProps {
+  /**
+   * Additional classes to pass to the wrapper `div` of the component.
+   */
   className?: string
+  /**
+   * The children to show in the toolbar.
+   */
   children?: React.ReactNode
+  /**
+   * The translations of strings in the toolbar.
+   */
   translations?: DataTableToolbarTranslations
 }
 
+/**
+ * Toolbar shown for the data table.
+ */
 const DataTableToolbar = (props: DataTableToolbarProps) => {
   return (
     <div className="flex flex-col divide-y">

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

@@ -14,12 +14,29 @@ import { DataTableToolbar } from "./components/data-table-toolbar"
 import { DataTableContextProvider } from "./context/data-table-context-provider"
 import { UseDataTableReturn } from "./use-data-table"
 
+/**
+ * The props of the `DataTable` component.
+ */
 interface DataTableProps<TData> {
+  /**
+   * The instance returned by the `useDataTable` hook.
+   */
   instance: UseDataTableReturn<TData>
+  /**
+   * The children of the component.
+   */
   children?: React.ReactNode
+  /**
+   * Additional classes to pass to the wrapper `div` of the component.
+   */
   className?: string
 }
 
+/**
+ * This component creates a data table with filters, pagination, sorting, and more.
+ * It's built on top of the `Table` component while expanding its functionality.
+ * The `DataTable` is useful to create tables similar to those in the Medusa Admin dashboard.
+ */
 const Root = <TData,>({
   instance,
   children,
@@ -33,6 +50,7 @@ const Root = <TData,>({
     </DataTableContextProvider>
   )
 }
+Root.displayName = "DataTable"
 
 const DataTable = Object.assign(Root, {
   Table: DataTableTable,