Blazorise DataGrid: Reordering
Drag and drop column by moving them with the mouse.
Overview
The Blazorise DataGrid provides a powerful reordering feature that allows users to change the order of columns by simply dragging and dropping them. This feature enhances user experience by allowing customization of the grid layout according to user preferences.
Examples
Reorderable
To enable column reordering, set theReorderable
property on the DataGridColumn
components. The columns can be rearranged by clicking and dragging them to the desired position.
<Button Color="Color.Primary" Clicked="@(() => dataGridRef.ResetDisplayOrder())"> Reset Columns Order </Button> <DataGrid @ref="" TItem="Employee" Data="" Responsive> <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Reorderable /> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Reorderable /> <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Reorderable /> <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Reorderable /> </DataGrid>
@code { private DataGrid<Employee> dataGridRef; [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.