plutonium 0.14.1 → 0.15.0.pre.rc2

data/lib/plutonium/ui/table/components/pagy_info.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class PagyInfo < Plutonium::UI::Component::Base
+          include Pagy::Frontend
+
+          def initialize(pagy, per_page_options: [5, 10, 20, 50, 100])
+            @pagy = pagy
+            @per_page_options = (per_page_options + [@pagy.limit]).uniq.sort
+          end
+
+          def view_template
+            div(class: "flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 dark:text-gray-400") do
+              results_info
+              per_page_selector
+            end
+          end
+
+          private
+
+          def results_info
+            div do
+              plain "Showing "
+              b { @pagy.from.to_s }
+              plain " to "
+              b { @pagy.to.to_s }
+              plain " of "
+              b { @pagy.count }
+              plain " results"
+            end
+          end
+
+          def per_page_selector
+            original_attributes = Phlex::HTML::EVENT_ATTRIBUTES
+            temp_attributes = Phlex::HTML::EVENT_ATTRIBUTES.dup
+            temp_attributes.delete("onchange")
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, temp_attributes)
+
+            div(class: "flex items-center space-x-2 mt-2 md:mt-0") do
+              label(for: "perPage", class: "mr-2") { "Per page" }
+              select(id: "perPage", name: "items", class: select_classes, onchange: "window.location.href=this.value") do
+                @per_page_options.each do |option|
+                  option(value: page_url(option), selected: option == @pagy.limit) { option.to_s }
+                end
+              end
+            end
+          ensure
+            # TODO: remove this once Phlex adds support for SafeValues
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, original_attributes)
+          end
+
+          def select_classes
+            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          end
+
+          def page_url(limit)
+            original_limit = @pagy.vars[:limit]
+            @pagy.vars[:limit] = limit
+            pagy_url_for(@pagy, @pagy.page)
+          ensure
+            @pagy.vars[:limit] = original_limit
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/pagy_page_info.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class PagyPageInfo < Plutonium::UI::Component::Base
+          include Pagy::Frontend
+
+          def initialize(pagy, per_page_options: [5, 10, 20, 50, 100])
+            @pagy = pagy
+            @per_page_options = (per_page_options + [@pagy.limit]).uniq.sort
+          end
+
+          def view_template
+            div(class: "flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 dark:text-gray-400") do
+              results_info
+              per_page_selector
+            end
+          end
+
+          private
+
+          def results_info
+            div do
+              plain "Showing "
+              b { @pagy.from.to_s }
+              plain " to "
+              b { @pagy.to.to_s }
+              plain " of "
+              b { @pagy.count }
+              plain " results"
+            end
+          end
+
+          def per_page_selector
+            original_attributes = Phlex::HTML::EVENT_ATTRIBUTES
+            temp_attributes = Phlex::HTML::EVENT_ATTRIBUTES.dup
+            temp_attributes.delete("onchange")
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, temp_attributes)
+
+            div(class: "flex items-center space-x-2 mt-2 md:mt-0") do
+              label(for: "perPage", class: "mr-2") { "Per page" }
+              select(id: "perPage", name: "items", class: select_classes, onchange: "window.location.href=this.value") do
+                @per_page_options.each do |option|
+                  option(value: page_url(option), selected: option == @pagy.limit) { option.to_s }
+                end
+              end
+            end
+          ensure
+            # TODO: remove this once Phlex adds support for SafeValues
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, original_attributes)
+          end
+
+          def select_classes
+            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          end
+
+          def page_url(limit)
+            original_limit = @pagy.vars[:limit]
+            @pagy.vars[:limit] = limit
+            pagy_url_for(@pagy, @pagy.page)
+          ensure
+            @pagy.vars[:limit] = original_limit
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/pagy_pagination.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class PagyPagination < Plutonium::UI::Component::Base
+          include Pagy::Frontend
+
+          def initialize(pagy)
+            @pagy = pagy
+          end
+
+          def view_template
+            nav(aria_label: "Page navigation", class: "flex justify-center mt-4") do
+              ul(class: "inline-flex -space-x-px text-sm") do
+                prev_link
+                page_links
+                next_link
+              end
+            end
+          end
+
+          private
+
+          def prev_link
+            li do
+              if @pagy.prev
+                a(href: page_url(@pagy.prev), class: link_classes(true)) {
+                  render Phlex::TablerIcons::ChevronLeft.new
+                }
+              else
+                a(href: "#", class: disabled_link_classes(true), aria_disabled: "true") {
+                  render Phlex::TablerIcons::ChevronLeft.new
+                }
+              end
+            end
+          end
+
+          def next_link
+            li do
+              if @pagy.next
+                a(href: page_url(@pagy.next), class: link_classes(false, true)) {
+                  render Phlex::TablerIcons::ChevronRight.new
+                }
+              else
+                a(href: "#", class: disabled_link_classes(false, true), aria_disabled: "true") {
+                  render Phlex::TablerIcons::ChevronRight.new
+                }
+              end
+            end
+          end
+
+          def page_links
+            @pagy.series.each do |item|
+              li do
+                case item
+                when Integer
+                  page_link(item)
+                when String
+                  current_page_link(item)
+                when :gap
+                  gap_link
+                end
+              end
+            end
+          end
+
+          def page_link(page)
+            a(href: page_url(page), class: link_classes) { page.to_s }
+          end
+
+          def current_page_link(page)
+            a(href: "#", class: current_link_classes, aria_current: "page") { page.to_s }
+          end
+
+          def gap_link
+            a(href: "#", class: link_classes, aria_disabled: "true") { "..." }
+          end
+
+          def link_classes(first = false, last = false)
+            classes = ["flex", "items-center", "justify-center", "px-3", "h-8", "leading-tight", "text-gray-500", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "hover:text-gray-700", "dark:bg-gray-800", "dark:border-gray-700", "dark:text-gray-400", "dark:hover:bg-gray-700", "dark:hover:text-white"]
+            classes << "rounded-s-lg" if first
+            classes << "rounded-e-lg" if last
+            classes.join(" ")
+          end
+
+          def current_link_classes
+            "flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+          end
+
+          def disabled_link_classes(first = false, last = false)
+            classes = link_classes(first, last).split
+            classes << "opacity-50" << "cursor-not-allowed"
+            classes.join(" ")
+          end
+
+          def page_url(page)
+            pagy_url_for(@pagy, page)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/scopes_bar.rb

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class ScopesBar < Plutonium::UI::Component::Base
+          include Plutonium::UI::Component::Behaviour
+
+          def view_template
+            div(
+              class:
+                # "flex flex-wrap justify-between items-center gap-4 p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 mb-4"
+                "flex flex-wrap justify-between items-center gap-4 mb-4"
+            ) do
+              div(class: "flex flex-wrap items-center gap-2") do
+                name = "all"
+                if current_scope.blank?
+                  a(
+                    id: "#{name}-scope",
+                    href: current_query_object.build_url(scope: nil),
+                    class:
+                      "px-4 py-2 text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-lg hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                  ) { name.humanize }
+                else
+                  a(
+                    id: "#{name}-scope",
+                    href: current_query_object.build_url(scope: nil),
+                    class:
+                      "px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
+                  ) { name.humanize }
+                end
+
+                current_query_object.scope_definitions.each do |name, definition|
+                  if name == current_scope
+                    a(
+                      id: "#{name}-scope",
+                      href: current_query_object.build_url(scope: name),
+                      class:
+                        "px-4 py-2 text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-lg hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                    ) { name.humanize }
+                  else
+                    a(
+                      id: "#{name}-scope",
+                      href: current_query_object.build_url(scope: name),
+                      class:
+                        "px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
+                    ) { name.humanize }
+                  end
+                end
+              end
+
+              # div(class: "flex flex-wrap items-center gap-2") do
+              #   button(
+              #     class:
+              #       "inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
+              #   ) do
+              #     svg(
+              #       class: "w-4 h-4 mr-2",
+              #       fill: "none",
+              #       stroke: "currentColor",
+              #       viewbox: "0 0 24 24",
+              #       xmlns: "http://www.w3.org/2000/svg"
+              #     ) do |s|
+              #       s.path(
+              #         stroke_linecap: "round",
+              #         stroke_linejoin: "round",
+              #         stroke_width: "2",
+              #         d:
+              #           "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              #       )
+              #     end
+              #     plain " Delete Selected "
+              #   end
+              #   button(
+              #     class:
+              #       "inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800"
+              #   ) do
+              #     svg(
+              #       class: "w-4 h-4 mr-2",
+              #       fill: "none",
+              #       stroke: "currentColor",
+              #       viewbox: "0 0 24 24",
+              #       xmlns: "http://www.w3.org/2000/svg"
+              #     ) do |s|
+              #       s.path(
+              #         stroke_linecap: "round",
+              #         stroke_linejoin: "round",
+              #         stroke_width: "2",
+              #         d:
+              #           "M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+              #       )
+              #     end
+              #     plain " Archive Selected "
+              #   end
+              #   button(
+              #     id: "dropdownActionButton",
+              #     data_dropdown_toggle: "dropdownAction",
+              #     class:
+              #       "inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700",
+              #     type: "button"
+              #   ) do
+              #     span(class: "sr-only") { "Action button" }
+              #     plain " More Actions "
+              #     svg(
+              #       class: "w-2.5 h-2.5 ml-2.5",
+              #       aria_hidden: "true",
+              #       xmlns: "http://www.w3.org/2000/svg",
+              #       fill: "none",
+              #       viewbox: "0 0 10 6"
+              #     ) do |s|
+              #       s.path(
+              #         stroke: "currentColor",
+              #         stroke_linecap: "round",
+              #         stroke_linejoin: "round",
+              #         stroke_width: "2",
+              #         d: "m1 1 4 4 4-4"
+              #       )
+              #     end
+              #   end
+              # end
+            end
+          end
+
+          private
+
+          def current_scope = resource_query_params[:scope]
+
+          def render?
+            current_query_object.scope_definitions.present?
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/search_bar.rb

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class SearchBar < Plutonium::UI::Component::Base
+          def view_template
+            original_attributes = Phlex::HTML::EVENT_ATTRIBUTES
+            temp_attributes = Phlex::HTML::EVENT_ATTRIBUTES.dup
+            temp_attributes.delete("oninput")
+            temp_attributes.delete("onclick")
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, temp_attributes)
+
+            div(
+              class:
+                # "p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 space-y-2 mb-4"
+                "space-y-2 mb-4"
+            ) do
+              search_query = current_query_object.search_query
+              query_params = resource_query_params
+              render Phlexi::Form(:q, attributes: {data: {controller: "form", turbo_frame: nil}}) {
+                div(class: "relative") do
+                  div(class: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none") do
+                    svg(
+                      class: "w-5 h-5 text-gray-500 dark:text-gray-400",
+                      aria_hidden: "true",
+                      fill: "currentColor",
+                      viewbox: "0 0 20 20",
+                      xmlns: "http://www.w3.org/2000/svg"
+                    ) do |s|
+                      s.path(
+                        fill_rule: "evenodd",
+                        d:
+                          "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
+                        clip_rule: "evenodd"
+                      )
+                    end
+                  end
+                  render field(:search, value: search_query)
+                    .placeholder("Search...")
+                    .input_tag(
+                      id: "search",
+                      value: search_query,
+                      class: "block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+                      data: {
+                        action: "form#submit",
+                        turbo_permanent: true
+                      }
+                    )
+
+                  render field(:scope, value: query_params[:scope]).input_tag(type: :hidden)
+                  render field(:sort_fields, value: query_params[:sort_fields]).input_array_tag do |f|
+                    render f.input_tag(type: :hidden)
+                  end
+                  nest_one(:sort_directions) do |directions|
+                    query_params[:sort_directions]&.each do |name, value|
+                      render directions.field(name, value:).input_tag(hidden: true)
+                    end
+                  end
+                end
+              }
+
+              # div(class: "flex flex-wrap items-center gap-4") do
+              #   span(class: "text-sm font-medium text-gray-900 dark:text-white") do
+              #     "Filters:"
+              #   end
+              #   select(
+              #     id: "category-filter",
+              #     class:
+              #       "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+              #   ) do
+              #     option(selected: "selected", value: "") { "All Categories" }
+              #     option(value: "technology") { "Technology" }
+              #     option(value: "science") { "Science" }
+              #     option(value: "health") { "Health" }
+              #   end
+              #   div(class: "flex items-center space-x-2") do
+              #     input(
+              #       type: "date",
+              #       id: "start-date",
+              #       class:
+              #         "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+              #     )
+              #     span(class: "text-gray-500 dark:text-gray-400") { "to" }
+              #     input(
+              #       type: "date",
+              #       id: "end-date",
+              #       class:
+              #         "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+              #     )
+              #   end
+              #   select(
+              #     id: "author-filter",
+              #     class:
+              #       "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+              #   ) do
+              #     option(selected: "selected", value: "") { "All Authors" }
+              #     option(value: "john-doe") { "John Doe" }
+              #     option(value: "jane-smith") { "Jane Smith" }
+              #   end
+              #   button(
+              #     onclick: "applyFilters()",
+              #     class:
+              #       "inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
+              #   ) do
+              #     svg(
+              #       class: "w-4 h-4 mr-2",
+              #       fill: "currentColor",
+              #       viewbox: "0 0 20 20",
+              #       xmlns: "http://www.w3.org/2000/svg"
+              #     ) do |s|
+              #       s.path(
+              #         fill_rule: "evenodd",
+              #         d:
+              #           "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z",
+              #         clip_rule: "evenodd"
+              #       )
+              #     end
+              #     plain " Apply Filters "
+              #   end
+              #   button(
+              #     onclick: "clearFilters()",
+              #     class:
+              #       "inline-flex items-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-4 py-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+              #   ) do
+              #     svg(
+              #       class: "w-4 h-4 mr-2",
+              #       fill: "currentColor",
+              #       viewbox: "0 0 20 20",
+              #       xmlns: "http://www.w3.org/2000/svg"
+              #     ) do |s|
+              #       s.path(
+              #         fill_rule: "evenodd",
+              #         d:
+              #           "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+              #         clip_rule: "evenodd"
+              #       )
+              #     end
+              #     plain " Clear Filters "
+              #   end
+              # end
+            end
+          ensure
+            # TODO: remove this once Phlex adds support for SafeValues
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, original_attributes)
+          end
+
+          private
+
+          def render?
+            current_query_object.search_filter.present? && current_policy.allowed_to?(:search?)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/display_theme.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      class DisplayTheme < Phlexi::Table::DisplayTheme
+        def self.theme
+          super.merge({
+            string: "max-h-[150px] overflow-y-auto",
+            prefixed_icon: "w-4 h-4 mr-1",
+            link: "text-primary-600 dark:text-primary-500",
+            color: "flex items-center",
+            color_indicator: "w-10 h-10 rounded-full mr-2",
+            email: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
+            json: "max-h-[150px] overflow-y-auto whitespace-pre font-mono shadow-inner p-4"
+          })
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/resource.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      class Resource < Plutonium::UI::Component::Base
+        attr_reader :collection, :resource_fields, :resource_definition
+
+        def initialize(collection, resource_fields:, resource_definition:)
+          @collection = collection
+          @resource_fields = resource_fields
+          @resource_definition = resource_definition
+        end
+
+        def view_template
+          render_search_bar
+          render_scopes_bar
+
+          collection.empty? ? render_empty_card : render_table
+
+          render_footer
+        end
+
+        private
+
+        def render_search_bar
+          TableSearchBar()
+        end
+
+        def render_scopes_bar
+          TableScopesBar()
+        end
+
+        def render_empty_card
+          EmptyCard("No #{resource_name_plural(resource_class)} match your query") {
+            action = resource_definition.defined_actions[:new]
+            if action&.permitted_by?(current_policy)
+              url = resource_url_for(resource_class, *action.route_options.url_args, **action.route_options.url_options)
+              ActionButton(action, url:)
+            end
+          }
+        end
+
+        def render_table
+          render Plutonium::UI::Table::Base.new(collection) do |table|
+            @resource_fields.each do |name|
+              # column :name, as: :string
+              # column :description, class: "text-red-700"
+              # column :age, align: :end
+              # column :dob do |proxy|
+              #   proxy.field(:dob).date_tag
+              # end
+
+              column_definition = resource_definition.defined_columns[name] || {}
+              column_display_options = column_definition[:options] || {}
+              display_field_as = column_display_options.delete(:as)
+              align_field_to = column_display_options.delete(:align)
+
+              display_block = column_definition[:block] || ->(wrapped_object, key) {
+                f = wrapped_object.field(key)
+                display_field_as ||= f.inferred_field_component
+                f.send(:"#{display_field_as}_tag", **column_display_options)
+              }
+
+              field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options] : {}
+              field_options[:as] = display_field_as
+              field_options[:align] = align_field_to if align_field_to
+              table.column name, **field_options, sort_params: current_query_object.sort_params_for(name), &display_block
+            end
+
+            table.actions do |wrapped_object|
+              record = wrapped_object.unwrapped
+              policy = policy_for(record:)
+
+              div(class: "flex space-x-2") {
+                resource_definition.defined_actions
+                  .select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") }
+                  .values
+                  .each { |action|
+                    url = resource_url_for(record, *action.route_options.url_args, **action.route_options.url_options)
+
+                    ActionButton(action, url:, variant: :table)
+                  }
+              }
+            end
+          end
+        end
+
+        def render_footer
+          div(class: "sticky bottom-[-2px] p-4 pb-6 w-full z-50 bg-gray-50 dark:bg-gray-900") {
+            TableInfo(pagy_instance)
+            TablePagination(pagy_instance)
+          }
+        end
+      end
+    end
+  end
+end