mensa 0.3.2 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56a69b51d2f62c342f16b42fc0c0d77fc69101e493486eafea8c89cc358bfd9a
-  data.tar.gz: 072b02f3d2ebff3ebcd310643b7be1ccb199024771bdb346fd92be4faa9b6ab0
+  metadata.gz: 194b34ee31bebddc3962cc66e5c789e5369f828eb6087f67f72b54aba97f65d8
+  data.tar.gz: 1ead92c4d986f5e69c3d5745fcee27541f8205bf0106bd25f757b7603cdc117f
 SHA512:
-  metadata.gz: 4a32e5e1ed6b6a195d8ad4913d6497082e7ac72721bd18410b3135ad502eeef74ae7cf0e91bee2dcc0fae41f3be85018e181bad3f16382d5d2b6bf8698fda70a
-  data.tar.gz: a6e26eeecd788492da78499a985fc107697bc7916d6562708aa32b3c58a1c681ed2478ee91070db5df5372628d5f1c77d27a0b482a1f9076187b8e4e66e5431d
+  metadata.gz: f5c078859d1c6214b8b65ab36fd077a2c36e2f5b50a69efd0dc20621d6373977be10ed543bc68add8b81338b4322903c3c305a15a0bd47c8ea906d77953c2a9d
+  data.tar.gz: 6e68ccdd3ffea1ef460876f61a9d624a8d7de198addad7c712bfac67eac1cc08fbe0874221ba76f241ce5d47c8dec0b09c7950f058865ee232ca540868bea95d

data/Gemfile

@@ -10,7 +10,7 @@ gem "sprockets-rails"
 gem "pry"
 gem "capybara", "~> 3.40"
 gem "selenium-webdriver", "~> 4.17"
-gem "slim", "~> 5.2"
+
 gem "debug"
 gem "overmind", require: false
 gem "rack-mini-profiler"

data/Gemfile.lock

@@ -1,14 +1,13 @@
 PATH
   remote: .
   specs:
-    mensa (0.3.1)
+    mensa (0.3.3)
       csv
       importmap-rails
       pagy (>= 43)
       pg (>= 1.6)
       rails (>= 7.1)
       rubyzip (>= 1.2.2)
-      slim
       stimulus-rails
       tailwindcss-rails (~> 3.3)
       textacular (>= 5)
@@ -153,7 +152,7 @@ GEM
     minitest (6.0.6)
       drb (~> 2.0)
       prism (~> 1.5)
-    net-imap (0.6.4)
+    net-imap (0.6.4.1)
       date
       net-protocol
     net-pop (0.1.2)
@@ -184,7 +183,7 @@ GEM
     overmind (2.5.1-arm-linux)
     overmind (2.5.1-arm64-darwin)
     overmind (2.5.1-x86_64-darwin)
-    pagy (43.5.5)
+    pagy (43.5.6)
       json
       uri
       yaml
@@ -307,9 +306,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 4.0)
       websocket (~> 1.0)
-    slim (5.2.1)
-      temple (~> 0.10.0)
-      tilt (>= 2.1.0)
     sprockets (4.2.2)
       concurrent-ruby (~> 1.0)
       logger
@@ -318,14 +314,6 @@ GEM
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
-    sqlite3 (2.9.4-aarch64-linux-gnu)
-    sqlite3 (2.9.4-aarch64-linux-musl)
-    sqlite3 (2.9.4-arm-linux-gnu)
-    sqlite3 (2.9.4-arm-linux-musl)
-    sqlite3 (2.9.4-arm64-darwin)
-    sqlite3 (2.9.4-x86_64-darwin)
-    sqlite3 (2.9.4-x86_64-linux-gnu)
-    sqlite3 (2.9.4-x86_64-linux-musl)
     standard (1.54.0)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.0)
@@ -349,11 +337,9 @@ GEM
     tailwindcss-ruby (3.4.19-arm64-darwin)
     tailwindcss-ruby (3.4.19-x86_64-darwin)
     tailwindcss-ruby (3.4.19-x86_64-linux)
-    temple (0.10.4)
     textacular (5.7.0)
       activerecord (>= 5.0)
     thor (1.5.0)
