feat(ui,dashboard): Migrate SC tables to DataTable (#11106)

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

@@ -27,7 +27,7 @@ interface DataTableTableProps {
  * 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 hoveredRowId = React.useRef<string | null>(null)
   const isKeyDown = React.useRef(false)
 
   const [showStickyBorder, setShowStickyBorder] = React.useState(false)
@@ -57,7 +57,7 @@ const DataTableTable = (props: DataTableTableProps) => {
 
         const row = instance
           .getRowModel()
-          .rows.find((r) => r.id === hoveredRowId)
+          .rows.find((r) => r.id === hoveredRowId.current)
 
         if (row && row.getCanSelect()) {
           row.toggleSelected()
@@ -190,10 +190,10 @@ const DataTableTable = (props: DataTableTableProps) => {
                 return (
                   <Table.Row
                     key={row.id}
-                    onMouseEnter={() => setHoveredRowId(row.id)}
-                    onMouseLeave={() => setHoveredRowId(null)}
+                    onMouseEnter={() => (hoveredRowId.current = row.id)}
+                    onMouseLeave={() => (hoveredRowId.current = null)}
                     onClick={(e) => instance.onRowClick?.(e, row)}
-                    className={clx("group/row last:border-b-0", {
+                    className={clx("group/row last-of-type:border-b-0", {
                       "cursor-pointer": !!instance.onRowClick,
                     })}
                   >
@@ -288,7 +288,7 @@ const DataTableEmptyStateDisplay = ({
     state === DataTableEmptyState.EMPTY ? props?.empty : props?.filtered
 
   return (
-    <div className="flex min-h-[250px] w-full flex-col items-center justify-center border-y px-6 py-4">
+    <div className="flex min-h-[250px] w-full flex-1 flex-col items-center justify-center border-y px-6 py-4">
       {content?.custom ?? (
         <DefaultEmptyStateContent
           heading={content?.heading}
@@ -332,4 +332,3 @@ function getIsEditableElementFocused() {
 
 export { DataTableTable }
 export type { DataTableEmptyStateProps, DataTableTableProps }
-

packages/design-system/ui/src/blocks/data-table/index.ts

@@ -19,6 +19,8 @@ export type {
   DataTableFilteringState,
   DataTableHeaderContext,
   DataTablePaginationState,
+  DataTableRow,
+  DataTableRowData,
   DataTableRowSelectionState,
   DataTableSortDirection,
   DataTableSortingState,

packages/design-system/ui/src/blocks/data-table/types.ts

@@ -14,6 +14,7 @@ import type {
   IdentifiedColumnDef,
   IdIdentifier,
   PaginationState,
+  Row,
   RowData,
   RowSelectionState,
   SortDirection,
@@ -23,6 +24,8 @@ import type {
 
 export type DataTableRowData = RowData
 
+export type DataTableRow<TData extends DataTableRowData> = Row<TData>
+
 export type DataTableAction<TData> = {
   label: string
   onClick: (ctx: CellContext<TData, unknown>) => void

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

@@ -21,6 +21,7 @@ import {
   DataTableFilteringState,
   DataTableFilterOption,
   DataTablePaginationState,
+  DataTableRow,
   DataTableRowSelectionState,
   DataTableSortingState,
 } from "./types";
@@ -56,6 +57,7 @@ interface DataTableOptions<TData>
   rowSelection?: {
     state: DataTableRowSelectionState
     onRowSelectionChange: (state: DataTableRowSelectionState) => void
+    enableRowSelection?: boolean | ((row: DataTableRow<TData>) => boolean) | undefined
   }
   /**
    * The state and callback for the sorting.
@@ -170,7 +172,7 @@ const useDataTable = <TData,>({
   const { state: sortingState, onSortingChange } = sorting ?? {}
   const { state: filteringState, onFilteringChange } = filtering ?? {}
   const { state: paginationState, onPaginationChange } = pagination ?? {}
-  const { state: rowSelectionState, onRowSelectionChange } = rowSelection ?? {}
+  const { state: rowSelectionState, onRowSelectionChange, enableRowSelection } = rowSelection ?? {}
 
   const autoResetPageIndexHandler = React.useCallback(() => {
     return autoResetPageIndex
@@ -236,6 +238,7 @@ const useDataTable = <TData,>({
       ),
       pagination: paginationState,
     },
+    enableRowSelection,
     rowCount,
     onColumnFiltersChange: filteringStateHandler(),
     onRowSelectionChange: rowSelectionStateHandler(),