add table component (style, preview and code)

app/components/table_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class TableComponent < ViewComponent::Base
+
+  renders_one :header, TableRowComponent
+  renders_many :rows, TableRowComponent
+
+  def initialize(id: '', stripped: false)
+    super
+    @id = id
+    @stripped = stripped
+  end
+
+  def stripped_class
+    @stripped ? 'table-content-stripped' : ''
+  end
+end

app/components/table_component/table_component.html.haml

@@ -0,0 +1,6 @@
+%table.table-content{id: @id, class: stripped_class}
+  %thead
+    = header
+  %tbody
+    - rows.each do |row|
+      = row

app/components/table_row_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class TableRowComponent < ViewComponent::Base
+
+  renders_many :ths
+  renders_many :tds
+end

app/components/table_row_component/table_row_component.html.haml

@@ -0,0 +1,6 @@
+%tr
+  - ths.each do |th|
+    %th= th
+
+  - tds.each do |td|
+    %td= td

test/components/previews/table_component_preview.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class TableComponentPreview < ViewComponent::Preview
+
+  include ActionView::Helpers::UrlHelper
+
+  def default
+    render TableComponent.new do |t|
+      table_content(t)
+    end
+  end
+
+  def stripped
+    render TableComponent.new(stripped: true) do |t|
+      table_content(t)
+    end
+  end
+
+  private
+
+  def table_content(t)
+    headers = 5.times.map { |i| "header #{i}" }
+    rows = 6.times.map { |row| 5.times.map { |i| "line #{row} :#{i} " } }
+
+    t.header do |h|
+      headers.each do |header|
+        h.th { header }
+      end
+      h.th { 'Action' }
+    end
+
+    rows.each do |row|
+      t.row do |r|
+        row.each do |col|
+          r.td { col }
+        end
+
+        r.td do
+          link_to('Edit', '', class: 'mr-3') + link_to('Delete', '')
+        end
+      end
+    end
+
+  end
+end