-    tilt (2.7.0)
     timeout (0.6.1)
     tsort (0.2.0)
     turbo-rails (2.0.23)
@@ -366,12 +352,12 @@ GEM
     unicode-emoji (4.2.0)
     uri (1.1.1)
     useragent (0.16.11)
-    view_component (3.24.0)
+    view_component (3.25.0)
       activesupport (>= 5.2.0, < 8.2)
       concurrent-ruby (~> 1)
       method_source (~> 1.0)
     websocket (1.2.11)
-    websocket-driver (0.8.0)
+    websocket-driver (0.8.1)
       base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -404,9 +390,7 @@ DEPENDENCIES
   ruby-lsp
   ruby-lsp-rails
   selenium-webdriver (~> 4.17)
-  slim (~> 5.2)
   sprockets-rails
-  sqlite3 (~> 2.8)
   standard
 
 BUNDLED WITH

data/README.md

@@ -1,6 +1,7 @@
 # Mensa
 
 Fast and awesome tables, with pagination, sorting, filtering, batch processing, column hiding, column ordering and custom views.
+Due to search, it only works with postgresql at the moment.
 
 ![table](./docs/table.png)
 ![filters](./docs/filters.png)
@@ -52,16 +53,7 @@ class UserTable < ApplicationTable
   order name: :desc
 
   column(:name) do
-    attribute :name # Optional, we can deduct this from the column name
-    sortable true
-    sanitize true
-    internal false
-    visible true
-    filter do
-      collection -> { }
-      scope -> { where(name: ...) }
-    end
-    operators [:is, :isnt] # Optional, mensa tries to deduce this from the column information
+    filter
   end
 
   column(:nr_of_roles) do
@@ -73,6 +65,8 @@ class UserTable < ApplicationTable
     title "Delete row"
     link { |user| user_path(user) }
     icon "fa-regular fa-trash"
+    # You could also give it a block, which takes the record as an argument, to choose icons dynamically
+    # icon { |product| product.inventory? ? "fal fa-shelves" : "fal fa-shelves-empty" }
     link_attributes data: {"turbo-confirm": "Are you sure you want to delete the user?", "turbo-method": :delete}
     show ->(user) { true }
   end
@@ -112,17 +106,14 @@ end
 
 You can show your tables on the page using the following:
 
-```slim
-  = table :users
+```erb
+<%= table :users %>
 ```
 
 #### Custom views
 
 Custom views are views not defined by the developer (SystemViews) but by the end-user by adding/removing filters.
-
-Initial support for custom-views is there, but pretty rudimentary:
-
-`Mensa::TableView.create(table: "users", name: "Guests", config: {filters: {role: {value: "guest"}}})`
+When you enable these, they are stored in the database and can be used across sessions, by the user who created them.
 
 ### Fast
 
@@ -140,42 +131,27 @@ end
 ### Coding
 
 - Checkout this repo
-- Setup your direnv, add the following to your `.envrc`:
+- Setup your direnv, add the following to your `mise.toml`:
 
   ```
-  export BUNDLE_RUBYGEMS__PKG__GITHUB__COM=ghp_xxxxxxw
-  export RBENV_VERSION=$(cat .ruby-version)
+  [tools]
+  node = "24"
+  ruby = "3.4.7"
+  
+  [env]
+  RUBY_VERSION="3.4.7"
   ```
 
 - Run `direnv allow`
-
-If you use devcontainers:
-- Open with Visual Studio Code (or with any other editor) and reopen in container.
-- Run `bin/overmind s`
-
-If you're not using devcontainers:
-- Run `bin/overmind s`
+- Run `overmind s`
 
 ### Docs
 
 Using the following in your view will render Mensa::Table::Component
-```slim
-  = table :users
+```erb
+<%= table :users %>
 ```
 
