Чем заменить GridView: сравнение QuickGrid, MudBlazor DataGrid, AG Grid и простых таблиц

Что на самом деле делал ваш GridView

Прежде чем выбирать замену, посмотрите на свои гриды трезво. GridView умел многое: сортировку, постраничный вывод, редактирование строки, выбор, шаблонные колонки. Но в типичном проекте большинство таблиц используют одну-две возможности. Справочник с сортировкой и пагинацией, отчёт только для чтения, список заказов с кнопкой «Открыть».

Составьте простую таблицу по всем экранам: объём данных, нужна ли сортировка и фильтры, редактируется ли строка прямо в таблице, есть ли группировка, итоги, экспорт в Excel. Почти всегда окажется, что 70-80% гридов закрываются самым простым решением, а сложные возможности нужны на двух-трёх экранах. Ошибка, которую делают чаще всего: выбрать самый мощный компонент для всех экранов сразу и платить за его сложность там, где она не нужна.

QuickGrid: минимум от Microsoft

QuickGrid входит в ASP.NET Core начиная с .NET 8 (пакет Microsoft.AspNetCore.Components.QuickGrid). Это намеренно небольшой компонент: колонки свойств и шаблонные колонки, сортировка, постраничный вывод через Paginator, виртуализация для длинных списков. Источник данных может быть IQueryable, и с адаптером для EF Core сортировка и Skip/Take выполняются в базе.

Редактирования строк, группировки и встроенного UI фильтров нет. Фильтр делается своим полем ввода над таблицей и условием в запросе, что для большинства экранов даже понятнее пользователю. Внешний вид задаётся вашим CSS, без навязанной дизайн-системы.

@using Microsoft.AspNetCore.Components.QuickGrid
@inject NorthwindContext Db

<input @bind="search" @bind:event="oninput" placeholder="Поиск по компании" />

<QuickGrid Items="Filtered" Pagination="pager">
    <PropertyColumn Property="c => c.CompanyName" Title="Компания" Sortable="true" />
    <PropertyColumn Property="c => c.City" Title="Город" Sortable="true" />
    <TemplateColumn Title="">
        <a href="customers/@context.CustomerID">Открыть</a>
    </TemplateColumn>
</QuickGrid>
<Paginator State="pager" />

@code {
    private string search = "";
    private PaginationState pager = new() { ItemsPerPage = 20 };

    // фильтр уходит в SQL вместе с сортировкой и пагинацией
    private IQueryable<Customer> Filtered =>
        Db.Customers.Where(c => c.CompanyName.Contains(search));
}

MudBlazor DataGrid: богатый грид в дизайн-системе

MudBlazor это бесплатная библиотека компонентов под лицензией MIT в стиле Material Design. Её MudDataGrid ближе всего к GridView по возможностям: сортировка по нескольким колонкам, встроенные фильтры, группировка, итоги, редактирование в строке и в диалоге, выбор строк, закреплённые колонки. Серверная загрузка делается через параметр ServerData: компонент передаёт вам состояние (страница, сортировка, фильтры), вы возвращаете порцию данных.

Обратная сторона: вы получаете Material Design целиком. Если у проекта уже есть свой визуальный стиль, придётся либо принять стиль MudBlazor для всего интерфейса, либо тратить время на переопределение тем. Смешивать на одной странице MudBlazor и самописные компоненты можно, но выглядит это обычно неряшливо.

AG Grid: тяжёлая артиллерия

AG Grid это JavaScript-грид, который используют в банковских и аналитических интерфейсах. Он рассчитан на десятки и сотни тысяч строк с виртуализацией, сложные фильтры, закрепление, перетаскивание колонок, редактирование с валидацией. Версия Community распространяется по MIT, а группировка строк, сводные таблицы, экспорт в Excel и серверная модель строк для больших наборов данных находятся в платной Enterprise.

В Blazor AG Grid подключается через JS interop или через сторонние обёртки, в Razor Pages и MVC просто как обычная JS-библиотека с JSON-API на сервере. Это самый мощный вариант, но и самый дорогой в сопровождении: два мира (C# и JavaScript), отдельная логика на клиенте, лицензия на разработчика для Enterprise.

Простая HTML-таблица

Не стоит недооценивать обычный table, отрисованный на сервере. Отчёт на 50 строк без сортировки, список последних операций, таблица характеристик товара: для них любой компонент избыточен. Серверный рендеринг Razor Pages или статический SSR в Blazor отдаёт готовый HTML, который быстро загружается, хорошо печатается и доступен для экранных дикторов без дополнительных усилий.

Сортировку и пагинацию для такой таблицы можно сделать параметрами в URL: ссылка в заголовке колонки меняет ?sort=city&page=2, сервер возвращает новую страницу. Это старый и надёжный приём, который работает без JavaScript и сохраняет состояние в адресе, его можно отправить коллеге ссылкой.

Как выбрать

Свести выбор к одному правилу не получится, но ориентиры такие:

• таблица только для чтения, до сотни строк: простая HTML-таблица;
• справочники и списки с сортировкой, пагинацией и своим дизайном: QuickGrid;
• приложение целиком на компонентной библиотеке, много форм с редактированием и фильтрами: MudBlazor DataGrid;
• аналитика, огромные объёмы, группировка и сводные таблицы на клиенте: AG Grid, скорее всего Enterprise;
• смешанный проект: QuickGrid по умолчанию и точечно более тяжёлый грид для двух-трёх экранов.

Как это делают сегодня

Вопросы и ответы