ABGrid Engine

Сложное — просто

Движок для сложных табличных CRUD-интерфейсов

Вы делаете конфигурацию — остальное ABGrid Engine

Vanilla JavaScript · React · Vue · TypeScript

Код

                
function onActionClick (action, row, column, grid) {
  grid.msg("Действие : " + action,"Информация: Обработчик действий");
}
const cfgDemo = {
  readOnly:true,
  // ===== ЗАГРУЗКА ТАБЛИЦЫ =====
  autoLoad: true,
  data: {
    dataKey: 'gridP',
    url: '/api/demo/simple'
  },
  // ===== SCHEMA =====
  schema: {
    fields: {
      id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
      categoryId: {type: 'int', ui: {label: 'categoryId', grid: {visible: false}}},
      category: {type: 'string', ui: {label: 'Категория', grid: {visible: true, width: '20%'}}},
      name: {type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '60%'}}},
      price: {type: 'number', ui: {label: 'Цена', grid: {visible: true, width: '15%'}}},
      actions: { type: 'text',
        ui: { label: 'Действия',
              grid: { visible: true, width: '20%', colType: 'actions',
                      actions: {
                         edit: { classes: 'fa fa-pencil',
                                 'aria-label': 'Редактирование', hint: 'Редактирование' },
                         trash: { classes: 'fa fa-trash-can',
                                  'aria-label': 'Удалить', hint: 'Удалить' }
                      }
              }
        }
      }
    }
  },
  // ===== VIEW =====
  view: {
    height:230,
    checkbox: false,
      tableTitle: {
        enabled: true,
        caption:'Продукция',
        hint: 'Продукция нашего магазина',
        toggle: true
      },
    pager: {
      enabled: true,
        rpp: [3, 5, 10]
    }
  }
};
const gridDemo = new ABGrid("#demogrid", cfgDemo);
gridDemo.onActionClick(onActionClick);

Сравнение ABGrid Engine с другими Data Grid

ABGrid Engine не пытается быть лучшим Grid для любой задачи. Он создавался прежде всего для административных панелей, внутренних информационных систем и CRUD-heavy приложений, где таблица, формы, связанные данные и серверное взаимодействие образуют единый рабочий процесс. Ниже — практическое сравнение с популярными Data Grid, а также с React-admin — более широким React-фреймворком для административных и B2B-приложений. Поэтому часть критериев для React-admin относится к его собственным компонентам, а часть — к интегрируемым Grid-модулям.

Встроено — штатная возможность Платно — требуется коммерческая редакция или модуль Требует кода — реализуемо через API/свою интеграцию Ограниченно — возможность есть, но сценарий отличается или имеет ограничения Нет — не поддерживается или не является задачей продукта

