Skip to content
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.

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

MudTable add grouping/stacking header columns #1232

Closed
zerox981 opened this issue Mar 18, 2021 · 3 comments
Closed

MudTable add grouping/stacking header columns #1232

zerox981 opened this issue Mar 18, 2021 · 3 comments
Labels
enhancement New feature or request
Milestone

Comments

@zerox981
Copy link
Contributor

zerox981 commented Mar 18, 2021

Is your feature request related to a problem? Please describe.
The MudTable is missing the feature to group/stack header columns like this: https://www.w3.org/WAI/tutorials/tables/irregular/

Describe the solution you'd like
The easiest way to achieve it is to add a parameter to MudTableBase like this:

[Parameter] public RenderFragment HeaderTopContent { get; set; }

and insert in if statement just after in the MudTable.razor file (line 37 atm)

@if (@HeaderTopContent is not null)
{                            
    @HeaderTopContent                            
}

You can then easily add multiple levels like this in a MudTable

<HeaderTopContent>
    <MudTr IsHeader="true">
        <MudTh UserAttributes="@(new Dictionary<string,object>(){["colspan"]="5"})">Planets</MudTh>            
    </MudTr>
    <MudTr IsHeader="true">
        <MudTh UserAttributes="@(new Dictionary<string,object>(){["colspan"]="2"})">Mars</MudTh>
        <MudTh UserAttributes="@(new Dictionary<string,object>(){["colspan"]="3"})">Venus</MudTh>            
    </MudTr>
</HeaderTopContent> 

I modfied the css a bit so it can be seen more clearly, this is the end result:
image

Describe alternatives you've considered
Probably a bit more code would be required, to fix the FixedHeader=true scenario (or at least add optionally pin the HeaderTopContent too.

@zerox981 zerox981 added the enhancement New feature or request label Mar 18, 2021
@HClausing
Copy link
Member

It looks good. Can you send a PR for this feature, please?

@zerox981
Copy link
Contributor Author

OK, done. I did also add an example. Hope it's ok. Check the wording and the terminology is greatly appreciated:).

@henon
Copy link
Collaborator

henon commented Apr 24, 2021

PR is merged.

@henon henon closed this as completed Apr 24, 2021
@henon henon added this to the 5.0.8 milestone Apr 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants