Skip to content

[WC-3593] fix(datagrid): small column header and dropdown filter fixes #2439

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
r0b1n wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[WC-3593] fix(datagrid): small column header and dropdown filter fixes #2439

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
f74c25c
fix: place column size input next to the enum selector that is respon…
r0b1n Sep 22, 2026
d73df64
fix: prevent outline from clipping out
r0b1n Sep 22, 2026
abfeaa6
fix(data-widgets): prevent dropdown filter toggle arrow from overflow…
r0b1n Sep 23, 2026
eda6120
fix: let inputs and filters shring in narrow columns byt overriding a…
r0b1n Sep 24, 2026
6bf1741
chore: add unreleased changelog entries for datagrid fixes
r0b1n Sep 23, 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
8 changes: 8 additions & 0 deletions packages/modules/data-widgets/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## [Unreleased]

### Fixed

- We fixed an issue where the focus outline of column header filter inputs was clipped.

- We fixed an issue where the dropdown filter's clear and toggle indicators visually overflowed the filter button in narrow columns.

- We fixed an issue where filters and inputs overflowed their headers and cells in narrow columns.

## [3.11.6] DataWidgets - 2026-09-18

### Datagrid
Expand Down
2 changes: 2 additions & 0 deletions packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ $root: ".widget-dropdown-filter";
padding-block: var(--wdf-button-spacing);
padding-inline-end: var(--wdf-button-spacing);
padding-inline-start: var(--wdf-button-spacing);
// Prevents the toggle indicator from visually overflowing the button boundary in narrow columns.
overflow: clip;
}

&-popover {
Expand Down
2 changes: 0 additions & 2 deletions packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ $filter-box-shadow:
flex-grow: 1;
position: relative;

overflow: hidden;

.filter-input {
border-start-start-radius: 0;
border-end-start-radius: 0;
Expand Down
14 changes: 14 additions & 0 deletions packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ $root: ".widget-datagrid";
}

.th {
.form-control {
min-width: 0; // let filter widgets shrink with the column instead of overflowing the header
}

&.dragging {
opacity: 0.5;
&.dragging-over-self {
Expand Down Expand Up @@ -155,6 +159,12 @@ $root: ".widget-datagrid";
/* If Column Header has filter */
&:has(.th .column-container .filter:not(:empty)) {
.th {
/*
When the column is smaller than the filter can be, the filter will overflow outside of the column to the space of the next column.
This is not visible in normal scenario as next colum naturally hides the overflow of the previous column.
But when the filter selector is open in virtual scrolling, the column gets lifted with z-index and the overflow becomes visible.
*/
overflow: clip;
&.column-selector {
padding: var(--spacing-medium, $spacing-medium) 0;
}
Expand Down Expand Up @@ -243,6 +253,10 @@ $root: ".widget-datagrid";
border-bottom-width: 1px;
min-width: 0;

.form-control {
min-width: 0; // let editable widgets shrink with the column instead of overflowing the cell
}

&.td-borders {
border-top-width: 1px;
border-top-style: solid;
Expand Down
4 changes: 4 additions & 0 deletions packages/pluggableWidgets/datagrid-web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## [Unreleased]

### Fixed

- We fixed an issue where the "Column size" property appeared away from the "Column width" property it depends on in the column Appearance tab in Studio Pro.

## [3.11.6] - 2026-09-18

### Fixed
Expand Down
8 changes: 4 additions & 4 deletions packages/pluggableWidgets/datagrid-web/src/Datagrid.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,10 @@
<enumerationValue key="manual">Manual</enumerationValue>
</enumerationValues>
</property>
<property key="size" type="integer" defaultValue="1">
<caption>Column size</caption>
<description />
</property>
<property key="minWidth" type="enumeration" defaultValue="auto">
<caption>Min width</caption>
<description />
Expand All @@ -150,10 +154,6 @@
<caption>Min width value (px)</caption>
<description />
</property>
<property key="size" type="integer" defaultValue="1">
<caption>Column size</caption>
<description />
</property>
<property key="alignment" type="enumeration" defaultValue="left">
<caption>Alignment</caption>
<description />
Expand Down
Loading