New column picker for variant datagrid

.changeset/lucky-otters-invite.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+New column picker for variant datagrid

locale/defaultMessages.json

@@ -476,10 +476,6 @@
     "context": "dialog header",
     "string": "Change customer shipping address"
   },
-  "142MJn": {
-    "context": "select visible columns button",
-    "string": "Columns"
-  },
   "15PiOX": {
     "context": "button title",
     "string": "Unassign"
@@ -2838,10 +2834,6 @@
   "IH47ID": {
     "string": "Use button above to add new product variants"
   },
-  "IHtOda": {
-    "context": "input label",
-    "string": "Selected columns"
-  },
   "IKvOK+": {
     "context": "Amount error message",
     "string": "Amount must be bigger than 0"
@@ -4767,6 +4759,10 @@
   "VyzsWZ": {
     "string": "Default Billing Address"
   },
+  "Vze3qI": {
+    "context": "column category descriptor",
+    "string": "Channels"
+  },
   "W/Es0H": {
     "string": "Order successfully cancelled"
   },
@@ -5865,10 +5861,6 @@
   "dPYqy0": {
     "string": "We are currently exporting your requested CSV. As soon as it is available it will be sent to your email address"
   },
-  "dS+SOT": {
-    "context": "header",
-    "string": "Column settings"
-  },
   "dS8Adx": {
     "context": "product",
     "string": "Digital"
@@ -7347,10 +7339,6 @@
     "context": "currency filter label",
     "string": "Currency"
   },
-  "p+HM56": {
-    "context": "header",
-    "string": "Customize list"
-  },
   "p+UDec": {
     "context": "payment status",
     "string": "Payment"

src/categories/components/CategoryProductListDatagrid/CategoryProductListDatagrid.tsx

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
+import { useColumns } from "@dashboard/components/Datagrid/ColumnPicker/useColumns";
 import Datagrid from "@dashboard/components/Datagrid/Datagrid";
-import { useColumnsDefault } from "@dashboard/components/Datagrid/hooks/useColumnsDefault";
 import {
   DatagridChangeStateContext,
   useDatagridChangeState,
@@ -40,8 +40,11 @@ export const CategoryProductListDatagrid = ({
     [products, availableColumns],
   );
 
-  const { columns, onColumnMoved, onColumnResize } =
-    useColumnsDefault(availableColumns);
+  const { visibleColumns, handlers } = useColumns({
+    staticColumns: availableColumns,
+    selectedColumns: ["name"],
+    onSave: () => null,
+  });
 
   const handleRowAnchor = useCallback(
     ([, row]: Item) => productUrl(products[row].id),
@@ -57,7 +60,7 @@ export const CategoryProductListDatagrid = ({
         loading={disabled}
         verticalBorder={false}
         rowMarkers="checkbox"
-        availableColumns={columns}
+        availableColumns={visibleColumns}
         rows={products?.length ?? 0}
         getCellContent={getCellContent}
         getCellError={() => false}
@@ -68,8 +71,8 @@ export const CategoryProductListDatagrid = ({
         rowAnchor={handleRowAnchor}
         menuItems={() => []}
         selectionActions={() => selectionActionButton}
-        onColumnResize={onColumnResize}
-        onColumnMoved={onColumnMoved}
+        onColumnResize={handlers.onResize}
+        onColumnMoved={handlers.onMove}
         onRowSelectionChange={onSelectProductsIds}
       />