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

packages/design-system/ui/src/blocks/data-table/components/data-table-non-sortable-header-cell.tsx

@@ -35,7 +35,6 @@ export const DataTableNonSortableHeaderCell = React.forwardRef<
     ...propStyle,
     transform: transformStyle ? CSS.Transform.toString(transformStyle) : undefined,
     transition,
-    position: 'relative' as const,
   }
 
   const combineRefs = (element: HTMLTableCellElement | null) => {

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

@@ -38,9 +38,7 @@ export const DataTableSortableHeaderCell = React.forwardRef<
     transform: transformStyle ? CSS.Transform.toString(transformStyle) : undefined,
     transition,
     opacity: isDragging ? 0.8 : 1,
-    zIndex: isDragging ? 50 : undefined,
-    backgroundColor: "white",
-    position: 'relative' as const,
+    zIndex: isDragging ? 50 : isFirstColumn ? 1 : undefined,
   }
 
   const combineRefs = (element: HTMLTableCellElement | null) => {
@@ -58,7 +56,7 @@ export const DataTableSortableHeaderCell = React.forwardRef<
     <Table.HeaderCell
       ref={combineRefs}
       style={style}
-      className={clx(className, "group/header-cell relative")}
+      className={clx(className, "group/header-cell bg-ui-bg-base")}
       {...attributes}
       {...listeners}
       {...props}