solidus_admin 0.0.2 → 0.1.0

data/app/components/solidus_admin/ui/table/component.html.erb

@@ -3,168 +3,179 @@
     rounded-lg
     border
     border-gray-100
-    overflow-hidden
   "
   data-controller="<%= stimulus_id %>"
   data-<%= stimulus_id %>-selected-row-class="bg-gray-15"
+  data-<%= stimulus_id %>-mode-value="<%= initial_mode %>"
+  data-<%= stimulus_id %>-sortable-value="<%= should_enable_sortable? %>"
+  data-action="
+    <%= component("ui/table/ransack_filter").stimulus_id %>:search-><%= stimulus_id %>#search
+    <%= component("ui/table/ransack_filter").stimulus_id %>:showSearch-><%= stimulus_id %>#showSearch
+  "
 >
-  <% toolbar_classes = "h-14 p-2 bg-white border-b border-gray-100 justify-start items-center gap-2 visible:flex hidden:hidden" %>
+  <% if @search %>
+    <div role="search">
+      <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "searchToolbar", hidden: initial_mode != "search") do %>
+        <%= form_with(
+          url: @search.url,
+          method: :get,
+          html: {
+            id: search_form_id,
+            class: 'flex-grow',
+            "data-turbo-action": "replace",
+            "data-#{stimulus_id}-target": "searchForm",
+            "data-action": "input->#{stimulus_id}#search change->#{stimulus_id}#search",
+          },
+        ) do |form| %>
+          <%= hidden_field_tag @search.scope_param_name, @search.current_scope.name if @search.scopes.present? %>
+          <%= render component('ui/forms/search_field').new(
+            name: @search.searchbar_param_name,
+            value: @search.value[@search.searchbar_key],
+            placeholder: t('.search_placeholder', resources: @data.plural_name),
+            "aria-label": t('.search_placeholder', resources: @data.plural_name),
+            "data-#{stimulus_id}-target": "searchField",
+            "data-turbo-permanent": "true",
+            id: "#{stimulus_id}-search-field-#{@id}",
+          ) %>
+        <% end %>
 
-  <div role="search">
-    <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="searchToolbar">
-      <%= form_with(
-        url: @search_url,
-        method: :get,
-        html: {
-          id: search_form_id,
-          class: 'flex-grow',
-          "data-turbo-frame": table_frame_id,
-          "data-turbo-action": "replace",
-          "data-#{stimulus_id}-target": "searchForm",
-          "data-action": "reset->#{stimulus_id}#search",
-        },
-      ) do |form| %>
-        <label class="items-center gap-1 p-0 inline-flex w-full justify-start relative">
-          <%= render component("ui/icon").new(name: 'search-line', class: "w-[1.4em] h-[1.4em] fill-gray-500 absolute ml-3") %>
-          <input
-            name="q[<%= @search_key %>]"
-            value="<%= params.dig(:q, @search_key) %>"
-            type="search"
-            placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
-            class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300 search-cancel:appearance-none"
-            data-<%= stimulus_id %>-target="searchField"
-            data-action="<%= stimulus_id %>#search"
-            aria-label="<%= t('.search_placeholder', resources: resource_plural_name) %>"
-          >
-          <button
-            class="absolute right-0 mr-3 peer-placeholder-shown:hidden"
-            data-action="<%= stimulus_id %>#clearSearch"
-            aria-label="<%= t('.clear') %>"
-          >
-            <%= render component("ui/icon").new(name: 'close-circle-fill', class: "w-[1.4em] h-[1.4em] fill-gray-500") %>
-          </button>
-        </label>
+        <% if @search.scopes.any? %>
+          <div class="ml-4">
+            <%= render component("ui/button").new(
+              text: t('.cancel'),
+              scheme: :ghost,
+              "data-action": "#{stimulus_id}#resetSearchAndFilters",
+            ) %>
+          </div>
+        <% end %>
       <% end %>
 
