Improved #4094: In a Grid field, the handle and trash icons can now be placed as the first column instead of the last column. by Yulyaswan · Pull Request #4691 · ExpressionEngine/ExpressionEngine · GitHub
Skip to content

Improved #4094: In a Grid field, the handle and trash icons can now be placed as the first column instead of the last column. #4691

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

Closed
Yulyaswan wants to merge 5 commits into from
Closed

Improved #4094: In a Grid field, the handle and trash icons can now be placed as the first column instead of the last column. #4691

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd394ab
moved tool grid column to the begin of grid table
Yulyaswan Jan 24, 2025
d917e42
fixed test, added 1 extra column for no results tr
Yulyaswan Jan 28, 2025
0ba68a0
fixed test
Yulyaswan Jan 29, 2025
37cbaf8
Merge branch '7.dev' into future/7.x/move-grid-handle-colum-to-begin
Yulyaswan Nov 12, 2025
64073d2
Merge branch '7.dev' into future/7.x/move-grid-handle-colum-to-begin
Yulyaswan Mar 3, 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
16 changes: 13 additions & 3 deletions cp-styles/app/styles/components/_grid-field.scss
View file
Open in desktop
63 changes: 44 additions & 19 deletions system/ee/ExpressionEngine/View/_shared/table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,10 +257,16 @@ class="grid-field <?php if (isset($vertical_layout)) {
// Don't do reordering logic if the table is empty
$reorder = $reorder && ! empty($data);
$colspan = ($reorder_header || $reorder) ? count($columns) + 1 : count($columns);

if (!empty($data) && isset($vertical_layout)): ?>
<th class="grid-field__column-remove"></th>
<?php endif;

if(isset($row_counter) && $row_counter): ?>
<th class="row-counter-column"></th>
<?php
endif;

if (isset($vertical_layout)): ?>
<th class="hidden"></th>
<?php endif;
Expand Down Expand Up @@ -324,14 +330,14 @@ class="grid-field <?php if (isset($vertical_layout)) {
<?php endif ?>
<?php endforeach ?>

<?php if (!empty($data)): ?>
<?php if (!empty($data) && !isset($vertical_layout)): ?>
<th class="grid-field__column-remove"></th>
<?php endif ?>
<?php endif; ?>
</thead>
<?php endif ?>

<tbody>
<tr class="no-results<?php if (! empty($action_buttons) || ! empty($action_content)): ?> last<?php endif?> <?php if (!empty($data)): ?>hidden<?php endif?>"><td colspan="<?=(count($columns) + @intval($header_sorts))?>">
<tr class="no-results<?php if (! empty($action_buttons) || ! empty($action_content)): ?> last<?php endif?> <?php if (!empty($data)): ?>hidden<?php endif?>"><td colspan="<?=(count($columns) + 1 + @intval($header_sorts))?>">
<?php
// Output this if Grid input so we can dynamically show it via JS
?>
Expand Down Expand Up @@ -372,7 +378,28 @@ class="grid-field <?php if (isset($vertical_layout)) {
}

?>

<tr class="<?=$row_class?>" <?php foreach ($row['attrs'] as $key => $value):?> <?=$key?>="<?=$value?>"<?php endforeach; ?> <?=$dataRowCounter?>>

<?php if (isset($row_counter) && $row_counter): ?>
<td class="row-counter-column body-row-counter-column js-row-counter-column"><span><?=$rowCounterNumber?></span></td>
<?php endif; ?>

<?php if (isset($vertical_layout)): ?>
<td class="grid-field__column--tools">
<div class="grid-field__column-tools">
<?php if ($reorder): ?>
<button type="button" class="button button--small button--default cursor-move js-grid-reorder-handle">
<span class="grid-field__column-tool"><i class="fal fa-fw fa-arrows-alt"></i></span>
</button>
<?php endif ?>
<button type="button" rel="remove_row" class="button button--small button--default">
<span class="grid-field__column-tool danger-link" title="<?=lang('remove_row')?>"><i class="fal fa-fw fa-trash-alt"><span class="hidden"><?=lang('remove_row')?></span></i></span>
</button>
</div>
</td>
<?php endif; ?>