-The Mensa::Table::Component will render:
-- Mensa::Search::Component
-- Mensa::FilterPillList::Component
-  - Mensa::FilterPill::Component
-  - Mensa::AddFilter::Component
-- Mensa::Views::Component
-  - renders a views list
-  - Mensa::ControlBar::Component
-    - search icon
-    - filter icon
-    - export icon
-- turbo-frame with the actual table you see  (which is rendered by Mensa::View::Component)
-
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -199,7 +175,14 @@ $ gem install mensa
 Always use `bundle` to install the gem. Next use the install generator to install migrations, add an initializer and do other setup:
 
 ```bash
-$  bin/rails g mensa:install
+$ rails g mensa:install
+$ rails mensa:install:migrations
+```
+
+Next you can run the generator to generate a table:
+
+```bash
+$ rails g mensa:table:generate <model_name>
 ```
 
 ### Exports

data/app/components/mensa/add_filter/component.html.erb

@@ -0,0 +1,31 @@
+<div class="mensa-table__add_filter"
+     data-controller="mensa-add-filter"
+     data-mensa-add-filter-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= table.table_id %>"
+     data-mensa-add-filter-operator-labels-value="<%= operator_labels.to_json %>">
+  <button class="mensa-table__add_filter__trigger"
+          type="button"
+          title="<%= t("mensa.add_filter.add", default: "Add filter") %>"
+          data-action="mensa-add-filter#openAllColumns">
+    <i class="fa-solid fa-circle-plus"></i>
+  </button>
+
+  <ul class="hidden fixed z-50 max-h-96 overflow-auto rounded-lg bg-white p-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 sm:text-sm"
+      data-mensa-add-filter-target="filterList">
+    <% table.columns.select(&:filter?).each do |column| %>
+      <li class="text-gray-900 hover:bg-gray-100 relative flex cursor-default select-none items-center gap-2 rounded-md px-3 py-2 dark:text-gray-300 dark:hover:bg-gray-700"
+          data-mensa-add-filter-target="filterListItem"
+          data-action="click->mensa-add-filter#selectColumn mouseenter->mensa-add-filter#columnItemHovered"
+          data-filter-column-name="<%= column.name %>">
+        <div class="label block flex-1 truncate font-normal"><%= column.human_name %></div>
+        <div class="check hidden flex items-center text-primary-600">
+          <div class="fal fa-check"></div>
+        </div>
+        <span class="mensa-table__add_filter__enter-hint">↵ Enter</span>
+      </li>
+    <% end %>
+  </ul>
+
+  <div class="hidden mensa-table__add_filter__popover_container"
+       data-mensa-add-filter-target="valuePopover"
+       id="mensa-filter-pill-value-<%= SecureRandom.base36 %>"></div>
+</div>

data/app/components/mensa/cell/component.html.erb

@@ -0,0 +1 @@
+<td><%= cell.render(:html) %></td>

data/app/components/mensa/column_customizer/component.html.erb

@@ -0,0 +1,31 @@
+<div class="relative"
+     data-controller="mensa-column-customizer"
+     data-mensa-column-customizer-table-name-value="<%= table.name %>"
+     data-mensa-column-customizer-turbo-frame-id-value="<%= table.table_id %>"
+     data-mensa-column-customizer-mensa-table-outlet="#table-<%= table.table_id %>">
+  <button class="mensa-table__control_bar__button" type="button" data-action="click->mensa-column-customizer#toggle">
+    <i class="<%= Mensa.config.icons[:control_bar_edit] %>"></i>
+  </button>
+  <div class="mensa-table__column_customizer__popover hidden" data-mensa-column-customizer-target="popover">
+    <p class="mensa-table__column_customizer__heading">Columns</p>
+    <ul>
+      <% table.columns.reject(&:internal?).each do |column| %>
+        <li class="mensa-table__column_customizer__row"
+            data-mensa-column-customizer-target="columnRow"
+            data-column-name="<%= column.name %>"
+            data-visible="<%= column.visible?.to_s %>"
+            draggable="true"
+            data-action="dragstart->mensa-column-customizer#dragStart dragover->mensa-column-customizer#dragOver drop->mensa-column-customizer#drop dragend->mensa-column-customizer#dragEnd">
+          <i class="mensa-table__column_customizer__handle fa-solid fa-grip-vertical"></i>
+          <span class="mensa-table__column_customizer__name<%= !column.visible? ? " mensa-table__column_customizer__name--hidden" : "" %>">
+            <%= column.human_name %>
+          </span>
+          <button class="mensa-table__column_customizer__visibility" type="button" data-action="click->mensa-column-customizer#toggleVisibility">
+            <i class="fa-solid fa-eye"></i>
+            <i class="fa-solid fa-eye-slash"></i>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/components/mensa/control_bar/component.html.erb