-      <div class="ml-4">
-        <%= render component("ui/button").new(
-          text: t('.cancel'),
-          scheme: :ghost,
-          "data-action": "#{stimulus_id}#cancelSearch",
-        ) %>
-      </div>
-    </div>
-
-    <% if @filters.any? %>
-      <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="filterToolbar">
-        <div class="font-semibold text-gray-700 text-sm px-2"><%= t('.refine_search') %>:</div>
-        <% @filters.each do |filter| %>
-          <label class="flex gap-2 px-2">
-            <%= render component('ui/forms/checkbox').new(
-              name: filter[:name],
-              value: filter[:value],
-              size: :s,
-              form: search_form_id,
-              'data-action': "#{stimulus_id}#search",
-            ) %>
-            <span class="text-gray-700 leading-none text-sm self-center"><%= filter[:label] %></span>
-          </label>
+      <% if @search.filters.any? %>
+        <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "filterToolbar", hidden: initial_mode != "search", class: "flex-wrap") do %>
+          <% @search.filters.each_with_index do |filter, index| %>
+            <%= render_ransack_filter_dropdown(filter, index) %>
+          <% end %>
         <% end %>
-      </div>
-    <% end %>
+      <% end %>
 
-    <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
-      <div class="flex-grow">
-        <%= render component("ui/tab").new(text: "All", current: true, href: "") %>
-      </div>
+      <% if @search.scopes.any? %>
+        <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "scopesToolbar", hidden: initial_mode != "scopes") do %>
+          <div class="flex-grow">
+            <%= form_with(url: @search.url, method: :get) do %>
+              <% @search.scopes.each do |scope| %>
+                <%= render component("ui/tab").new(
+                  tag: :button,
+                  type: :submit,
+                  text: scope.label,
+                  current: scope == @search.current_scope,
+                  name: @search.scope_param_name,
+                  value: scope.name,
+                ) %>
+              <% end %>
+            <% end %>
+          </div>
 
-      <%= render component("ui/button").new(
-        'aria-label': t('.filter'),
-        icon: "filter-3-line",
-        scheme: :secondary,
-        "data-action": "#{stimulus_id}#showSearch",
-      ) %>
+          <%= render component("ui/button").new(
+            'aria-label': t('.filter'),
+            icon: "filter-3-line",
+            scheme: :secondary,
+            "data-action": "#{stimulus_id}#showSearch",
+          ) %>
+        <% end %>
+      <% end %>
     </div>
-  </div>
+  <% end %>
 
-  <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="batchToolbar" role="toolbar" aria-label="<%= t(".batch_actions") %>">
+  <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "batchToolbar", role: "toolbar", "aria-label": t(".batch_actions"), hidden: true) do %>
     <%= form_tag '', id: batch_actions_form_id %>
-    <% @batch_actions.each do |batch_action| %>
+    <% @data.batch_actions.each do |batch_action| %>
       <%= render_batch_action_button(batch_action) %>
     <% end %>
-  </div>
+  <% end %>
+
+  <table class="table-fixed w-full border-collapse">
+    <colgroup>
+      <% @data.columns.each do |column| %>
+        <col <%= tag.attributes(**column.col) if column.col %>">
+      <% end %>
+    </colgroup>
 
-  <%= turbo_frame_tag table_frame_id, target: "_top" do %>
-    <table class="table-fixed w-full border-collapse">
-      <colgroup>
-        <% @columns.each do |column| %>
-          <col class="<%= column.class_name %>">
+    <thead
+      class="bg-gray-15 text-gray-700 text-left text-small"
+      data-<%= stimulus_id %>-target="defaultHeader"
+    >
+      <tr>
+        <% @data.columns.each do |column| %>
+          <%= render_header_cell(column.header) %>
         <% end %>
-      </colgroup>
+      </tr>
+    </thead>
 
+    <% if @data.batch_actions %>
       <thead
-        class="bg-gray-15 text-gray-700 text-left text-small"
-        data-<%= stimulus_id %>-target="defaultHeader"
+        data-<%= stimulus_id %>-target="batchHeader"
+        class="bg-white color-black text-xs leading-none text-left"
+        hidden
       >
         <tr>