Возможность	ABGrid Engine	AG Grid	Tabulator	Handsontable	MUI X Data Grid	DataTables	React-admin
Работа с данными
Vanilla JavaScript	Встроено	Встроено	Встроено	Встроено	Нет, React	Vanilla JavaScript: Нет (2.x требует jQuery; 3.x beta — без jQuery)	Нет, React
React / Vue	Адаптеры React и Vue	Встроено	Интеграция	Встроено	React	Интеграция	React
Server-side pagination	Встроено	Enterprise	Встроено	Встроено	Встроено	Встроено	Встроено — Data Provider
Server-side sorting	Встроено	Enterprise	Встроено	Встроено	Встроено	Встроено	Встроено — Data Provider
Server-side filtering	Встроено	Enterprise	Встроено	Встроено	Встроено	Встроено	Встроено — Data Provider
Мультисортировка	Встроено	Встроено	Встроено	Встроено*	Pro	Встроено	DatagridAG / настройка
Настраиваемое число строк на странице	Встроено	Встроено	Встроено	Встроено	Встроено	Встроено	Встроено
Progressive / infinite loading при прокрутке	Нет, планируется	Enterprise	Встроено	Ограниченно	Pro	Scroller	Infinite List / DatagridAG
Row virtualization / Virtual DOM	Нет	Встроено	Встроено	Встроено	Встроено	Scroller	DatagridAG
Итоги по текущей странице	Встроено	Встроено / настройка	Встроено	Встроено	Premium	Требует кода	Требует кода / DatagridAG
Глобальные / server-side итоги	Встроено	Enterprise	Ограниченно	Требует кода	Premium	Требует кода	Требует кода / API
sum / avg / min / max / count	Встроено	Enterprise	Встроено	Встроено	Premium	Требует кода	DatagridAG / AG Grid
Фильтрация, представление и выбор строк
Custom filter из произвольного UI	Встроено — setFilter(object/function)	Filter Model / custom components	Встроено / custom filters	Filters API / код	Filter Model / custom operators	Search API / код	Встроено / custom filters
Автоматическая передача filter в server request	Встроено — единый filter в payload	Server-Side Row Model, Enterprise	Remote filtering	DataProvider / server filtering	Server filtering / Data Source	Server-side processing	Встроено — Data Provider
Виртуальные / UI-only поля, отсутствующие в server row	Встроено — role: "grid"	Value getter / cell renderer	Formatter / настройка	Custom renderer / настройка	Value getter / renderCell	columns.render / настройка	Встроено — компоненты / render
Множественный выбор строк	Встроено	Встроено	Встроено	Встроено	Pro / Premium*	Select extension	Встроено
Одиночный выбор строки	Встроено	Встроено	Встроено — selectableRows: 1	Встроено / настройка	Встроено	Select: single	Встроено / настройка
Декларативная Actions column	Встроено — colType: "actions"	Cell renderer	Formatter / код	Custom renderer	Встроено — type: "actions"	columns.render / код	Встроено — buttons/components
Централизованный Actions handler с row/context	Встроено — onActionClick	Renderer callback / params	Cell callback / component	Renderer / hooks	Actions cell / params	Event handler / код	React handlers / RecordContext
Связанные и иерархические данные
Master–Detail	Встроено	Enterprise	Требует кода	Требует кода	Pro	Child rows / код	Relationships / композиция
Неограниченная иерархия Master–Detail	Встроено	Требует настройки/кода	Требует кода	Требует кода	Требует кода	Требует кода	Требует композиции / кода
Автоматическая загрузка и очистка Master–Detail цепочки	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Требует кода	Требует кода / state
Subgrid	Встроено	Detail Grid, Enterprise	Требует кода	Требует кода	Detail panel, Pro	Child rows	Встроено — expand panel
Subgrid на любом уровне Master–Detail	Встроено	Композиция / код	Требует кода	Требует кода	Требует кода	Требует кода	Композиция React-компонентов
Одновременные Master–Detail + Subgrid	Встроено	Композиция / код	Требует кода	Требует кода	Требует кода	Требует кода	Композиция / код
TreeGrid	Встроено	Enterprise	Встроено	Nested Rows	Pro	Нет	Enterprise — ra-tree / DatagridAG + AG Grid
Lazy server loading TreeGrid	Встроено	Enterprise	Требует интеграции	Требует интеграции	Pro	Нет	Enterprise / Data Provider
Tree-aware CRUD / createChild	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Нет	Enterprise — ra-tree
DetailsPanels, связанные с текущей строкой	Встроено	Требует кода	Требует кода	Требует кода	Detail panel	Требует кода	Expand / Show / custom layout
Автоматическое заполнение / очистка DetailsPanels	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Требует кода	React state / context
CRUD и формы
CRUD	Встроено	API / transactions	API	DataProvider	Встроено	Editor, платно	Сильная сторона / встроено
Отдельная встроенная CRUD-форма	EditForm	Требует кода	Требует кода	Нет, spreadsheet UX	Требует кода	Editor, платно	Встроено — Create / Edit + Forms
Форма генерируется из schema Grid	Встроено	Требует кода	Требует кода	Нет	Требует кода	Настройка Editor	JSON Schema Form — Enterprise
Режимы create / edit / createChild	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Editor / код	Create / Edit; createChild через tree/код
Валидация формы	Встроено	Редакторы / код	Встроено	Встроено	Встроено	Editor	Встроено
required / readOnly / visible по режиму формы	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Настройка / код	Props / permissions / код
Autocomplete editor	Встроено	Требует редактора/кода	Встроено	Встроено	Требует компонента/кода	Editor	Встроено — AutocompleteInput
Password editor + confirmOf	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Editor / код	PasswordInput + custom validation
File upload из EditForm	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Editor / настройка	FileInput + Data Provider
Multipart CRUD transport	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Настройка	Data Provider / настройка
Server-confirmed обновление строки без reload Grid	Встроено	API / transactions	API	Refetch после mutation	Встроено	Editor	Встроено — mutations/cache
Canonical row от сервера после update	Встроено	API	API / интеграция	DataProvider	Встроено	Editor	Встроено — Data Provider response
Интеграция с приложением
HTTP layer внутри Grid	Встроено	Datasource	Ajax	DataProvider	Data Source	Ajax	Data Provider / fetchJson
Request / response / error interceptors	Встроено	Через приложение	Hooks	Hooks / приложение	Через приложение	Callbacks / Ajax	Data Provider / lifecycle callbacks
Server-driven permissions / policy	Встроено	Требует кода	Требует кода	Требует кода	Требует кода	Требует кода	Auth Provider / canAccess
Toolbar permissions / requiresSelection	Встроено	Требует настройки/кода	Требует кода	Требует кода	Требует кода	Требует кода	Access Control / component logic
Встроенная 401 redirect policy	Встроено	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Auth Provider / checkError
Диалоги и уведомления из API	Встроено — msg / confirm / confirmEx / toast	Через приложение / custom UI	Ограниченно — alert(), без confirm / toast	Встроено — Dialog + Notification	Через MUI Dialog / Snackbar	Через приложение	Встроено — Confirm / Notification
Plugin / module architecture	Встроено	Modules	Modules	Plugins	Packages	Extensions	Packages / providers / hooks
Глобальный readOnly для CRUD-интерфейса	Встроено — блокирует create / update / delete	Настройка editing / application logic	Настройка editing / код	readOnly для Grid / cells	Настройка editing / код	View по умолчанию; с Editor — настройка	Permissions / resource config
Режим View с внешним управлением	External Controller — Grid эмитит intents, решения принимает приложение	Events / API / application state	Events / callbacks / приложение	Hooks / API / приложение	Controlled models / React state	Events / API / приложение	React state / hooks / contexts
Уровень приложения / Admin framework
Authentication	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Встроено — Auth Provider
Authorization / Access Control	Интеграция с приложением	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Встроено — canAccess / permissions
Fine-grained RBAC	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Enterprise — ra-rbac
Routing административного приложения	Не задача Grid	Не задача Grid	Не задача Grid	Не задача Grid	Не задача Grid	Не задача Grid	Встроено
i18n приложения	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Через приложение	Встроено — i18nProvider
Готовые layout / menu / navigation	Не задача Grid	Не задача Grid	Не задача Grid	Не задача Grid	Не задача Grid	Не задача Grid	Встроено
Единый abstraction layer для backend API	Встроено — HTTP / CRUD contract	Datasource	Ajax	DataProvider	Data Source	Ajax	Встроено — Data Provider
TypeScript / strong typing	Поддерживается — abgrid.d.ts	Встроено	Типы / интеграция	Встроено	Встроено	Типы экосистемы	Сильная сторона
Можно встроить в существующий SSR / server-rendered UI без SPA	Да	Да	Да	Да	Нет, React	Да	Нет, React application framework
Специализированные возможности и позиционирование
Spreadsheet UX	Нет	Ограниченно	Spreadsheet mode	Сильная сторона	Premium	Нет	Editable Datagrid / DatagridAG, Enterprise
Формулы	Нет	Ограниченно / код	Нет	Встроено	Premium	Нет	Через grid / custom code
Pivot	Нет; иерархическая детализация — Subgrid	Enterprise	Нет	Требует решения/кода	Premium	Нет	DatagridAG + AG Grid Enterprise
Встроенные Charts	Нет	Enterprise	Нет	Нет	Premium	Расширения / интеграция	Интеграция / custom components
Очень большие client-side datasets	Не является целью	Сильная сторона	Сильная сторона	Virtualization	Virtualization	Scroller / server-side	DatagridAG / virtualization
Основной сценарий	CRUD / business UI	Universal / Enterprise	General-purpose Grid	Spreadsheet	React / Material UI	HTML / data tables	React B2B / admin applications
История / зрелость продукта	Архитектурный подход развивается с 2013 года; публичный продукт новый	Зрелый продукт / большая экосистема	Зрелый продукт / развитая экосистема	Зрелый продукт / большая экосистема	Зрелый продукт / экосистема MUI	Зрелый продукт / большая экосистема	Зрелый продукт; развивается с 2016 года

