+<DataGrid TItem="Employee" + Data="" + @bind-SelectedRow="" + Responsive + ResponsiveMode="@TableResponsiveMode.Mobile"> + <DataGridCommandColumn /> + <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> + <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> + <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> + <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> + <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> + <EditTemplate> + <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> + </EditTemplate> + </DataGridColumn> +</DataGrid> +
+@code{ + [Inject] + public EmployeeData EmployeeData { get; set; } + private List<Employee> employeeList; + private Employee selectedEmployee; + + protected override async Task OnInitializedAsync() + { + employeeList = await EmployeeData.GetDataAsync(); + await base.OnInitializedAsync(); + } +} +
ResponsiveMode
parameter, you are now able to set the table to TableResponsiveMode.Mobile
, the table will render a dedicated layout for mobile devices where the columns are stacked on top of each other.
+ResponsiveMode
parameter in the underlying Table. The DataGrid now also supports the TableResponsiveMode.Mobile
mode. This will render a dedicated layout for mobile devices where the columns are stacked on top of each other.
+