-          <% @columns.each do |column| %>
-            <%= render_header_cell(column.header) %>
-          <% end %>
+          <%= render_header_cell(selectable_column.header) %>
+          <%= render_header_cell(content_tag(:div, safe_join([
+            content_tag(:span, "0", "data-#{stimulus_id}-target": "selectedRowsCount"),
+            " #{t('.rows_selected')}.",
+          ])), colspan: @data.columns.count - 1) %>
         </tr>
       </thead>
+    <% end %>
 
-      <% if @batch_actions %>
-        <thead
-          data-<%= stimulus_id %>-target="batchHeader"
-          class="bg-white color-black text-xs leading-none text-left"
-          hidden
+    <tbody
+      class="bg-white text-3.5 line-[150%] text-black"
+      data-<%= stimulus_id %>-target="tableBody"
+      <%= "data-controller=sortable" if should_enable_sortable? %>
+      <%= "data-sortable-param-value=#{@sortable.param}" if @sortable&.param %>
+      <%= "data-sortable-handle-value=#{@sortable.handle}" if @sortable&.handle %>
+      <%= "data-sortable-animation-value=#{@sortable.animation}" if @sortable&.animation %>
+    >
+      <% @data.rows.each do |row| %>
+        <tr
+          class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
+          <% if @data.url %>
+            data-action="click-><%= stimulus_id %>#rowClicked"
+            data-<%= stimulus_id %>-url-param="<%= @data.url.call(row) %>"
+            <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %>
+          <% end %>
         >
-          <tr>
-            <%= render_header_cell(selectable_column.header) %>
-            <%= render_header_cell(content_tag(:div, safe_join([
-              content_tag(:span, "0", "data-#{stimulus_id}-target": "selectedRowsCount"),
-              " #{t('.rows_selected')}.",
-            ])), colspan: @columns.count - 1) %>
-          </div>
-        </thead>
+          <% @data.columns.each do |column| %>
+            <%= render_data_cell(column, row) %>
+          <% end %>
+        </tr>
       <% end %>
 
-      <tbody class="bg-white text-3.5 line-[150%] text-black">
-        <% @rows.each do |row| %>
-          <tr class="<%= row_class_for(row) %>">
-            <% @columns.each do |column| %>
-              <%= render_data_cell(column.data, row) %>
-            <% end %>
-          </tr>
-        <% end %>
-
-        <% if @rows.empty? && @model_class %>
-          <tr>
-            <td
-              colspan="<%= @columns.size %>"
-              class="text-center py-4 text-3.5 line-[150%] text-black bg-white"
-            >
-              <%= t('.no_resources_found', resources: resource_plural_name) %>
-            </td>
-          </tr>
-        <% end %>
-      </tbody>
-
-      <% if @prev_page_link || @next_page_link %>
-        <tfoot>
-          <tr>
-            <td colspan="<%= @columns.size %>" class="py-4 bg-white">
-              <div class="flex justify-center">
-                <%= render component('ui/table/pagination').new(
-                  prev_link: @prev_page_link,
-                  next_link: @next_page_link
-                ) %>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
+      <% if @data.rows.empty? && @data.plural_name %>
+        <tr>
+          <td
+            colspan="<%= @data.columns.size %>"
+            class="text-center py-4 text-3.5 line-[150%] text-black bg-white rounded-b-lg"
+          >
+            <%= t('.no_resources_found', resources: @data.plural_name) %>
+          </td>
+        </tr>
       <% end %>
+    </tbody>
 
-    </table>
-  <% end %>
+    <% if @data.prev || @data.next %>
+      <tfoot>
+        <tr>
+          <td colspan="<%= @data.columns.size %>" class="py-4 bg-white rounded-b-lg border-t border-gray-100">
+            <div class="flex justify-center">
+              <%= render component('ui/table/pagination').new(
+                prev_link: @data.prev,
+                next_link: @data.next
+              ) %>
+            </div>
+          </td>
+        </tr>
+      </tfoot>
+    <% end %>
+
+  </table>
 </div>

data/app/components/solidus_admin/ui/table/component.js

