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 the Reorderable property on the DataGridColumn components. The columns can be rearranged by clicking and dragging them to the desired position.
#
First Name
Last Name
Email
1SamuelCollierSamuel.Collier62@gmail.com
2IrvinZiemannIrvin.Ziemann@gmail.com
3GeraldPollichGerald82@yahoo.com
4CoraConnCora27@yahoo.com
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com
6JessieWilkinsonJessie_Wilkinson@gmail.com
7GregoryRennerGregory63@hotmail.com
8MaryannHilpertMaryann.Hilpert12@gmail.com
9MerlePacochaMerle3@gmail.com
10AngelinaWardAngelina42@gmail.com
<Button Color="Color.Primary" Clicked="@(() => dataGridRef.ResetDisplayOrder())">
    Reset Columns Order
</Button>

<DataGrid @ref="@dataGridRef" TItem="Employee" Data="@employeeList" 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.

On this page