How to move the Commit and Cancel buttons to the left side of a MudTable using inline editing

Question

The inline editing capability of a MudTable features commit and cancel buttons. By default, they are placed on the right side of the row when in edit mode. Because of a large number of columns, I would like to place those buttons on the left side of the row for easier visibility without horizontal scrolling. I have searched the MudBlazor documentation and other sites for a way to move these, but have come up empty. I have also looked with F12 developer tools in the browser to see if there is a way to manipulate class properties. However, MudBlazor renders an extra column. It seems any solution would have to act before rendering.

Is this possible to move the commit and cancel buttons to the beginning of the row? And if so, how is it done or configured?

Answer 1

This can be accomplished with the ApplyButtonPosition flag in <MudTable>. The default behavior is <MudTable ApplyButtonPosition="TableApplyButtonPosition.End">, where the edit apply button is on the right side. To put it on the left side (which is what the question asks for) change it to TableApplyButtonPosition.Start. The cancel edit button will also follow where the apply edit button is located. Checkout MudBlazor Docs for more info and options!

Answer 2

There doesn't seem to be a built-in way of moving the inline edit buttons to the left side. You can, however, achieve your desired outcome by replacing them with a set of custom ones.

Example

Code

https://try.mudblazor.com/snippet/GOcGaMvHhDrZAoTo

@inject ISnackbar Snackbar

<MudTable @ref=@table
          T="Element"
          Items="@elements"
          Hover="true"
          SortLabel="Sort By"
          OnCommitEditClick="@(() => Snackbar.Add("Commit Edit Handler Invoked"))"
          RowEditPreview="BackupItem"
          RowEditCancel="ResetItemToOriginalValues"
          CommitEditIcon=""
          SelectedItemChanged="OnSelectedItemChanged">
    <ColGroup>
        <col />
        <col style="width:20%;" />
        <col style="width:50%;" />
        <col style="width:30%" />
    </ColGroup>
    <HeaderContent>
        <MudTh></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Age)">Age</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd></MudTd>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Age">@context.Age</MudTd>
    </RowTemplate>
    <RowEditingTemplate>
        <MudTd>
            <div style="display: flex; gap: 10px;">
                <MudTooltip Text="Commit Edit">
                    <MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Check" OnClick="OnCommitEditButtonClicked"></MudIconButton>
                </MudTooltip>
                <MudTooltip Text="Cancel Edit">
                    <MudIconButton Size="Size.Small" Icon="@Icons.Material.Filled.Cancel" OnClick="OnCancelEditButtonClicked"></MudIconButton>
                </MudTooltip>
            </div>
        </MudTd>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Name">
            <MudTextField @bind-Value="@context.Name" Required />
        </MudTd>
        <MudTd DataLabel="Age">
            <MudNumericField @bind-Value="@context.Age" Required />
        </MudTd>
    </RowEditingTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>

@code {
    private MudTable<Element> table;
    private Element elementBeforeEdit;
    private IEnumerable<Element> elements = new List<Element>();

    protected override void OnInitialized()
    {
        elements = GetData();
    }

    private void OnCommitEditButtonClicked(MouseEventArgs e)
    {
        table.RowEditCommit?.Invoke(table.SelectedItem);
        table.OnCommitEditClick.InvokeAsync(e);
        table.SetSelectedItem(null);
    }

    private void OnCancelEditButtonClicked(MouseEventArgs e)
    {
        table.RowEditCancel?.Invoke(table.SelectedItem);
        table.OnCancelEditClick.InvokeAsync(e);
        table.SetSelectedItem(null);
    }

    private void OnSelectedItemChanged(object element)
    {
        table.SetEditingItem(element);
    }

    private void BackupItem(object element)
    {
        elementBeforeEdit = new()
        {
            Name = ((Element)element).Name,
            Age = ((Element)element).Age,
        };
    }

    private void ResetItemToOriginalValues(object element)
    {
        ((Element)element).Name = elementBeforeEdit.Name;
        ((Element)element).Age = elementBeforeEdit.Age;
    }

    private IEnumerable<Element> GetData()
    {
        return new List<Element>()
        {
            new() { Number = 1, Name = "Peter Parker", Age = 16 },
            new() { Number = 2, Name = "Bruce Wayne", Age = 31 },
            new() { Number = 3, Name = "Clark Kent", Age = 31 },
            new() { Number = 4, Name = "Barry Allen", Age = 29 },
            new() { Number = 5, Name = "Tony Stark", Age = 52 },
        };
    }
    
    class Element
    {
        public int Number { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

Explanation

In order to hide the existing buttons, make sure the cancel button is disabled and set the CommitEditIcon value to "".

To add a custom commit/edit button, add a new table column and add the buttons you need inside RowEditingTemplate. After that, add the commit/cancel logic for the buttons (refer to the code sample above) and that's it.