Skip to content

MudTable: Use theme typography for font styling#12152

Merged
Garderoben merged 2 commits intodevfrom
copilot/use-theme-typography-mudtable
Dec 18, 2025
Merged

MudTable: Use theme typography for font styling#12152
Garderoben merged 2 commits intodevfrom
copilot/use-theme-typography-mudtable

Conversation

Copy link
Contributor

Copilot AI commented Nov 23, 2025 •
edited
Loading

MudTable and MudSimpleTable used hardcoded font sizes (0.875rem) that didn't respect theme typography settings. This prevented tables from adapting when developers customized MudTheme.Typography.

Changes:

  • Header cells now use subtitle2 typography variables (font-size, font-family, font-weight, line-height, letter-spacing, text-transform)
  • Body cells now use body2 typography variables (font-size, font-family, font-weight, line-height, letter-spacing, text-transform)
  • Applied to both _table.scss and _simpletable.scss
  • MudDataGrid inherits these changes automatically

Tables now respond to theme typography configuration:

var theme = new MudTheme
{
    Typography = new Typography
    {
        Body2 = new Body2Typography { FontSize = "1rem" },
        Subtitle2 = new Subtitle2Typography { FontSize = "1.125rem" }
    }
};

Aligns with Material Design 2 data table specifications and existing MudBlazor component patterns.

Checklist:

  • I've read the contribution guidelines
  • My code follows the style of this project
  • I've added or updated relevant unit tests
Original prompt

This section details on the original issue you should resolve

<issue_title>Use Theme Typography for MudTable Font Styling</issue_title>
<issue_description>### Summary

The current implementation of MudTable (and related components such as MudDataGrid) uses a fixed font size (0.875rem), which does not automatically adapt to typography settings defined in the MudTheme. This results in inconsistent text sizing across the UI when developers customize theme typography.

This issue proposes standardizing MudTable font styling to use the theme’s body2 typography definition, ensuring consistent, theme-driven font sizing and styling throughout MudBlazor components.

Background / Context

A previous pull request (#8984) attempted to replace the hardcoded table font size with inherit to achieve consistency. While this allowed table text to follow the inherited font size, the maintainers decided that the component should instead explicitly use the theme’s body2 typography, as per Material Design guidelines and MudBlazor’s existing conventions.

Key discussion points:

Proposed Solution

Update MudTable and related styles (_table.scss, _simpletable.scss) to use typography variables from MudTheme in accordance to Material Design 2 guidelines:

Header cells (.mud-table-head .mud-table-cell / .mdc-data-table__header-cell):

font-size: var(--mud-typography-subtitle2-font-size);
font-family: var(--mud-typography-subtitle2-font-family);
line-height: var(--mud-typography-subtitle2-line-height);
letter-spacing: var(--mud-typography-subtitle2-letter-spacing);
text-transform: var(--mud-typography-subtitle2-text-transform);

Body cells (.mud-table-body .mud-table-cell / .mdc-data-table__cell):

font-size: var(--mud-typography-body2-font-size);
font-family: var(--mud-typography-body2-font-family);
line-height: var(--mud-typography-body2-line-height);
letter-spacing: var(--mud-typography-body2-letter-spacing);
text-transform: var(--mud-typography-body2-text-transform);

Alternatives or examples

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Update MudTable font styling to use theme typography Use theme typography for MudTable font styling Nov 23, 2025
Copilot AI requested a review from danielchalmers November 23, 2025 21:43
@danielchalmers danielchalmers marked this pull request as ready for review November 23, 2025 22:21
@mudbot mudbot bot added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label Nov 23, 2025
@danielchalmers danielchalmers changed the title Use theme typography for MudTable font styling MudTable: Use theme typography for font styling Nov 23, 2025
@danielchalmers danielchalmers marked this pull request as draft November 23, 2025 23:38
@danielchalmers danielchalmers marked this pull request as ready for review November 24, 2025 01:37
Garderoben
Garderoben reviewed Dec 18, 2025
View reviewed changes
Copy link
Member

@Garderoben Garderoben left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does it look now? since its sub2 for header its a bit different from before i bet. Is it acceptable?

@danielchalmers
Copy link
Member

danielchalmers commented Dec 18, 2025

How does it look now? since its sub2 for header its a bit different from before i bet. Is it acceptable?

Default Table

Before

image

After

image

Simple Table

Before

image

After

image

@henon henon self-requested a review December 18, 2025 17:52
henon
henon approved these changes Dec 18, 2025
View reviewed changes
Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not seeing a difference so I see no reason why not to merge it.

@Garderoben Garderoben merged commit 1acdf5c into dev Dec 18, 2025
12 checks passed
@ScarletKuro ScarletKuro deleted the copilot/use-theme-typography-mudtable branch January 26, 2026 07:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@henon henon henon approved these changes

@Garderoben Garderoben Garderoben approved these changes

+2 more reviewers

@danielchalmers danielchalmers danielchalmers approved these changes

@EnesEfeTokta EnesEfeTokta EnesEfeTokta approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@danielchalmers danielchalmers

Copilot code review Copilot

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Use Theme Typography for MudTable Font Styling

5 participants

@danielchalmers @henon @Garderoben @EnesEfeTokta