Create ProductsTable component that handle the table + all filters

app/components/product_component/product_component.html.haml

@@ -4,9 +4,9 @@
       .image
         = image_tag @image.url(:mini)
     = @name
-  - if @columns.include?(:unit)
+  - if @columns.include?("unit")
     %td.products_column.unit
       = @unit
-  - if @columns.include?(:price)
+  - if @columns.include?("price")
     %td.products_column.price
       = @price

app/components/products_table_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class ProductsTableComponent < ViewComponentReflex::Component
+  def initialize(user:)
+    super
+    @columns = ["price", "unit"]
+    @selected = ["price", "unit"]
+    @user = user
+
+    fetch_products
+  end
+
+  def toggle_column
+    column = element.dataset['value']
+    @selected = @selected.include?(column) ? @selected - [column] : @selected + [column]
+  end
+  private
+
+  def fetch_products
+    @products = Spree::Product.managed_by(@user).order('name asc').limit(@per_page_selected.first)
+  end
+end

app/components/products_table_component/products_table_component.html.haml

@@ -0,0 +1,13 @@
+= component_controller do
+  #products_page_form
+    #filter_results
+      %input.search{type: 'text', placeholder: 'Search', id: 'search_query'}
+      %button.btn.btn-primary{type: 'submit'}
+        Filter results
+
+    #columns_selector
+      = render(SelectorComponent.new(title: "Columns", selected: @selected, items: @columns, data: { key: key, reflex: "click->ProductsTableComponent#toggle_column" }))
+
+  #products_table
+    %table
+      = render(ProductComponent.with_collection(@products, columns: @selected))

app/components/products_table_component/products_table_component.scss

@@ -0,0 +1,16 @@
+#products_page_form {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 10px;
+  margin-bottom: 10px;
+  
+  #filter_results {
+
+  }
+  #columns_selector {
+
+  }
+}
+
+#products_table {
+}

app/views/admin/products/index.html.haml

@@ -5,15 +5,4 @@
 = render partial: 'spree/admin/shared/product_sub_menu'
 
 #products_page
-  #products_page_form
-    #filter_results
-      %input.search{type: 'text', placeholder: 'Search', id: 'search_query'}
-      %button.btn.btn-primary{type: 'submit'}
-        Filter results
-
-    #columns_selector
-      = render(SelectorComponent.new(title: "Columns", selected: [:price], items: [:price, :unit]))
-
-  #products_table
-    %table
-      = render(ProductComponent.with_collection(@products, columns: [:price]))
+  = render(ProductsTableComponent.new(user: spree_current_user))

app/webpacker/css/admin/all.scss

@@ -122,5 +122,6 @@
 @import 'app/components/help_modal_component/help_modal_component';
 @import "app/components/product_component/product_component";
 @import "app/components/selector_component/selector_component";
+@import "app/components/products_table_component/products_table_component";
 
 @import "v2/main.scss";