diff --git a/assets/js/app.js b/assets/js/app.js
index 22fdc5f63d..9110e16f93 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -185,7 +185,7 @@ class App {
 
         const searchQueryTerms = tokenizeString(searchElement.value);
 
-        const elementsToHighlight = document.querySelectorAll('table tbody td.searchable');
+        const elementsToHighlight = document.querySelectorAll('.entity-list-item-value.searchable');
         const highlighter = new Mark(elementsToHighlight);
         highlighter.mark(searchQueryTerms, { separateWordSearch: false });
     }
@@ -298,7 +298,7 @@ class App {
                 const selectedRowCheckboxes = document.querySelectorAll(
                     'input[type="checkbox"].form-batch-checkbox:checked'
                 );
-                const row = rowCheckbox.closest('tr');
+                const row = rowCheckbox.closest('.entity-list-item');
                 const content = rowCheckbox.closest('.content');
 
                 if (rowCheckbox.checked) {
@@ -476,12 +476,13 @@ class App {
     }
 
     #createDefaultRowAction() {
-        const clickableRows = document.querySelectorAll('tr.ea-clickable-row[data-default-action-url]');
+        const clickableRows = document.querySelectorAll('.entity-list-item.ea-clickable-row[data-default-action-url]');
         if (0 === clickableRows.length) {
             return;
         }
 
-        const clickTrigger = clickableRows[0].closest('table')?.getAttribute('data-default-action-trigger') || 'single';
+        const clickTrigger =
+            clickableRows[0].closest('.entity-list')?.getAttribute('data-default-action-trigger') || 'single';
 
         const interactiveSelectors = [
             'a',
diff --git a/assets/js/field-boolean.js b/assets/js/field-boolean.js
index 8ba279a992..92c5cd919a 100644
--- a/assets/js/field-boolean.js
+++ b/assets/js/field-boolean.js
@@ -2,9 +2,11 @@ document.addEventListener('DOMContentLoaded', () => {
     // toggle switches are only created in index page (i.e. in datagrid tables) because
     // in other pages they act like simple checkboxes or labels. Only in index page
     // the toggle switch can change the value of an entity propert via Ajax requests
-    document.querySelectorAll('td.field-boolean .form-switch input[type="checkbox"]').forEach((toggleField) => {
-        new ToggleSwitch(toggleField);
-    });
+    document
+        .querySelectorAll('.entity-list-item-data.field-boolean .form-switch input[type="checkbox"]')
+        .forEach((toggleField) => {
+            new ToggleSwitch(toggleField);
+        });
 });
 
 class ToggleSwitch {
diff --git a/templates/crud/index.html.twig b/templates/crud/index.html.twig
index 5b9fba24fc..fe0e5cc562 100644
--- a/templates/crud/index.html.twig
+++ b/templates/crud/index.html.twig
@@ -96,7 +96,8 @@
     {% set has_filters = filters|length > 0 %}
     {% set num_results = entities|length %}
 
-    <table class="table datagrid {{ entities is empty ? 'datagrid-empty' }}" data-default-action-trigger="{{ ea.crud.defaultRowActionTrigger }}">
+    {% block entity_list %}
+    <table class="entity-list table datagrid {{ entities is empty ? 'datagrid-empty' }}" data-default-action-trigger="{{ ea.crud.defaultRowActionTrigger }}">
         {% if num_results > 0 %}
             <thead>
             {% block table_head %}
@@ -143,7 +144,7 @@
             {% for entity in entities %}
                 {% block table_body_row %}
                 {% if entity.isAccessible %}
-                    <tr data-id="{{ entity.primaryKeyValueAsString }}" {% if entity.defaultActionUrl %}data-default-action-url="{{ entity.defaultActionUrl }}" class="ea-clickable-row" role="link" tabindex="0"{% endif %} {% block entity_row_attributes %}{% endblock %}>
+                    <tr data-id="{{ entity.primaryKeyValueAsString }}" {% if entity.defaultActionUrl %}data-default-action-url="{{ entity.defaultActionUrl }}" class="entity-list-item ea-clickable-row" role="link" tabindex="0"{% endif %} {% block entity_row_attributes %}{% endblock %}>
                         {% if has_batch_actions %}
                             <td class="batch-actions-selector">
                                 <div class="form-check">
@@ -155,7 +156,7 @@
                         {% for field in entity.fields %}
                             {% set is_searchable = null == ea.crud.searchFields or field.property in ea.crud.searchFields %}
 
-                            <td data-column="{{ field.property }}" data-label="{{ field.label|trans|e('html') }}" class="{{ is_searchable ? 'searchable' }} {{ field.property == sort_field_name ? 'sorted' }} text-{{ field.textAlign }} {{ field.cssClass }}" dir="{{ ea.i18n.textDirection }}" {% for name, value in field.htmlAttributes %}{{ name }}="{{ value|e('html_attr') }}" {% endfor %}>
+                            <td data-column="{{ field.property }}" data-label="{{ field.label|trans|e('html') }}" class="entity-list-item-value {{ is_searchable ? 'searchable' }} {{ field.property == sort_field_name ? 'sorted' }} text-{{ field.textAlign }} {{ field.cssClass }}" dir="{{ ea.i18n.textDirection }}" {% for name, value in field.htmlAttributes %}{{ name }}="{{ value|e('html_attr') }}" {% endfor %}>
                                 {{ include(field.templatePath, {field: field, entity: entity}, with_context: false) }}
                             </td>
                         {% endfor %}
@@ -245,6 +246,7 @@
         {% endblock table_footer %}
         </tfoot>
     </table>
+    {% endblock entity_list %}
 
     {% if entities|length > 0 %}
         <div class="content-panel-footer without-padding without-border">