<?php if (REQ == 'CP' && isset($vertical_layout) && ($vertical_layout !== 'horizontal')):?>
<td class="grid-field__item-fieldset" style="display: none;">
<div class="grid-field__item-tools grid-field__item-tools--item-open">
Expand Down Expand Up @@ -403,10 +430,6 @@ class="grid-field <?php if (isset($vertical_layout)) {
</td>
<?php endif; ?>

<?php if (isset($row_counter) && $row_counter): ?>
<td class="row-counter-column body-row-counter-column js-row-counter-column"><span><?=$rowCounterNumber?></span></td>
<?php endif; ?>

<?php foreach ($row['columns'] as $key => $column):
$column_name = $columns[$key]['label'];
$column_name = ($lang_cols) ? lang($column_name) : $column_name;
Expand Down Expand Up @@ -497,18 +520,20 @@ class="grid-field <?php if (isset($vertical_layout)) {
<?php endif ?>
<?php endforeach ?>

<td class="grid-field__column--tools">
<div class="grid-field__column-tools">
<?php if ($reorder): ?>
<button type="button" class="button button--small button--default cursor-move js-grid-reorder-handle">
<span class="grid-field__column-tool"><i class="fal fa-fw fa-arrows-alt"></i></span>
</button>
<?php endif ?>
<button type="button" rel="remove_row" class="button button--small button--default">
<span class="grid-field__column-tool danger-link" title="<?=lang('remove_row')?>"><i class="fal fa-fw fa-trash-alt"><span class="hidden"><?=lang('remove_row')?></span></i></span>
</button>
</div>
</td>
<?php if (!isset($vertical_layout)): ?>
<td class="grid-field__column--tools">
<div class="grid-field__column-tools">
<?php if ($reorder): ?>
<button type="button" class="button button--small button--default cursor-move js-grid-reorder-handle">
<span class="grid-field__column-tool"><i class="fal fa-fw fa-arrows-alt"></i></span>
</button>
<?php endif ?>
<button type="button" rel="remove_row" class="button button--small button--default">
<span class="grid-field__column-tool danger-link" title="<?=lang('remove_row')?>"><i class="fal fa-fw fa-trash-alt"><span class="hidden"><?=lang('remove_row')?></span></i></span>
</button>
</div>
</td>
<?php endif; ?>
</tr>
<?php endforeach ?>
<?php endforeach ?>
Expand Down
16 changes: 8 additions & 8 deletions tests/cypress/cypress/integration/publish/copy_template_code.electron.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,12 @@ context('Copy template code from channel entries, fields, channels, and field gr
{stupid_grid:text_two}\
{/stupid_grid}", true)

cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(2) .app-badge').should('exist').should('contain', '{stupid_grid:text_one}')
cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(2) .app-badge').trigger('click')
cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(3) .app-badge').should('exist').should('contain', '{stupid_grid:text_one}')
cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(3) .app-badge').trigger('click')
cy.assertValueCopiedToClipboard('{stupid_grid:text_one}')

cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(3) .app-badge').should('exist').should('contain', '{stupid_grid:text_two}')
cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(3) .app-badge').trigger('click')
cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(4) .app-badge').should('exist').should('contain', '{stupid_grid:text_two}')
cy.get('[data-field_id=19] .grid-field__table tr th:nth-child(4) .app-badge').trigger('click')
cy.assertValueCopiedToClipboard('{stupid_grid:text_two}')

// Fluid
Expand Down Expand Up @@ -193,12 +193,12 @@ context('Copy template code from channel entries, fields, channels, and field gr
{/corpse:stupid_grid}\
{/corpse}", true);

cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(2) .app-badge').should('exist').should('contain', '{stupid_grid:text_one}')
cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(2) .app-badge').trigger('click')
cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(3) .app-badge').should('exist').should('contain', '{stupid_grid:text_one}')
cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(3) .app-badge').trigger('click')
cy.assertValueCopiedToClipboard('{stupid_grid:text_one}')

cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(3) .app-badge').should('exist').should('contain', '{stupid_grid:text_two}')
cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(3) .app-badge').trigger('click')
cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(4) .app-badge').should('exist').should('contain', '{stupid_grid:text_two}')
cy.get('fieldset[data-field_id=10] [data-field-name=stupid_grid]:visible .grid-field__table tr th:nth-child(4) .app-badge').trigger('click')
cy.assertValueCopiedToClipboard('{stupid_grid:text_two}')
})

