fix(datagrid): apply per-column CSS class

[desmondinho]

Description

This PR fixes an issue where per-column CSS classes in DataGrid component were not applied.

What's been done?

• Ensured that DataGrid per-column CSS classes are properly applied

Checklist

• My code follows the project's coding style and guidelines.
• I have included inline docs for my changes, where applicable.
• I have added, updated or removed tests according to my changes.
• All tests are passing.
• There's an open issue for the PR that I am making.

Additional Notes

https://discord.com/channels/1310668690337038346/1488092450852704397

Summary by CodeRabbit

• Bug Fixes
  • DataGrid now applies column width and CSS classes at the table column level, improving layout consistency and ensuring column styles and widths render correctly across headers and rows.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a3a6ac57-6386-4296-b9af-15f0975be7bd

📥 Commits

Reviewing files that changed from the base of the PR and between c9b152d and 9aa5def.

📒 Files selected for processing (1)

• src/LumexUI/Components/DataGrid/LumexDataGrid.razor

🚧 Files skipped from review as they are similar to previous changes (1)

• src/LumexUI/Components/DataGrid/LumexDataGrid.razor

---

📝 Walkthrough

Walkthrough

The DataGrid now inserts a <colgroup> before the <thead>. A private render helper emits a <col> per _columns entry, applying each column's Class to the corresponding <col> element.

Changes

Cohort / File(s)	Summary
Column Group Rendering src/LumexUI/Components/DataGrid/LumexDataGrid.razor, src/LumexUI/Components/DataGrid/LumexDataGrid.razor.cs	Added a private RenderColGroup(RenderTreeBuilder) helper and a _renderColGroup RenderFragment field; inserted _renderColGroup into the table markup to render a <colgroup> with <col class="..."> for each column, enabling column-level styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 I nibble code and hum a tune,

Colgroups placed before the noon,
Each <col> dons its class with pride,
The table rows now align and glide,
Hop—DataGrid's styling amplified!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description covers the main issue being fixed and includes most template sections, but lacks specific issue reference, detailed technical explanation, and all checklist items remain unchecked, suggesting incomplete submission readiness.	Add the issue number that this PR closes (e.g., 'Closes #{issue_number}'), provide more technical detail about the colgroup implementation, and clarify which checklist items are actually satisfied vs. incomplete.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(datagrid): apply per-column CSS class' is concise, specific, and accurately describes the main change: applying per-column CSS classes to the DataGrid component via a colgroup element.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/datagrid-per-column-class

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.96%. Comparing base (19b89dc) to head (9aa5def).
⚠️ Report is 172 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #302      +/-   ##
==========================================
- Coverage   96.95%   92.96%   -4.00%     
==========================================
  Files          70      166      +96     
  Lines        1542     2754    +1212     
  Branches      150      404     +254     
==========================================
+ Hits         1495     2560    +1065     
- Misses         28      103      +75     
- Partials       19       91      +72     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

🧹 Nitpick comments (2)

src/LumexUI/Components/DataGrid/LumexDataGrid.razor (1)

200-208: Consider adding @key directive for consistency.

Other loops in this component (e.g., RenderColumnHeaders, RenderRow, RenderPlaceholderRow) use @key="@column" to help Blazor's diffing algorithm. For consistency, consider adding it here as well.

♻️ Suggested change

     private void RenderColGroup( RenderTreeBuilder __builder )
     {
         <colgroup>
             `@foreach`(var column in _columns )
             {
-                <col class="@column.Class" />
+                <col class="@column.Class" `@key`="@column" />
             }
         </colgroup>
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/LumexUI/Components/DataGrid/LumexDataGrid.razor` around lines 200 - 208,
The RenderColGroup method renders a foreach over _columns but omits the `@key`
directive used elsewhere; update RenderColGroup to add `@key`="@column" on the
<col> element so Blazor's diffing is consistent with
RenderColumnHeaders/RenderRow/RenderPlaceholderRow—locate the RenderColGroup
method and add the `@key` attribute to the <col class="@column.Class" /> element.

src/LumexUI/Components/DataGrid/LumexDataGrid.razor.cs (1)

227-227: Inconsistent indentation: tabs instead of spaces.

Line 227 uses a tab character for indentation while the surrounding code (lines 228-231) uses spaces. This inconsistency should be fixed to maintain code style consistency.

🧹 Suggested fix

-		_renderColGroup = RenderColGroup;
+        _renderColGroup = RenderColGroup;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/LumexUI/Components/DataGrid/LumexDataGrid.razor.cs` at line 227, The
assignment statement "_renderColGroup = RenderColGroup;" uses a tab for
indentation while the surrounding block uses spaces; replace the leading tab
with the same number of spaces used in adjacent lines so the "_renderColGroup =
RenderColGroup;" line matches the file's space-based indentation style, leaving
the symbol names and statement unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/LumexUI/Components/DataGrid/LumexDataGrid.razor`:
- Around line 200-208: The RenderColGroup method renders a foreach over _columns
but omits the `@key` directive used elsewhere; update RenderColGroup to add
`@key`="@column" on the <col> element so Blazor's diffing is consistent with
RenderColumnHeaders/RenderRow/RenderPlaceholderRow—locate the RenderColGroup
method and add the `@key` attribute to the <col class="@column.Class" /> element.

In `@src/LumexUI/Components/DataGrid/LumexDataGrid.razor.cs`:
- Line 227: The assignment statement "_renderColGroup = RenderColGroup;" uses a
tab for indentation while the surrounding block uses spaces; replace the leading
tab with the same number of spaces used in adjacent lines so the
"_renderColGroup = RenderColGroup;" line matches the file's space-based
indentation style, leaving the symbol names and statement unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0522455f-2d84-464a-b1fa-9bd30d2be506

📥 Commits

Reviewing files that changed from the base of the PR and between fd5b200 and c9b152d.

📒 Files selected for processing (2)

• src/LumexUI/Components/DataGrid/LumexDataGrid.razor
• src/LumexUI/Components/DataGrid/LumexDataGrid.razor.cs