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>
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