@@ -0,0 +1,56 @@
+<div class="mensa-table__control_bar" data-mensa-table-target="controlBar">
+  <div class="flex items-center gap-1 py-0">
+    <% if view_columns_ordering? %>
+      <%= render Mensa::ColumnCustomizer::Component.new(table: table) %>
+    <% end %>
+
+    <div class="mensa-table__save-reset hidden" data-mensa-table-target="saveResetButtons">
+      <button class="mensa-table__control_bar__button" type="button" title="<%= t(".reset", default: "Reset") %>" data-action="mensa-table#cancelFiltersAndSearch">
+        <i class="fa-solid fa-rotate-left"></i>
+      </button>
+      <% if table.current_user && table.supports_custom_views? %>
+        <div class="relative">
+          <button class="mensa-table__control_bar__button hidden" type="button" data-mensa-table-target="saveSimple" data-action="mensa-table#saveAsNewView">
+            <%= t(".save", default: "Save") %>
+          </button>
+          <button class="mensa-table__control_bar__button hidden" type="button" data-mensa-table-target="saveSplit" data-action="mensa-table#toggleSaveDropdown">
+            <%= t(".save", default: "Save") %>
+            <i class="fa-solid fa-chevron-down text-xs"></i>
+          </button>
+          <ul class="mensa-table__control_bar__save-dropdown hidden" data-mensa-table-target="saveDropdown">
+            <li>
+              <button class="mensa-table__control_bar__save-dropdown-item" type="button" data-action="mensa-table#updateCurrentViewAction">
+                <%= t(".update_view", default: "Update view") %>
+              </button>
+            </li>
+            <li>
+              <button class="mensa-table__control_bar__save-dropdown-item" type="button" data-action="mensa-table#saveAsNewView">
+                <%= t(".save_as_new_view", default: "Save as new view") %>
+              </button>
+            </li>
+          </ul>
+        </div>
+      <% else %>
+        <button class="mensa-table__control_bar__button" type="button" data-action="mensa-table#saveAsNewView">
+          <%= t(".save", default: "Save") %>
+        </button>
+      <% end %>
+    </div>
+
+    <button class="mensa-table__control_bar__button hidden" type="button" data-mensa-table-target="eyeButton" data-action="click->mensa-table#toggleViewFilters">
+      <i class="fa-solid fa-eye"></i>
+    </button>
+
+    <% if table.exportable? %>
+      <button class="mensa-table__control_bar__button relative" type="button" data-action="mensa-table#export">
+        <i data-mensa-table-target="exportIcon" class="<%= Mensa.config.icons[:control_bar_export] %>"></i>
+        <%= helpers.render partial: "mensa/exports/badge", locals: {table_name: table.name, user: table.current_user} %>
+      </button>
+    <% end %>
+  </div>
+
+  <% if table.exportable? %>
+    <%= helpers.turbo_stream_from Mensa::Export.stream_name(table.name, table.current_user) %>
+    <%= helpers.render partial: "mensa/exports/dialog", locals: {table: table} %>
+  <% end %>
+</div>

data/app/components/mensa/empty_state/component.html.erb

@@ -0,0 +1,10 @@
+<div class="mensa-empty-state">
+  <div class="mensa-empty-state__icon">
+    <i class="<%= Mensa.config.icons[:search] %>"></i>
+  </div>
+  <h3 class="mensa-empty-state__title"><%= t("mensa.empty_state.title", model: model_name_plural) %></h3>
+  <p class="mensa-empty-state__subtitle"><%= t("mensa.empty_state.subtitle") %></p>
+  <button class="mensa-empty-state__button" type="button" data-action="click->mensa-table#cancelFiltersAndSearch">
+    <%= t("mensa.empty_state.clear_button") %>
+  </button>
+</div>

data/app/components/mensa/filter_pill/component.html.erb

