Add responsive sample to BitDataGrid demo page (#11349) #11364
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughComponent-wide class tokens and selectors for BitDataGrid and its paginator were renamed and restructured across Razor, C#, SCSS, and TypeScript. Data cells now include a data-title attribute. Demo pages and styles were simplified, a responsive demo/sample was added, and one demo model property was renamed from MedalsModel to Medals. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant DG as BitDataGrid (demo: Virtual/OData)
participant VM as Demo Page (Filters)
participant P as ItemsProvider
U->>VM: Update search input
VM->>VM: Set filter property
VM->>DG: RefreshDataAsync()
DG->>P: Request data (with filter, pagination, sort)
P-->>DG: Return items + total count
DG-->>U: Render rows (td[data-title=col.Title])
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Pre-merge checks (2 passed, 2 warnings, 1 inconclusive)❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
Poem
✨ Finishing touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.ts (2)
47-47: Replace non‑standard scrollIntoViewIfNeeded with a robust fallbackscrollIntoViewIfNeeded is non-standard and not supported across browsers. Add a safe fallback.
- colOptions.scrollIntoViewIfNeeded(); + const anyElem = colOptions as any; + if (typeof anyElem.scrollIntoViewIfNeeded === 'function') { + anyElem.scrollIntoViewIfNeeded(); + } else { + colOptions.scrollIntoView({ block: 'nearest', inline: 'nearest' }); + }
76-80: Clamp column width to avoid negative/zero sizesRapid drags can produce negative or tiny widths. Clamp to a sensible minimum.
- const nextWidth = originalColumnWidth + (newPageX - startPageX) * rtlMultiplier; + const nextWidth = Math.max(24, originalColumnWidth + (newPageX - startPageX) * rtlMultiplier);src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.cs (1)
605-608: Escape single quotes in OData filter to prevent injection/broken queriesUser input with ' breaks the filter and can lead to injection.
- if (string.IsNullOrEmpty(_odataSampleNameFilter) is false) - { - query.Add("$filter", $"contains(Name,'{_odataSampleNameFilter}')"); - } + if (string.IsNullOrEmpty(_odataSampleNameFilter) is false) + { + var safe = _odataSampleNameFilter.Replace("'", "''"); + query.Add("$filter", $"contains(Name,'{safe}')"); + }
🧹 Nitpick comments (8)
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.ts (1)
90-96: Improve touch resizing behavior (prevent page scroll)Touch moves are passive, so you can’t prevent scrolling. Prefer CSS touch-action on the drag handle.
Add in BitDataGrid.scss (.bit-dtg-drg):
.bit-dtg-drg { + touch-action: none; + user-select: none; + -webkit-user-select: none; }src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.scss (1)
31-48: Add focus-visible styles for keyboard accessibilityButtons need visible focus cues.
button { border: 0; width: 2rem; height: 2rem; background: none center center / 1rem no-repeat; + &:focus-visible { + outline: 2px solid var(--bit-clr-acc-pri, #5b9bd5); + outline-offset: 2px; + }src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.scss (3)
1-3: Use themed border color for visual consistency.
Switch the wrapper border to the design token you already use elsewhere.-.custom-grid { - border: 1px solid; +.custom-grid { + border: 1px solid var(--bit-clr-brd-sec);
100-117: Match the requested breakpoint (≤768px) and deduplicate the selector list.
Issue #11349 calls for 768px; current 600px under-serves devices. Also,tdappears twice.- @media (max-width: 600px) { + @media (max-width: 768px) { table { width: 100%; } - table, thead, tbody, th, td, tr, td { + table, thead, tbody, th, tr, td { display: block; }
113-116: Verify the source of data-title; labels won’t render without it.
This CSS relies on td[data-title]. Confirm BitDataGrid sets data-title on cells (from column Title). If not, add explicit Title on columns or emit data-title via cell templates.If needed, set Titles on columns in the Responsive example:
-<BitDataGridPropertyColumn Property="@(c => c.Name)" /> +<BitDataGridPropertyColumn Property="@(c => c.Name)" Title="Name" />src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor (1)
141-149: Ensure friendly Titles for responsive labels.
Explicit Titles improve mobile labels and i18n.- <BitDataGrid Items="@allCountries" Pagination="@pagination6"> - <BitDataGridPropertyColumn Property="@(c => c.Name)" /> - <BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" /> - <BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" /> - <BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" /> - <BitDataGridPropertyColumn Property="@(c => c.Medals.Total)" /> + <BitDataGrid Items="@allCountries" Pagination="@pagination6"> + <BitDataGridPropertyColumn Property="@(c => c.Name)" Title="Country" /> + <BitDataGridPropertyColumn Property="@(c => c.Medals.Gold)" Title="Gold" /> + <BitDataGridPropertyColumn Property="@(c => c.Medals.Silver)" Title="Silver" /> + <BitDataGridPropertyColumn Property="@(c => c.Medals.Bronze)" Title="Bronze" /> + <BitDataGridPropertyColumn Property="@(c => c.Medals.Total)" Title="Total" /> </BitDataGrid>src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.samples.cs (2)
917-953: Align breakpoint and deduplicate selectors in the snippet.
Mirror the SCSS fix in the code sample so docs and live demo match.- @media (max-width: 600px) { + @media (max-width: 768px) { .responsive-grid table { width: 100%; } - .responsive-grid table, - .responsive-grid thead, - .responsive-grid tbody, - .responsive-grid th, - .responsive-grid td, - .responsive-grid tr, - .responsive-grid td { + .responsive-grid table, + .responsive-grid thead, + .responsive-grid tbody, + .responsive-grid th, + .responsive-grid tr, + .responsive-grid td { display: block; }
955-963: Make snippet consistent with markup (pagination6) and trim unused code.
The snippet defines pagination (not pagination6) and includes an unused filter. Keep it minimal and consistent.-<BitDataGrid Items="@allCountries" Pagination="@pagination6"> +<BitDataGrid Items="@allCountries" Pagination="@pagination6">And in the C# snippet below, rename the field and remove unused filter/FilteredItems:
-private string typicalSampleNameFilter = string.Empty; -private BitDataGridPaginationState pagination = new() { ItemsPerPage = 7 }; -private IQueryable<CountryModel> FilteredItems => - allCountries?.Where(x => x.Name.Contains(typicalSampleNameFilter ?? string.Empty, StringComparison.CurrentCultureIgnoreCase)); +private BitDataGridPaginationState pagination6 = new() { ItemsPerPage = 7 };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (11)
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor(3 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs(2 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss(1 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.ts(3 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Columns/BitDataGridColumnBase.razor(1 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.razor(3 hunks)src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor(4 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.samples.cs(10 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.scss(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build and test
🔇 Additional comments (9)
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor (2)
106-116: LGTM on token renamesHeader wrappers/options/drag handle tokens align with TS/SCSS. No issues.
78-82: No action needed: DataGrid demo CSS uses data-title consistentlysrc/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs (2)
430-435: LGTM on class token updatesSorting/header/grid class mappings look correct and non-breaking.
477-482: LGTM on alignment classesCenter/right alignment map to new bit-dtg-cj* tokens properly.
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Columns/BitDataGridColumnBase.razor (1)
110-111: LGTM on header token renamesNew bit-dtg-* classes are consistent with the rest of the grid.
Also applies to: 115-118, 122-125, 129-130
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss (1)
70-82: LGTM on sort indicator stylingAscending/descending states render correctly with the new tokens.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.cs (3)
512-521: LGTM on access modifiers and new pagination statePrivatizing fields and adding pagination6 is fine.
522-524: LGTM on making filtered queries privateEncapsulation improvement is good.
520-521: pagination6 usage confirmed. The demo bindspagination6to both<BitDataGrid Pagination="@pagination6">and<BitDataGridPaginator Value="@pagination6" />, so no further changes are needed.
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.razor
Show resolved
Hide resolved
src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/Pagination/BitDataGridPaginator.scss
Outdated
Show resolved
Hide resolved
.../Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor
Outdated
Show resolved
Hide resolved
....BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor.samples.cs
Show resolved
Hide resolved
msynk
force-pushed
the
11349-blazorui-datagrid-responsive
branch
from
ee8e3c8 to
fc0633e
Compare
1 participant
closes #11349
Summary by CodeRabbit