* У Handsontable мультисортировка доступна как отдельная возможность, однако новый server-side DataProvider имеет собственные ограничения на совместное использование с MultiColumnSorting. В MUI X одиночный выбор доступен в MIT Data Grid, а полноценный множественный выбор строк относится к Pro/Premium; checkbox selection имеет отдельные возможности конфигурации. Архитектурный подход ABGrid — декларативная конфигурация, при которой типовые операции берёт на себя движок, — развивается автором с 2013 года; ABGrid Engine как публичный продукт является современной реализацией этого подхода. Коммерческие редакции и состав функций конкурирующих продуктов могут меняться; перед выбором рекомендуется свериться с их актуальной документацией.

Когда стоит выбрать ABGrid Engine

ABGrid Engine имеет смысл выбирать, если вы разрабатываете административную панель, внутреннюю информационную систему или другое CRUD-heavy приложение и хотите описывать Grid, формы редактирования, связанные данные и серверное взаимодействие преимущественно конфигурацией.

Особенно хорошо ABGrid подходит для интерфейсов со сложными связями между данными: Master–Detail может образовывать иерархию без заданного движком ограничения глубины, каждый Grid в этой цепочке может одновременно иметь собственный Subgrid, а загрузкой, сменой master-записи и каскадной очисткой связанных Grid управляет сам движок.

Если требуется именно динамический Pivot-анализ с перестройкой измерений по строкам и колонкам, сложная аналитика или встроенные графики, разумнее рассмотреть AG Grid или MUI X. Для иерархического представления агрегированных данных с раскрытием исходной детализации ABGrid использует Subgrid. Для spreadsheet-интерфейсов и формул лучше подходит Handsontable. Если нужен универсальный Vanilla JavaScript Grid с Virtual DOM и progressive loading, стоит рассмотреть Tabulator.

Если административная часть строится как полноценное React-приложение и нужны готовые routing, authentication/authorization, i18n, layout, menu и общая инфраструктура B2B-приложения, стоит рассмотреть React-admin. ABGrid занимает другой уровень: его можно встроить в уже существующее server-rendered или frontend-приложение и использовать как независимый движок сложных Grid/CRUD-интерфейсов, не переводя приложение на React SPA.

ABGrid Engine не является лучшим Grid для любой задачи. Он создавался как инструмент для построения сложных CRUD-oriented бизнес-интерфейсов с минимумом прикладного кода вокруг Grid.

Посмотреть ABGrid Engine в работе