@@ -13,12 +13,14 @@ export default class extends Controller {
     "filterToolbar",
     "defaultHeader",
     "batchHeader",
+    "tableBody",
     "selectedRowsCount",
   ]
 
   static classes = ["selectedRow"]
   static values = {
     mode: { type: String, default: "scopes" },
+    sortable: { type: Boolean, default: false },
   }
 
   initialize() {
@@ -29,16 +31,22 @@ export default class extends Controller {
     this.search = debounce(this.search.bind(this), 200)
   }
 
-  connect() {
-    if (this.searchFieldTarget.value !== "") this.modeValue = "search"
+  // Determine if sortable should be enabled
+  modeValueChanged() {
+    const shouldSetSortable = this.sortableValue && this.modeValue !== "batch" && this.modeValue !== "search"
 
-    this.render()
+    if (shouldSetSortable) {
+      this.tableBodyTarget.setAttribute('data-controller', 'sortable')
+    } else {
+      this.tableBodyTarget.removeAttribute('data-controller')
+    }
   }
 
-  showSearch(event) {
+  showSearch({ detail: { avoidFocus } }) {
     this.modeValue = "search"
     this.render()
-    this.searchFieldTarget.focus()
+
+    if (!avoidFocus) this.searchFieldTarget.focus()
   }
 
   search() {
@@ -50,32 +58,38 @@ export default class extends Controller {
     this.search()
   }
 
-  cancelSearch() {
-    this.clearSearch()
+  resetSearchAndFilters() {
+    if (this.hasFilterToolbarTarget) {
+      this.filterToolbarTarget.querySelectorAll('fieldset').forEach(fieldset => fieldset.disabled = true)
+    }
 
-    this.modeValue = "scopes"
-    this.render()
+    this.searchFieldTarget.disabled = true
+    this.searchFormTarget.submit()
   }
 
   selectRow(event) {
     if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
       this.modeValue = "batch"
-    } else if (this.searchFieldTarget.value !== '') {
+    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
       this.modeValue = "search"
-    } else {
+    } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
+    } else {
+      this.modeValue = "search"
     }
 
     this.render()
   }
 
   selectAllRows(event) {
-    if (this.modeValue = event.target.checked) {
+    if (event.target.checked) {
       this.modeValue = "batch"
-    } else if (this.searchFieldTarget.value !== '') {
+    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
       this.modeValue = "search"
-    } else {
+    } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
+    } else {
+      this.modeValue = "search"
     }
 
     this.checkboxTargets.forEach((checkbox) => (checkbox.checked = event.target.checked))
@@ -83,10 +97,32 @@ export default class extends Controller {
     this.render()
   }
 
+  rowClicked(event) {
+    // If the user clicked on a link, button, input or summary, skip the row url visit
+    if (event.target.closest("td").contains(event.target.closest("a,select,textarea,button,input,summary"))) return
+
+    if (this.modeValue === "batch") {
+      this.toggleCheckbox(event.currentTarget)
+    } else {
+      window.Turbo.visit(event.params.url)
+    }
+  }
+
+  toggleCheckbox(row) {
+    const checkbox = this.checkboxTargets.find(selection => row.contains(selection))
+
+    if (checkbox) {
+      checkbox.checked = !checkbox.checked
+      this.selectRow()
+    }
+  }
+
   render() {
     const selectedRows = this.checkboxTargets.filter((checkbox) => checkbox.checked)
 
-    this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
+    if (this.hasSearchFieldTarget) {
+      this.searchToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
+    }
 
     if (this.hasFilterToolbarTarget) {
       this.filterToolbarTarget.toggleAttribute("hidden", this.modeValue !== "search")
@@ -96,7 +132,9 @@ export default class extends Controller {
     this.batchHeaderTarget.toggleAttribute("hidden", this.modeValue !== "batch")
     this.defaultHeaderTarget.toggleAttribute("hidden", this.modeValue === "batch")
 
-    this.scopesToolbarTarget.toggleAttribute("hidden", this.modeValue !== "scopes")
+    if (this.hasScopesToolbarTarget) {
+      this.scopesToolbarTarget.toggleAttribute("hidden", this.modeValue !== "scopes")
+    }
 
     // Update the rows background color
     this.checkboxTargets.filter((checkbox) =>
@@ -111,7 +149,8 @@ export default class extends Controller {
       checkbox.indeterminate = false
       checkbox.checked = false
 
-      if (selectedRows.length === this.checkboxTargets.length) checkbox.checked = true
+      if (this.checkboxTargets.length > 0 && selectedRows.length === this.checkboxTargets.length)
+        checkbox.checked = true
       else if (selectedRows.length > 0) checkbox.indeterminate = true
     })
   }

data/app/components/solidus_admin/ui/table/component.rb

@@ -1,62 +1,67 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
-  # @param id [String] A unique identifier for the table component.
-  # @param model_class [ActiveModel::Translation] The model class used for translations.
-  # @param rows [Array] The collection of objects that will be passed to columns for display.
-  # @param fade_row_proc [Proc, nil] A proc determining if a row should have a faded appearance.
-  # @param search_key [Symbol] The key for searching.
-  # @param search_url [String] The base URL for searching.
-  #
-  # @param columns [Array<Hash>] The array of column definitions.
-  # @option columns [Symbol|Proc|#to_s] :header The column header.
-  # @option columns [Symbol|Proc|#to_s] :data The data accessor for the column.
-  # @option columns [String] :class_name (optional) The class name for the column.
-  #
-  # @param batch_actions [Array<Hash>] The array of batch action definitions.
-  # @option batch_actions [String] :display_name The batch action display name.
-  # @option batch_actions [String] :icon The batch action icon.
-  # @option batch_actions [String] :action The batch action path.
-  # @option batch_actions [String] :method The batch action HTTP method for the provided path.
-  #
-  #
-  # @param filters [Array<Hash>] The array of filter definitions.
-  # @option filters [String] :name The filter's name.
-  # @option filters [Any] :value The filter's value.
-  # @option filters [String] :label The filter's label.
-  #
-  # @param prev_page_link [String, nil] The link to the previous page.
-  # @param next_page_link [String, nil] The link to the next page.
-  def initialize(
-    id:,
-    model_class:,
-    rows:,
-    search_key:,
-    search_url:,
-    fade_row_proc: nil,
-    columns: [],
-    batch_actions: [],
-    filters: [],
-    prev_page_link: nil,
-    next_page_link: nil
-  )
-    @columns = columns.map { Column.new(**_1) }
-    @batch_actions = batch_actions.map { BatchAction.new(**_1) }
-    @filters = filters.map { Filter.new(**_1) }
-    @id = id
-    @model_class = model_class
-    @rows = rows
-    @fade_row_proc = fade_row_proc
-    @search_key = search_key
-    @search_url = search_url
-    @prev_page_link = prev_page_link
-    @next_page_link = next_page_link
-
-    @columns.unshift selectable_column if batch_actions.present?
+  BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
+  Column = Struct.new(:header, :data, :col, :wrap, keyword_init: true)
+  Filter = Struct.new(:presentation, :combinator, :attribute, :predicate, :options, keyword_init: true)
+  Scope = Struct.new(:name, :label, :default, keyword_init: true)
+  Sortable = Struct.new(:url, :param, :animation, :handle, keyword_init: true)
+  private_constant :BatchAction, :Column, :Filter, :Scope, :Sortable
+
+  class Data < Struct.new(:rows, :class, :url, :prev, :next, :columns, :fade, :batch_actions, keyword_init: true) # rubocop:disable Lint/StructNewOverride,Style/StructInheritance
+    def initialize(**args)
+      super
+
+      self.columns = columns.map do |column|
+        column.is_a?(Symbol) ? Column.new(wrap: false, header: column, data: column) : Column.new(wrap: false, **column)
+      end
+      self.batch_actions = batch_actions.to_a.map { |action| BatchAction.new(**action) }
+    end
+
+    def plural_name
+      self[:class].model_name.human.pluralize if self[:class]
+    end
   end
 
-  def resource_plural_name
-    @model_class.model_name.human.pluralize
+  class Search < Struct.new(:name, :value, :url, :searchbar_key, :scopes, :filters, keyword_init: true) # rubocop:disable Style/StructInheritance
+    def initialize(**args)
+      super
+
+      self.filters = filters.to_a.map { |filter| Filter.new(**filter) }
+      self.scopes = scopes.to_a.map { |scope| Scope.new(**scope) }
+    end
+
+    def current_scope
+      scopes.find { |scope| scope.name.to_s == value[:scope].presence } || default_scope
+    end
+
+    def default_scope
+      scopes.find(&:default)
+    end
+
+    def on_default_scope?
+      current_scope == default_scope
+    end
+
+    def scope_param_name
+      "#{name}[scope]"
+    end
+
+    def searchbar_param_name
+      "#{name}[#{searchbar_key}]"
+    end
+
+    def value
+      super || {}
+    end
+  end
+
+  def initialize(id:, data:, search: nil, sortable: nil)
+    @id = id
+    @data = Data.new(**data)
+    @data.columns.unshift selectable_column if @data.batch_actions.present?
+    @search = Search.new(**search) if search
+    @sortable = Sortable.new(**sortable) if sortable
   end
 
   def selectable_column
@@ -79,7 +84,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
           "aria-label": t('.select_row'),
         )
       },
-      class_name: 'w-[52px]',
+      col: { class: 'w-[52px]' },
     )
   end
 
@@ -87,10 +92,6 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
     @batch_actions_form_id ||= "#{stimulus_id}--batch-actions-#{@id}"
   end
 
-  def table_frame_id
-    @table_frame_id ||= "#{stimulus_id}--table-frame-#{@id}"
-  end
-
   def search_form_id
     @search_form_id ||= "#{stimulus_id}--search-form-#{@id}"
   end
@@ -112,9 +113,22 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
     )
   end
 
+  def render_ransack_filter_dropdown(filter, index)
+    render component("ui/table/ransack_filter").new(
+      presentation: filter.presentation,
+      search_param: @search.name,
+      combinator: filter.combinator,
+      attribute: filter.attribute,
+      predicate: filter.predicate,
+      options: filter.options,
+      form: search_form_id,
+      index: index,
+    )
+  end
+
   def render_header_cell(cell, **attrs)
     cell = cell.call if cell.respond_to?(:call)
-    cell = @model_class.human_attribute_name(cell) if cell.is_a?(Symbol)
+    cell = @data[:class].human_attribute_name(cell) if cell.is_a?(Symbol)
     cell = cell.render_in(self) if cell.respond_to?(:render_in)
 
     content_tag(:th, cell, class: %{
@@ -128,23 +142,33 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
     }, **attrs)
   end
 
-  def render_data_cell(cell, data)
+  def render_data_cell(column, data)
+    cell = column.data
     cell = cell.call(data) if cell.respond_to?(:call)
     cell = data.public_send(cell) if cell.is_a?(Symbol)
     cell = cell.render_in(self) if cell.respond_to?(:render_in)
+    cell = tag.div(cell, class: "flex items-center gap-1.5 justify-start overflow-x-hidden") if column.wrap
 
-    content_tag(:td, content_tag(:div, cell, class: "flex items-center gap-1.5"), class: "py-2 px-4 h-10 vertical-align-middle leading-none")
+    tag.td(cell, class: "
+      py-2 px-4 h-10 vertical-align-middle leading-none
+      [tr:last-child_&:first-child]:rounded-bl-lg [tr:last-child_&:last-child]:rounded-br-lg
+    ")
   end
 
-  def row_class_for(row)
-    classes = ['border-b', 'border-gray-100']
-    classes << ['bg-gray-15', 'text-gray-700'] if @fade_row_proc&.call(row)
+  def current_scope_name
+    @search.current_scope.name
+  end
 
-    classes.join(' ')
+  def initial_mode
+    @initial_mode ||=
+      if @search && (@search.value[@search.searchbar_key] || @search.scopes.none?)
+        "search"
+      else
+        "scopes"
+      end
   end
 
-  Column = Struct.new(:header, :data, :class_name, keyword_init: true)
-  BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
-  Filter = Struct.new(:name, :value, :label, keyword_init: true)
-  private_constant :Column, :BatchAction, :Filter
+  def should_enable_sortable?
+    @sortable && @search&.on_default_scope?
+  end
 end