add sort parameter to option component

app/components/table_component.rb

@@ -5,14 +5,15 @@ class TableComponent < ViewComponent::Base
   renders_one :header, TableRowComponent
   renders_many :rows, TableRowComponent
 
-  def initialize(id: '', stripped: true, borderless: false, layout_fixed: false, small_text: nil, outline: nil)
+  def initialize(id: '', stripped: true, borderless: false, layout_fixed: false, small_text: false, outline: false, sort: false)
     super
     @id = id
     @stripped = stripped
     @borderless = borderless
     @layout_fixed = layout_fixed
     @small_text = small_text
     @outline = outline
+    @sort = sort
   end
 
   def stripped_class

app/components/table_component/table_component.html.haml

@@ -1,7 +1,8 @@
-%table.table-content{id: @id ,class: stripped_class + ' ' + borderless_class + ' ' + layout_fixed_class + ' ' + mini_class + ' ' + outline_class}
-  %thead
-    = header
-  %tbody{id: "#{@id}_table_body"}
-    - rows.each do |row|
-      = row
-    = content
+%div{'data-controller': 'table-component'}
+  %table.table-content{id: @id ,'data-sort': @sort.to_s,class: stripped_class + ' ' + borderless_class + ' ' + layout_fixed_class + ' ' + mini_class + ' ' + outline_class}
+    %thead
+      = header
+    %tbody{id: "#{@id}_table_body"}
+      - rows.each do |row|
+        = row
+      = content

app/components/table_component/table_component_controller.js

@@ -0,0 +1,19 @@
+import {Controller} from "@hotwired/stimulus"
+import DataTable from 'datatables.net-dt';
+
+
+// Connects to data-controller="table-component"
+export default class extends Controller {
+    connect(){    
+        let table_component
+        table_component = this.element.childNodes[1]
+        if (table_component.dataset.sort === 'true'){
+            let table = new DataTable('#'+table_component.id, {
+                paging: false,
+                info: false,
+                searching: false,
+                autoWidth: true
+            });
+        }
+    }
+}