Skip to content

Remove dependency on table tags #7581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mgielecinski wants to merge 4 commits into
base: 5.x
Choose a base branch
from
+15 −10
Open

Remove dependency on table tags #7581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
62b1406
change-html-tags-to-classes
mgielecinski Apr 27, 2026
c618626
fix biome
mgielecinski Apr 27, 2026
638282d
change td to class in selector
mgielecinski Apr 27, 2026
bfa70d9
fix biome
mgielecinski Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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',
Expand Down
8 changes: 5 additions & 3 deletions assets/js/field-boolean.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 5 additions & 3 deletions templates/crud/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down Expand Up @@ -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">
Expand All @@ -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 %}
Expand Down Expand Up @@ -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">
Expand Down
Loading