feat(ui,dashboard): Add DataTable block (#10024)

**What**
- Adds opinionated DataTable block to `@medusajs/ui` 
- Adds new DataTable to `@medusajs/dashboard` that uses the above mentioned block as the primitive.

The PR also replaces the table on /customer-groups and the variants table on /products/:id with the new DataTable, to provide an example of it's usage. The previous DataTable component has been renamed to `_DataTable` and has been deprecated.

**Note**
This PR has a lot of LOC. 5,346 of these changes are the fr.json file, which wasn't formatted correctly before. When adding the new translations needed for this PR the file was formatted which caused each line to change to have the proper indentation.

Resolves CMRC-333

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

@@ -7,8 +7,8 @@ import { useTranslation } from "react-i18next"
 
 import { useSelectedParams } from "../hooks"
 import { useDataTableFilterContext } from "./context"
-import { IFilter } from "./types"
 import FilterChip from "./filter-chip"
+import { IFilter } from "./types"
 
 interface SelectFilterProps extends IFilter {
   options: { label: string; value: unknown }[]
@@ -41,7 +41,9 @@ export const SelectFilter = ({
     .map((v) => options.find((o) => o.value === v)?.label)
     .filter(Boolean) as string[]
 
-  const [previousValue, setPreviousValue] = useState<string | string[] | undefined>(labelValues)
+  const [previousValue, setPreviousValue] = useState<
+    string | string[] | undefined
+  >(labelValues)
 
   const handleRemove = () => {
     selectedParams.delete()
@@ -84,8 +86,16 @@ export const SelectFilter = ({
     }
   }
 
-  const normalizedValues = labelValues ? (Array.isArray(labelValues) ? labelValues : [labelValues]) : null
-  const normalizedPrev = previousValue ? (Array.isArray(previousValue) ? previousValue : [previousValue]) : null
+  const normalizedValues = labelValues
+    ? Array.isArray(labelValues)
+      ? labelValues
+      : [labelValues]
+    : null
+  const normalizedPrev = previousValue
+    ? Array.isArray(previousValue)
+      ? previousValue
+      : [previousValue]
+    : null
 
   return (
     <Popover.Root modal open={open} onOpenChange={handleOpenChange}>

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

@@ -176,7 +176,7 @@ export const DataTableRoot = <TData,>({
                                 : undefined,
                             }}
                             className={clx({
-                              "bg-ui-bg-base sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                              "bg-ui-bg-subtle sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                                 isStickyHeader,
                               "left-[68px]":
                                 isStickyHeader && hasSelect && !isSelectHeader,

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

@@ -18,7 +18,10 @@ interface DataTableProps<TData>
 // const MemoizedDataTableRoot = memo(DataTableRoot) as typeof DataTableRoot
 const MemoizedDataTableQuery = memo(DataTableQuery) as typeof DataTableQuery
 
-export const DataTable = <TData,>({
+/**
+ * @deprecated Use the DataTable component from "/components/data-table" instead
+ */
+export const _DataTable = <TData,>({
   table,
   columns,
   pagination,