@@ -0,0 +1,20 @@
+<% formatted_value = filter.value.is_a?(Array) ? filter.value.join(", ") : filter.value %>
+<div class="mensa-filter-pill"
+     data-controller="mensa-filter-pill"
+     data-mensa-filter-pill-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= filter.table.table_id %>"
+     data-mensa-filter-pill-column-name-value="<%= filter.column.name %>"
+     data-mensa-filter-pill-value-value="<%= filter.operator_with_value? ? (filter.value.is_a?(Array) ? filter.value.to_json : filter.value) : nil %>"
+     data-mensa-filter-pill-operator-value="<%= filter.operator %>"
+     data-mensa-filter-pill-operator-without-value-value="<%= "true" unless filter.operator_with_value? %>"
+     data-view-filter="<%= "true" if view_filter? %>">
+  <button class="mensa-filter-pill__chip" type="button" data-action="click->mensa-filter-pill#edit">
+    <span class="mensa-filter-pill__column"><%= filter.column.human_name %></span>
+    <span class="mensa-filter-pill__operator"><%= filter.operator_label %></span>
+    <% if formatted_value.present? && filter.operator_with_value? %>
+      <span class="mensa-filter-pill__value"><%= formatted_value %></span>
+    <% end %>
+  </button>
+  <button class="mensa-filter-pill__remove" type="button" title="Remove filter" data-action="click->mensa-filter-pill#remove">
+    <i class="fa-solid fa-xmark"></i>
+  </button>
+</div>

data/app/components/mensa/filter_pill_list/component.html.erb

@@ -0,0 +1,30 @@
+<% has_filterable_columns = table.columns.any?(&:filter?) %>
+<div class="mensa-table__search-bar"
+     id="mensa-filter-pill-list-<%= table.table_id %>"
+     data-controller="mensa-filter-pill-list"
+     data-mensa-table-target="filterList"
+     data-mensa-filter-pill-list-table-name-value="<%= table.name %>"
+     data-mensa-filter-pill-list-mensa-table-outlet=".mensa-table#table-<%= table.table_id %>"
+     data-mensa-filter-pill-list-mensa-filter-pill-outlet=".mensa-filter-pill"
+     data-mensa-filter-pill-list-mensa-add-filter-outlet="[data-controller=mensa-add-filter]">
+  <div class="mensa-table__search-bar__pills-area">
+    <%= render Mensa::FilterPill::Component.with_collection(table.active_filters) %>
+    <% if has_filterable_columns %>
+      <%= render Mensa::AddFilter::Component.new(table: table) %>
+    <% end %>
+    <div class="mensa-table__search-bar__input-wrapper">
+      <input class="mensa-table__search-bar__input"
+             type="text"
+             name="search_query"
+             autocomplete="off"
+             placeholder="<%= t(has_filterable_columns ? ".search" : ".search_only") %>"
+             data-mensa-filter-pill-list-target="searchInput"
+             data-action="input->mensa-filter-pill-list#monitorSearch keydown.enter->mensa-filter-pill-list#search keydown.esc->mensa-filter-pill-list#resetSearch focus->mensa-filter-pill-list#searchFocused keydown.down->mensa-filter-pill-list#navigateDown keydown.up->mensa-filter-pill-list#navigateUp"
+             value="<%= params[:query] %>">
+      <i class="mensa-table__search-bar__search-icon <%= Mensa.config.icons[:search] %>"></i>
+    </div>
+  </div>
+  <button class="mensa-table__search-bar__clear hidden" type="button" data-mensa-filter-pill-list-target="resetSearchButton" data-action="mensa-filter-pill-list#resetSearch">
+    <i class="fas fa-xmark"></i>
+  </button>
+</div>

data/app/components/mensa/header/component.html.erb

@@ -0,0 +1,12 @@
+<th>
+  <% if column.sortable? %>
+    <%= link_to table.path(order: {column.name => column.next_sort_direction}, turbo_frame_id: table.table_id), "data-turbo-frame": "_self", class: "order cursor-pointer" do %>
+      <span><%= column.human_name %></span>
+      <i class="<%= Mensa.config.icons["order_indicator#{column.sort_direction.to_s.present? ? "_#{column.sort_direction}" : ""}".to_sym] %>"></i>
+    <% end %>
+  <% else %>
+    <div class="container">
+      <div class="title"><%= column.human_name %></div>
+    </div>
+  <% end %>
+</th>

