Grid Components - Sorting & Filtering Examples

Column Sorting

Click column headers to sort ascending/descending/none.

View Code

<Grid Items="@orders">
    <Columns>
        <GridColumn Field="Id" Header="Order ID" Sortable="true" />
        <GridColumn Field="Customer" Header="Customer" Sortable="true" />
        <GridColumn Field="Amount" Header="Amount" Sortable="true" />
    </Columns>
</Grid>

Controlled Sorting State

External sort controls with programmatic state management.

View Code

<Grid Items="@orders" @bind-State="@gridState">
    <Columns>
        <GridColumn Field="Amount" Sortable="true" />
    </Columns>
</Grid>

@code {
    private GridState gridState = new();
    
    private void SortByAmount()
    {
        // ✅ Natural object mutation - hash-based change detection
        gridState.SortDescriptors.Clear();
        gridState.SortDescriptors.Add(new GridSortDescriptor
        {
            Field = "Amount",
            Direction = GridSortDirection.Descending
        });
    }
}

Column Filtering

Text filter inputs in column headers for client-side filtering.

View Code

<Grid Items="@orders">
    <Columns>
        <GridColumn Field="Customer" Sortable="true" Filterable="true" />
    </Columns>
</Grid>

Controlled Filtering State

External filter controls with custom dropdown and programmatic state.

View Code

<Grid Items="@orders" @bind-State="@filterState" SuppressHeaderMenus="true">
    <Columns>
        <GridColumn Field="Status" />
    </Columns>
</Grid>

<Select @bind-Value="statusFilter">
    <SelectItem Value="@(-1)" TValue="int">All Statuses</SelectItem>
    <SelectItem Value="@((int)OrderStatus.Pending)" TValue="int">Pending</SelectItem>
    <!-- ... other status values ... -->
</Select>

@code {
    private GridState filterState = new();
    private int _statusFilter = -1;  // -1 = all
    private int statusFilter 
    { 
        get => _statusFilter;
        set 
        {
            if (_statusFilter != value)
            {
                _statusFilter = value;
                ApplyStatusFilter(value);
            }
        }
    }
    
    private void ApplyStatusFilter(int value)
    {
        // ✅ Natural object mutation - hash-based change detection
        filterState.FilterDescriptors.Clear();
        if (value >= 0)  // -1 = all, 0+ = enum values
        {
            filterState.FilterDescriptors.Add(new GridFilterDescriptor
            {
                Field = "Status",
                Operator = GridFilterOperator.Equals,
                Value = value  // Pass enum value as int - JS will detect as number filter
            });
        }
    }
}