Search code examples
c#.netblazormauimudblazor

How to align datagrid elements to the right in MudBlazor


How can I align datagrid elements to the right side. Actually I need to align prices to the right side. Can anyone suggest a solution by referring below code.

 <MudDataGrid Items="@Elements" Hover="true" Striped="true" Dense="true">
           <Columns>
              <Column T="Menuitemlist" StickyLeft="true">
                   <CellTemplate>
                         <MudIconButton OnClick="@(() => RemoveItem(@context.Item))" Color="@Color.Default" Icon="@Icons.Material.Filled.Delete" />
                   </CellTemplate>
              </Column>
              <Column T="Menuitemlist" Field="ItemName" Title="Name" />
              <Column T="Menuitemlist" Title="Qty" >
                   <CellTemplate>
                        <MudGrid Style="padding-left:unset;padding-right:unset">
                        <MudItem xs="3"  Class="d-flex align-center justify-center ">
                               <MudIconButton Icon="@Icons.Material.Filled.AddCircle" Variant="Variant.Filled" Size="Size.Small" @onclick="IncrementCount" />
                        </MudItem>
                        <MudItem xs="6"  Class="d-flex align-center justify-center pa-0">
                        <MudText Typo="Typo.subtitle1">@qty</MudText>
                     </MudItem>
                            <MudItem xs="3"  Class="d-flex align-center justify-center pa-0">
                            <MudIconButton Icon="@Icons.Material.Filled.RemoveCircle" Variant="Variant.Filled" Size="Size.Small" @onclick="DecrementCount" />
                             </MudItem>
                             </MudGrid>
                    </CellTemplate>
              </Column>
              <Column T="Menuitemlist" Field="OptionalSalesPrice" Title="Price" />
              <Column T="Menuitemlist" Title="%" >
                     <CellTemplate>
                       <MudText @bind-Value="DiscountValue" Style="height:30px" Typo="Typo.body2" >@DiscountValue</MudText>
                        </CellTemplate>
               </Column>
               <Column T="Menuitemlist" Title="Total">
                       <CellTemplate>
                             <MudText Typo="Typo.body2">@context.Item.OptionalSalesPrice*@DecimalValue</MudText>
                       </CellTemplate>
               </Column>
             </Columns>
     </MudDataGrid>

enter image description here


Solution

  • You can use the CellClass or CellStyle parameter of Column component:

    <Column T="Menuitemlist" Field="OptionalSalesPrice" Title="Price"
            CellStyle="text-align: right" />
    

    Demo: https://try.mudblazor.com/snippet/GkcHOHYRxzhXAdKM

    Documentation: https://mudblazor.com/components/datagrid#visual-styling