Expand Down
36 changes: 18 additions & 18 deletions tests/cypress/cypress/integration/publish/publish.ee6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,25 +519,25 @@ context('Publish Entry', () => {
cy.visit('admin.php?/cp/publish/edit/entry/1')
cy.get('.grid-field tbody [rel=add_row]').should('be.visible');
cy.get('.grid-field [rel=add_row]:visible').click();
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(0).find('input').type('row 1');
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(1).find('.button:contains("dos")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(1).find('.button:contains("tres")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(1).find('.button:contains("dos")').should('have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(1).find('.button:contains("tres")').should('have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("quatro")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("cinco")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("quatro")').should('not.have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("cinco")').should('have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(1).find('input').type('row 1');
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("dos")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("tres")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("dos")').should('have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(2).find('.button:contains("tres")').should('have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(3).find('.button:contains("quatro")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(3).find('.button:contains("cinco")').click()
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(3).find('.button:contains("quatro")').should('not.have.class', 'active')
cy.get('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(3).find('.button:contains("cinco")').should('have.class', 'active')

cy.get('body').type('{ctrl}', {release: false}).type('s')
cy.get('p').contains('has been updated')
cy.get('.grid-field tbody tr:visible td:visible').eq(0).find('input').invoke('attr', 'value').then((val) => {
cy.get('.grid-field tbody tr:visible td:visible').eq(1).find('input').invoke('attr', 'value').then((val) => {
expect(val).to.eq('row 1');
})
cy.get('.grid-field tbody tr:visible td:visible').eq(1).find('.button:contains("dos")').should('have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(1).find('.button:contains("tres")').should('have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(2).find('.button:contains("quatro")').should('not.have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(2).find('.button:contains("cinco")').should('have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(2).find('.button:contains("dos")').should('have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(2).find('.button:contains("tres")').should('have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(3).find('.button:contains("quatro")').should('not.have.class', 'active')
cy.get('.grid-field tbody tr:visible td:visible').eq(3).find('.button:contains("cinco")').should('have.class', 'active')

cy.visit('index.php/entries/grid')
cy.hasNoErrors()
Expand Down Expand Up @@ -666,7 +666,7 @@ context('Publish Entry', () => {
cy.log('check Grid')
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field tbody [rel=add_row]').should('be.visible');
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field [rel=add_row]:visible').click();
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(0).find('input').focus();
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible[data-new-row-id="new_row_1"]').eq(1).find('input').focus();
cy.get('.date-picker-wrap').should('be.visible');
cy.get('.date-picker-wrap #date-picker-time-block input[type=time]').type('15:11')
cy.get('.date-picker-wrap td:visible a:contains(26)').trigger('click');
Expand Down Expand Up @@ -699,11 +699,11 @@ context('Publish Entry', () => {
})

cy.log('check Grid')
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible').eq(0).find('input[type=text]').focus();
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible').eq(1).find('input[type=text]').focus();
cy.get('.date-picker-wrap').should('be.visible');
cy.get('.date-picker-wrap td:contains(26)').should('have.class', 'act');
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible').eq(0).find('input[type=text]').invoke('val').should('contain' ,'/26/').should('contain', ' 3:11 PM')
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible').eq(0).find('input[type=text]').invoke('val').then((value) => {
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible').eq(1).find('input[type=text]').invoke('val').should('contain' ,'/26/').should('contain', ' 3:11 PM')
cy.get('label:contains("with Date")').parents('.fieldset-faux').find('.grid-field td:visible').eq(1).find('input[type=text]').invoke('val').then((value) => {
expect(value).to.contain(':11')
})

Expand Down
14 changes: 13 additions & 1 deletion themes/ee/cp/css/common.min.css
View file
Open in desktop
Loading