<DxGrid Data="Products" ShowSearchBox="true">
    <Columns> ... </Columns>
    <SearchBoxTemplate>
        <DxSpinEdit Value="GetSpinEditValue(context.SearchText)"
                    ValueChanged="(int? v) => context.SearchText = v.ToString()"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
    </SearchBoxTemplate>
</DxGrid>

<EditFormTemplate Context="editFormContext">
    <DxFormLayout>
        <DxFormLayoutItem Caption="First Name:">
            @editFormContext.GetEditor("FirstName")
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Last Name:">
            @editFormContext.GetEditor("LastName")
        </DxFormLayoutItem>
    </DxFormLayout>
</EditFormTemplate>

<DxGrid Data="@forecasts" ShowFilterRow="true" @ref="Grid" >
    <Columns>
        <DxGridDataColumn FieldName="Date" FilterRowCellTemplate="GetFilterTemplate(true)" />
        <DxGridDataColumn FieldName="Temperature" FilterRowCellTemplate="GetFilterTemplate(false)" />
        <DxGridDataColumn FieldName="Summary" />
    </Columns>
</DxGrid>

@code {
    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) {
            Grid.BeginUpdate();
            var column = Grid.GetDataColumns().First(c => c.FieldName == "Summary");
            column.CellDisplayTemplate = context => {
                return @<text><h1>@context.DisplayText</h1></text>;
            };
            column.FilterRowCellTemplate = GetFilterTemplate(false);
            Grid.EndUpdate();
        }
        base.OnAfterRender(firstRender);
    }
    RenderFragment<GridDataColumnFilterRowCellTemplateContext> GetFilterTemplate(bool isCustom) {
        if (!isCustom) return null;
        return context => {
            return __builder => {
                <DxDateEdit Date="(DateTime?)context.FilterRowValue"
                    DateChanged="(DateTime? v) => context.FilterRowValue = v" />
            };
        };
    }
}

.grid-container {
    width: 950px;
}
.pager-container {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #d2d2d2;
    border-top: none;
}

<div class="grid-container">
    <DxGrid Data="Data" @bind-PageIndex="@ActivePageIndex" PagerVisible="false" PageSize="6" >
        <Columns>
            <DxGridDataColumn FieldName="ContactName" />
            <DxGridDataColumn FieldName="CompanyName" />
            <DxGridDataColumn FieldName="Country" />
            <DxGridDataColumn FieldName="City" />
        </Columns>
    </DxGrid>
    <div class="pager-container">
        <DxPager PageCount="@PageCount" @bind-ActivePageIndex="@ActivePageIndex" />
        <div>
            <DxButton Text="Custom Button 1" />
            <DxButton Text="Custom Button 2" />
        </div>
    </div>
</div>

@code {
    IEnumerable<object> Data { get; set; }
    int PageCount { get; set; }
    int ActivePageIndex { get; set; } = 1;

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetCustomersAsync();
        PageCount = (int)Math.Ceiling((decimal)Data.Count()/6);
    }
}

<DxGridDataColumn FieldName="ImageData">
    <CellDisplayTemplate>
        
    </CellDisplayTemplate>
</DxGridDataColumn>

<DxGrid Data="@employees" >
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="Email">
            <CellDisplayTemplate>
                <a href="@("mailto:" + (string)(context.Value))">@((string)(context.Value))</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
         <DxGridDataColumn FieldName="ID" Caption="Notes">
            <CellDisplayTemplate>
                <a class="d-block text-left" href="javascript:;"
                    @onclick="() => ShowDetails(context)">More Info...</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    Employee[]? employees;
    protected override async Task OnInitializedAsync() {
        employees = await EmployeeData.GetData();
    }
    public void ShowDetails(GridDataColumnCellDisplayTemplateContext context) {
        Employee CurrentEmployee = employees.Where(e => e.ID == (int)context.Value).FirstOrDefault();
        string EmployeeInfo = CurrentEmployee != null ? CurrentEmployee.Notes : "";
        // ...
    }
}