How to make sort icon always visible in MudDataGrid

Question

How can I make sort icon visible always without any default sorting in mudgrid using mudblazor

I am using advanced data grid from below:- https://mudblazor.com/components/datagrid#default-data-grid

Have tried sortable=true on column and datagrid both.

Answer 1

You can override the style for the icons. They are set to be visible/invisible using opacity.

In the example below, i've added a Class="custom-grid" class to the grid so that this will only override for the MudDataGrids with the custom-grid class.

<style>
    .custom-grid .mud-table-cell .column-header .column-options .sort-direction-icon,
    .custom-grid .mud-table-cell .column-header .column-options .mud-menu .mud-icon-button-label
    {
        opacity: 1 !important;
    }
</style>

<MudDataGrid T="Element" Items="@Elements" SortMode="@_sortMode" Class="custom-grid">
    <Columns>
        <PropertyColumn Property="x => x.Number" Title="Nr" Sortable="false" />
        <PropertyColumn Property="x => x.Sign" />
        <PropertyColumn Property="x => x.Name" SortBy="@_sortBy" />
        <PropertyColumn Property="x => x.Position" />
        <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
        <PropertyColumn Property="x => x.Group" Title="Category" />
            <TemplateColumn Title="Custom" SortBy="@(x => $"{x.Sign} - {x.Name}")">
                <CellTemplate>
                    @context.Item.Sign - @context.Item.Name
                </CellTemplate>
            </TemplateColumn>
    </Columns>
    <PagerContent>
        <MudDataGridPager T="Element" />
    </PagerContent>
</MudDataGrid>

MudBlazor Snippet

I found the classes and styles that are applied to it from the MudDataGrid SCSS file. GitHub link