MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.22k stars 1.18k forks source link

Mudtable with Expansion Panels #8801

Open stephanie-rimel opened 3 weeks ago

stephanie-rimel commented 3 weeks ago

Feature request type

Enhance component

Component name

MudTable and ExpansionPanel

Is your feature request related to a problem?

I have a Item data model with a List propery sessions, it is a 1 -> many relationship and I want to be able to have a table of expansion panels that open up to the itemized sessions and I can't figure out how to do this. Is there a way to alter the TableGroupDefinnition to have the parent object as the group by and the session id as the selector? Can i do some kind of renderfragment situation? Any ideas? I feel like this is a common data structure and would be a great addition to the componenets for mudtable. Thank you!

For example. I would like headers with the expansion panel parent component to be the columns of the parent, and i would like the expansion panel to open up to a sublist of the sessions with their own table headers. What can i do? I could also maybe do a for each of item, and then a foreach of their sessions, but how would i handle the pagination in this implementation?

Can I perhaps do a pull request and edit <RowTemplate> To be encapsulated in an Expansion Panel? and put the sub table in the expansion panel <ChildContent>? Can I do my own renderfragment of <RowTemplate> and pass it to the table declaration? I did try this but unsuccessfully, can anyone show me?

Describe the solution you'd like

A mudtable with expansion panels that you can have columns in the header panel not just group:title

Have you seen this feature anywhere else?

No response

Describe alternatives you've considered

No response

Pull Request

Code of Conduct

github-actions[bot] commented 3 weeks ago

👋 Thanks for wanting to do a PR @stephanie-rimel ! We will try to merge all (non-breaking) bugfix PRs and we will deliberate the value of feature PRs for the community. But be warned that there is no guarantee that new features will be merged. If you want to be sure before investing the work please contact the team about your planned feature PR

stephanie-rimel commented 3 weeks ago

I got this to work if anyone wants to see

    @if (Profiles != null)
    {
        <MudTable Items="@Profiles" Hover="true" Bordered="false" Dense="false" Striped="false" Elevation="0" Loading="@loading" Filter="new Func<Profile, bool>(FilterFunc1)">
            <ToolBarContent>
                <h2>Trading Profiles</h2>
                <MudSpacer/>
                <MudStack Row="true" Spacing="3" Flex=3>
                    <MudSelect Margin="Margin.Dense" T="string" Value="filter" ValueChanged="@((string s) => OnValueChanged(s))" Label="Filter" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.FilterAlt" IconSize="Size.Medium" Class="mt-0">
                        <MudSelectItem Value="@("All")"/>
                        <MudSelectItem Value="@("Active")"/>
                        <MudSelectItem Value="@("Inactive")"/>
                    </MudSelect>
                    <MudTextField Margin="Margin.Dense" @bind-Value="searchString1" Label="Search" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0 toolbar"></MudTextField>
                    <MudButton StartIcon="@Icons.Material.Filled.Star" IconColor="Color.Tertiary" @onclick="() => CreateNew()" Class="pill-button">Create New</MudButton>
                </MudStack>
            </ToolBarContent>
            <HeaderContent>
                <MudTh>Logo</MudTh>
                <MudTh>Name</MudTh>
                <MudTh>Id</MudTh>
                <MudTh>Profits</MudTh>
                <MudTh>Fees</MudTh>
                <MudTh>CreateDate</MudTh>
                <MudTh>Activate</MudTh>
                <MudTh Style="text-align:center">Show Sessions</MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd DataLabel="Logo" @ondblclick="@(() => OnRowDoubleClicked(context))">
                    <img src=@context.Crypto.Image Height="30px" alt="image" class="image"/>
                </MudTd>
                <MudTd DataLabel="Name" @ondblclick="@(() => OnRowDoubleClicked(context))">@context.Crypto.Name</MudTd>
                <MudTd DataLabel="Id" @ondblclick="@(() => OnRowDoubleClicked(context))">@context.Id</MudTd>
                <MudTd DataLabel="Profits" @ondblclick="@(() => OnRowDoubleClicked(context))">@context.AggregatedProfit</MudTd>
                <MudTd DataLabel="Fees" @ondblclick="@(() => OnRowDoubleClicked(context))">@context.AggregatedFees</MudTd>
                <MudTd DataLabel="CreateDate" @ondblclick="@(() => OnRowDoubleClicked(context))">@context.CreateDate</MudTd>
                <MudTd DataLabel="Activate">
                    <MudSwitch TValue="bool" Value="@context.IsActive"
                               ValueChanged="@((bool value) => OnSwitchChange(value, context))" Size="Size.Large"
                               Color="Color.Primary"/>
                </MudTd>
                <MudTd Style="text-align:center">
                    <MudButton Variant="Variant.Outlined" Size="Size.Small" OnClick="@(() => ShowBtnPress(context.Id))">@((context.ShowSessions == true) ? "Hide" : "Show") Sessions Details</MudButton>
                </MudTd>
            </RowTemplate>
            <ChildRowContent>
                @if (context.ShowSessions)
                {
                    <MudTr>
                        <td colspan="8">
                            <MudCardContent Class="pa-0">
                                <MudTable Items="@context.Sessions" Context="Session" Hover="true" Elevation="0">
                                    <HeaderContent>
                                        <MudTh>Id</MudTh>
                                        <MudTh>Create Date</MudTh>
                                        <MudTh>Deactivated</MudTh>
                                        <MudTh>Open Position</MudTh>
                                        <MudTh>Chart</MudTh>
                                        <MudTh>Funds Allocated</MudTh>
                                        <MudTh>Fees</MudTh>
                                        <MudTh>Current Balance</MudTh>
                                        <MudTh>Exit Balance</MudTh>
                                        <MudTh>Profit</MudTh>
                                    </HeaderContent>
                                    <RowTemplate>
                                        <MudTd DataLabel="Id">@Session.Id</MudTd>
                                        <MudTd DataLabel="Create Date">@Session.CreateDate</MudTd>
                                        <MudTd DataLabel="Deactivated">@Session.Deactivated</MudTd>
                                        <MudTd DataLabel="Open Position">@Session.IsOpenPosition</MudTd>
                                        <MudTd DataLabel="Chart">@Session.Chart</MudTd>
                                        <MudTd DataLabel="Funds Allocated">@Session.FundsAllocated</MudTd>
                                        <MudTd DataLabel="Funds Fees">@Session.Fees</MudTd>
                                        <MudTd DataLabel="Current Balance">@Session.CurrentBalance</MudTd>
                                        <MudTd DataLabel="Exit Balance">@Session.ExitBalance</MudTd>
                                        <MudTd DataLabel="Profit">@Session.Profit</MudTd>
                                    </RowTemplate>
                                </MudTable>
                            </MudCardContent>
                        </td>
                    </MudTr>
                }
            </ChildRowContent>

            <PagerContent>
                <MudTablePager PageSizeOptions="new int[] {7, 10, 25, 50, 100, int.MaxValue}"
                               RowsPerPageString="7" HideRowsPerPage="true"/>
            </PagerContent>
        </MudTable>
    }

image

Conman-123 commented 3 days ago

I came up with the same solution as you when I had this situation a while ago. Personally I think the ChildRowContent is sufficient and we shouldn't implement this as a feature. Maybe just add it as an example to the docs?