data/app/components/mensa/row_action/component.html.erb

@@ -0,0 +1,10 @@
+<% if action.show.call(row.record) %>
+  <%= link_to(action.link ? table.original_view_context.instance_exec(row.record, &action.link) : "", {class: "action", title: action.title}.merge(action.link_attributes || {})) do %>
+
+    <% if icon = action.icon(row.record) %>
+      <i class="fa <%= icon %>"></i>
+    <% else %>
+      <%= name %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/mensa/search/component.html.erb

@@ -0,0 +1,26 @@
+<% if table.current_user %>
+  <dialog class="mensa-table__save-view-dialog" data-mensa-table-target="saveViewDialog" data-action="click->mensa-table#saveViewDialogBackdrop">
+    <form class="mensa-table__save-view-dialog__form" data-action="submit->mensa-table#confirmSaveView">
+      <header class="mensa-table__save-view-dialog__header">
+        <h2 class="mensa-table__save-view-dialog__title"><%= t(".save_view_title", default: "Save view") %></h2>
+        <p class="mensa-table__save-view-dialog__subtitle"><%= t(".save_view_subtitle", default: "Save the current filters, ordering and search as a reusable view.") %></p>
+      </header>
+      <label class="mensa-table__save-view-dialog__field">
+        <span class="mensa-table__save-view-dialog__label"><%= t(".view_name", default: "Name") %></span>
+        <input class="mensa-table__save-view-dialog__input" type="text" required placeholder="<%= t(".view_name_placeholder", default: "e.g. Active customers") %>" data-mensa-table-target="saveViewName">
+      </label>
+      <label class="mensa-table__save-view-dialog__field">
+        <span class="mensa-table__save-view-dialog__label"><%= t(".view_description", default: "Description") %></span>
+        <textarea class="mensa-table__save-view-dialog__textarea" rows="3" placeholder="<%= t(".view_description_placeholder", default: "Optional notes about this view") %>" data-mensa-table-target="saveViewDescription"></textarea>
+      </label>
+      <div class="mensa-table__save-view-dialog__actions">
+        <button class="mensa-table__save-view-dialog__button mensa-table__save-view-dialog__button--secondary" type="button" data-action="mensa-table#cancelSaveView">
+          <%= t(".cancel") %>
+        </button>
+        <button class="mensa-table__save-view-dialog__button mensa-table__save-view-dialog__button--primary" type="submit">
+          <%= t(".save") %>
+        </button>
+      </div>
+    </form>
+  </dialog>
+<% end %>

data/app/components/mensa/table/component.html.erb

@@ -0,0 +1,25 @@
+<div class="mensa-table"
+     id="table-<%= table.table_id %>"
+     data-mensa-table-supports-views-value="<%= table.supports_views? %>"
+     data-mensa-table-table-url-value="<%= helpers.mensa.table_url(table.name, {turbo_frame_id: table.table_id}.merge(params)) %>"
+     data-mensa-table-save-view-url-value="<%= helpers.mensa.table_views_path(table.name) %>"
+     data-mensa-table-views-url-value="<%= helpers.mensa.table_views_path(table.name) %>"
+     data-mensa-table-exports-url-value="<%= helpers.mensa.table_exports_path(table.name) %>"
+     data-controller="mensa-table"
+     data-mensa-table-mensa-filter-pill-outlet="[data-controller='mensa-filter-pill']"
+     data-mensa-table-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= table.table_id %>"
+     data-mensa-table-mensa-column-customizer-outlet="[data-controller='mensa-column-customizer']">
+  <div class="mensa-table__toolbar">
+    <div class="mensa-table__search-container">
+      <% if table.supports_views? && table.show_header? %>
+        <%= render Mensa::Views::Component.new(table: table) %>
+      <% end %>
+      <div class="flex min-w-0 flex-1" id="filters-<%= table.table_id %>">
+        <%= render Mensa::FilterPillList::Component.new(table: table) %>
+      </div>
+    </div>
+    <%= render Mensa::ControlBar::Component.new(table: table) %>
+  </div>
+  <%= render Mensa::Search::Component.new(table: table) %>
+  <turbo-frame id="<%= table.table_id %>" target="_top" data-mensa-table-target="turboFrame" data-turbo-permanent=""></turbo-frame>
+</div>

data/app/components/mensa/table_row/component.html.erb

@@ -0,0 +1,18 @@
+<%= content_tag :tr, **row.link_attributes do %>
+  <% if table.batch_actions? %>
+    <td class="mensa-table__checkbox-col" data-action="click->mensa-selection#stopPropagation">
+      <input class="mensa-table__select-all" type="checkbox" value="<%= row.record.id %>" data-action="change->mensa-selection#toggleRow" data-mensa-selection-target="rowCheckbox">
+    </td>
+  <% end %>
+  <% if table.actions? && Mensa.config.row_actions_position == :front %>
+    <td class="actions">
+      <%= render(Mensa::RowAction::Component.with_collection(table.actions, row: row, table: table)) %>
+    </td>
+  <% end %>
+  <%= render(Mensa::Cell::Component.with_collection(table.display_columns, row: row)) %>
+  <% if table.actions? && Mensa.config.row_actions_position == :back %>
+    <td class="actions">
+      <%= render(Mensa::RowAction::Component.with_collection(table.actions, row: row, table: table)) %>
+    </td>
+  <% end %>
+<% end %>

data/app/components/mensa/view/component.html.erb

@@ -0,0 +1,51 @@
+<div class="overflow-y-auto relative"
+     data-mensa-table-target="view"
+     data-controller="mensa-selection"
+     data-mensa-selection-batch-url-value="<%= table.batch_actions? ? helpers.mensa.table_batch_actions_path(table.name) : "" %>">
+  <% if table.batch_actions? %>
+    <div class="mensa-batch-bar hidden" data-mensa-selection-target="batchBar">
+      <div class="mensa-batch-bar__content">
+        <input class="mensa-table__select-all" type="checkbox" data-action="click->mensa-selection#deselectAll" data-mensa-selection-target="batchAllCheckbox">
+        <span class="mensa-batch-bar__count" data-mensa-selection-target="selectedCount"></span>
+        <% table.batch_actions.each do |batch_action| %>
+          <button class="mensa-batch-bar__button" type="button" data-action="click->mensa-selection#executeBatch" data-mensa-selection-batch-action-param="<%= batch_action.name %>">
+            <%= batch_action.title %>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+  <table class="w-full">
+    <% if table.show_header? %>
+      <thead>
+        <tr>
+          <% if table.batch_actions? %>
+            <th class="mensa-table__checkbox-col">
+              <div class="container">
+                <input class="mensa-table__select-all" type="checkbox" data-action="change->mensa-selection#toggleAll" data-mensa-selection-target="headerCheckbox">
+              </div>
+            </th>
+          <% end %>
+          <% if table.actions? && Mensa.config.row_actions_position == :front %>
+            <th>Actions</th>
+          <% end %>
+          <%= render(Mensa::Header::Component.with_collection(table.display_columns, table: table)) %>
+          <% if table.actions? && Mensa.config.row_actions_position == :back %>
+            <th>Actions</th>
+          <% end %>
+        </tr>
+      </thead>
+    <% end %>
+    <tbody>
+      <%= render(Mensa::TableRow::Component.with_collection(table.rows, table: table)) %>
+    </tbody>
+  </table>
+  <% if table.pagy_details&.count == 0 %>
+    <%= render Mensa::EmptyState::Component.new(table: table) %>
+  <% elsif table.pagy_details&.last > 1 %>
+    <div class="paging">
+      <span><%= t("mensa.paging.info", model: model_name_plural, from: table.pagy_details.from, to: table.pagy_details.to, count: table.pagy_details.count) %></span>
+      <%== table.pagy_details.series_nav(anchor_string: 'data-turbo-frame="_self"') %>
+    </div>
+  <% end %>
+</div>