Ag grid что это

Обновлено: 03.07.2024

Имея на руках такое тз, было решено использовать последний Angular в связке с Ag-Grid, что бы не тратить драгоценное время.

Начинается все довольно стандартно, установка и создание стандартного Angular приложения:

Устанавливаем сам Angular

Создаем новый проект

И можем запускать

Все, ничего нового или сложного здесь нет. Вся процедура занимает от силы 20 минут и мы уже имеем работающее приложение. Можем начинать навешивать на него то что нам нужно.

Начинаем с простого.

Bootstrap. Почему он? Просто, быстро эффективно. В рамках той задачи которая есть у нас, нам его вполне хватит. По сути это несколько полей для ввода, пара кнопок разных по цвету и все. Ставим третью версию вместе с jQuey:

Затем отправляемся в файл angular-cli.json и добавляем в него:

И готово, отныне на ваших страницах Bootstrap будет работать как нужно. А мы продолжаем.

Ag-Grid Для себя его выбрал, так как есть опыт работы с этим компонентом, он достаточно гибкий, и как-никак лучше подходит для нашей задачи. Для полноценного его использование ставим:

Затем идем в app.module.ts и импортируем нужные нам компоненты:

Установленный нами install ag-grid понадобиться нам чуть позже. Так же добавляем в наш файл

Хочу обратить внимание на AgGridModule.withComponents это позволит нам добавлять и использовать написанные нами компоненты в Ag-Grid. LinkComponent который там есть, это наш компонент для отрисовки данных в виде ссылки. Позже вернемся к нему.

Так же создаем папки Components, Services, View-Models, в них свои компоненты, сервисы для них и подключаем все это дело, думаю здесь никаких вопросов и проблем быть не должно. Вернемся лучше к нашему Ag-Grid.

В компоненте где используется Ag-Grid подключаем:

На данный момент мы конечно не будем использовать все подключеные компоненты грида, но на будущее они мне нужны. Вы же естественно можете что то убрать или добавить по желанию. Наш компонент для ссылок так же подключаем.

Настало время начинать создать грид. В целом у меня получилось вот так:

А в html нашего компонента грид подключаем вот так:

Но давайте по порядку. Для того что бы колонка была и заполнилась нужными нам данными, необходим минимум, это ее название и fieldid. Если обратите внимание на cellRendererFramework во второй колонке, то это и есть тот самый параметр который позволяет нам отрисовывать данные в колонке так как мы захотим. Давайте посмотрим как устроен этот компонент внутри.

Вот и все, в params у нас хранится содержимое нужной ячейки. Если быть более конкретным то в params.value. В params.data мы можем увидеть все данные выбранной строки в гриде, нам например понадобится exampleID, для того что бы переходить на следующую страницу с нужным ID записи. Шаблон этого компонента выглядит вот так:

Тут мы пойдем немного дальше и поговорим о роутинге, но пока о нашей ссылке. Как мы видим, нажатие на данную строку будет отправлять нас на страничку выбранной записи, добавляя ее ID в линк, благодаря к чему впоследствии мы сможем обратиться к серверу который вернет нам нужную запись.

Роутинг я сделал достаточно просто.

Это все что нам нужно на данный момент. Думаю здесь заострять внимание особо не нужно. В следующих статьях более подробно заострим внимание.

Вернемся к нашему компоненту с гридом. Как рисовать колонки, и менять отображение данных в них мы разобрались. Теперь нужно заполнить грид этими данными. Тут все тоже достаточно просто:

Обращаемся к нашему сервису, который вернет нам json с данными. this.examples у нас examples: examplesViewModel[]; наша view модель выглядит скажем так:

Ее мы так же импортируем в наш компонент. И наши fieldid в гриде должны соответствовать тому что есть в нашей модели. И вуаля, наши данные оказываются там где нам нужно. В последствии например если при наличии серверной фильтрации, мы хотим обновить данные в гриде, сделать это можем так:

И данные в нашем гриде обновятся. Ну а о второй странице говорить особо нечего. Получаем данные о записи с нужным id и работаем с ними. Вот так вот буквально за пару часов можно сделать простенькое приложение, с гридом и блекджеком. В следующей статье подробнее поговорим о функционале грида и что с ним можно делать, наш компонент рисующий ссылку это только самая вершина айсберга. Так же расскажу о реализации пагинации и сортировки в гриде.

Свойства грид-элементов

Шкала CSS Grid

Данная шкала показывает, как вычисляются строки и колонки при их объединении. Для этого используется два вида единиц:

На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:

При использовании функции repeat() мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:

Это аналогично следующему:

Небольшая заметка

При использовании единицы измерения fr , доступное пространство делится на равные части.

В данном случае доступное пространство делится на 4 равные части.

grid-columns: start/end

Данное свойство позволяет объединять колонки. Оно является сокращением для:

Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.

Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:

Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.

Каждый класс .box-* по умолчанию имеет такой масштаб (scale):

Это можно переписать с помощью ключевого слова span :

Давайте "присвоим" 8 фракций .box-1 :

Небольшая заметка

Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.

Как использовать ключевое слово span

Считается, что использование span делает код более читаемым.

В этом случае нам просто нужно добавить к box-1 8 частей:

Это даст такой же результат.

grid-row: start/end

Данное свойство позволяет объединять строки. Оно является сокращением для:

Теперь сосредоточимся на строках:

Давайте добавим к box-1 9 частей:

Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.

Вот вариант со span :

grid-area

Сначала нам нужно настроить grid-temlate-areas , о чем мы говорили выше. После этого в дочерних классах определяются названия областей, которые используются в родительском классе:

Определяем grid-template-areas в родительском классе:

Затем определяем grid-area в дочерних классах:

justify-self

Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:

align-self

Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:

Angular Data Grid: Get Started with AG Grid

AG Grid is the industry standard for Angular Enterprise Applications. Developers using AG Grid are building applications that would not be possible if AG Grid did not exist.

Please refer to our Compatibility Chart for Supported Versions of Angular & AG Grid.

Below we walk through the necessary steps to add AG Grid (both Community and Enterprise are covered) to an Angular project and configure some grid features. In particular, we will go through the following steps:

Add AG Grid to Your Project

We are passing --style scss to the app scaffolding command so that we may customise the grid theme look through Sass variables.

If everything goes well, ng serve has started the web server. You can open your app at localhost:4200.

The withComponents call is necessary for the grid to be able to use Angular components as cells / headers (pre Ivy only) - you can ignore it for now.

The next step is to add the AG Grid styles - replace the content of src/styles.scss with the following code:

The code above imports the grid "structure" stylesheet ( ag-grid.css ), and one of the available grid themes: ( ag-theme-alpine.css ). The grid ships several different themes; pick one that matches your project design. You can customise it further with Sass variables, a technique which we will cover further down the road.

The code above presents two essential configuration properties of the grid - the column definitions ( columnDefs ) and the data ( rowData ). In our case, the column definitions contain three columns; each column entry specifies the header label and the data field to be displayed in the body of the table.

This is the ag-grid component definition, with two property bindings - rowData and columnDefs . The component also accepts the standard DOM style and class . We have set the class to ag-theme-alpine , which defines the grid theme. As you may have already noticed, the CSS class matches the name of CSS file we imported earlier.

If everything works as expected, you should see a simple grid like the one on the screenshot:

Enable Sorting And Filtering

After adding the property, you should be able to sort the grid by clicking on the column headers. Clicking on a header toggles through ascending, descending and no-sort.

As with sorting, enabling filtering is as easy as setting the filter property:

With this property set, the grid will display a small column menu icon when you hover the header. Pressing it will display a popup with a filtering UI which lets you choose the kind of filter and the text that you want to filter by.

Fetch Remote Data

The above code turns the rowData from a hard-coded array to an Observable . For the grid to work with it, we need to add an async pipe to the property:

Being a programmer is a hectic job. Just when we thought that we are done with our assignment, the manager shows up with a fresh set of requirements! It turned out that we need to allow the user to select certain rows from the grid and to mark them as flagged in the system. We will leave the flag toggle state and persistence to the backend team. On our side, we should enable the selection and, afterwards, to obtain the selected records and pass them with an API call to a remote service endpoint.

Well, we cheated a bit - calling alert is not exactly a call to our backend. Hopefully you will forgive us this shortcut for the sake of keeping the article short and simple. Of course, you can substitute that bit with a real-world application logic after you are done with the tutorial.

Grouping is a feature exclusive to AG Grid Enterprise. You are free to trial AG Grid Enterprise to see what you think. You only need to get in touch if you want to start using AG Grid Enterprise in a project intended for production.

In addition to filtering and sorting, grouping is another effective way for the user to make sense out of large amounts of data.

Then, add the import to app.module.ts :

If everything is ok, you should see a message in the console that tells you there is no enterprise license key. You can ignore the message as we are trialing. In addition to that, the grid got a few UI improvements - a custom context menu and fancier column menu popup - feel free to look around:

Add the the autoGroupColumnDef and defaultColDef properties to the template too:

There we go! The grid now groups the data by make , while listing the model field value when expanded. Notice that grouping works with checkboxes as well - the groupSelectsChildren property adds a group-level checkbox that selects/deselects all items in the group.

Customise the Theme Look

If everything is configured correctly, the second row of the grid will get slightly darker. Congratulations! You now know now bend the grid look to your will - there are a few dozens more Sass variables that let you control the font family and size, border color, header background color and even the amount of spacing in the cells and columns. The full theme parameter list is available in the themes documentation section.

AG Grid & Angular Compatibility Chart

Angular Version	AG Grid Versions
6	18 - 22
7 - 9	18 - 23+ (23 recommended for Angular 9)
7 - 10+	24+ (24+ for Angular 10)

With this Angular grid tutorial, we managed to accomplish a lot. Starting from the humble beginnings of a three row / column setup, we now have a grid that supports sorting, filtering, binding to remote data, selection and even grouping! While doing so, we learned how to configure the grid, how to access its API object, and how to change the styling of the component.

Want to know more?

Want to see some full examples of customising AG Grid using Angular components? See this blog written by Max Koretskyi (aka Angular in Depth Wizard) Learn to customise Angular grid in less than 10 minutes.

A full working examples of AG Grid and Angular can be found in Github, illustrating (amongst others) rich grids, filtering with angular components and master/detail.

Свойства грид-контейнера

Начнем со свойств родительского элемента.

grid-template-columns

Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .

Добавим строку в style.css :

значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину

grid-template-rows

Данное свойство используется для определения количества и высоты строк. При этом, можно определять как высоту каждой колонки в отдельности, так и устанавливать высоту всех строк с помощью функции repeat() .

Изменим строку в style.css :

grid-template-areas

Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.

Это можно считать схемой макета:

Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:

grid-template-areas : родительское свойство, создающее схему
grid-area : дочернее свойство, которое использует схему

Создаем схему

Применяем схему

Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.

column-gap

Данное свойство используется для добавления отступа между колонками.

Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .

row-gap

Данное свойство используется для добавления отступов между строками.

Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .

justify-items

Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:

Добавим еще один контейнер в HTML :

И немного изменим CSS :

align-items

Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:

justify-content

Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:

align-content

Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:

Полное визуальное руководство/шпаргалка по CSS Grid

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Архитектура CSS Grid

Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.

Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).

К слову, если вас интересует Флекс, вот соответствующая статья.

Погодите-ка

Давайте разберемся с отношениями между родительским и дочерними элементами.

Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .

Что такое CSS Grid ?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

Компьютер

Телефон

Настройка проекта

Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:

Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
Создаем файлы index.html и style.css
Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его

Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.

Все готово, можно приступать к делу.

Создаем 3 контейнера внутри body :

Шаг 1

Шаг 2

Немного стилизуем body :

Шаг 3

Стилизуем все контейнеры:

Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.

Шаг 4

Добавим небольшой отступ между контейнерами:

Схема CSS Grid

Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:

родительские (свойства грид-контейнера) и
дочерние (свойства грид-элементов)

Обратите внимание: красным цветом отмечены сокращения для свойств:

К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.

Заключение

Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.

VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.

Элемент управления Grid

Табличные элементы управления (обычно в их названии присутствуют слова Table или Grid) широко используются при разработке GUI. Так получилось, что на работе мы используем С++ и MFC для разработки пользовательского интерфейса. В начале мы использовали CGridCtrl — общедоступную и довольно известную реализацию грида. Но с некоторого времени он перестал нас устраивать и появилась на свет собственная разработка. Идеями, лежащими в основе нашей реализации, я хочу с вами здесь поделиться. Есть задумка сделать open source проект (скорее всего под Qt). Поэтому данную заметку можно рассматривать как «Proof Of Concept». Конструктивная критика и замечания приветствуются.

Причины, по которым меня не устраивают существующие реализации я опущу (это тема для отдельной заметки).
Проекты у нас инженерно-научные, с богатой графикой, и списки и таблицы используются повсеместно. Поэтому новый грид должен был обеспечивать гибкую кастомизацию, хорошее быстродействие и минимальное потребление памяти при показе больших объемов информации. При разработке я старался придерживаться следующим правилом: реализуй функциональность максимально обобщенно и абстрактно, но не во вред удобству использования и оптимальности работы. Конечно, это правило противоречиво, но насколько мне удалось соблюсти баланс — судить вам.

Чтобы с чего-то начать, давайте попробуем дать определение элементу управления grid. Для сохранения общности можно сказать, что grid — это визуальный элемент, который разбивает пространство на строки и столбцы. В результате получается сетка ячеек (место пересечения строк и столбцов), внутри которых отображается некоторая информация. Таким образом у грида можно различить два компонента: структуру и данные. Структура грида определяет как мы будем разбивать пространство на строки и столбцы, а данные описывают, собственно, то, что мы хотим видеть в получившихся ячейках.

Главное свойство Count — количество линий, из которых состоит Lines
Каждая линия может менять свой размер (строка высоту, а столбец — ширину)
Линии можно переупорядочивать (строки сортировать, столбцам менять порядок)
Линии можно скрывать (делать невидимыми для пользователя)

Комментарии и некоторые служебные функции и поля опущены для наглядности.
Вы можете заметить, что в классе есть функции GetAbsoluteLineID и GetVisibleLineID . Так как мы позволяем перемешивать и скрывать линии, то абсолютный и видимый индекс линии различаются. Надеюсь картинка наглядно показывает эту ситуацию.

Также нужно сделать пояснение по поводу строки
Здесь определён сигнал (так он называется в Qt или boost). С появлением С++11 и std::function, можно легко написать простую реализацию signals/slots, чтобы не зависеть от внешних библиотек. В данном случае мы определили эвент в классе Lines, и к нему можно подключать любую функцию или функтор. Например грид подключается к этому эвенту и получает оповещение, когда экземпляр Lines меняется.

Таким образом структура грида у нас представлена двумя экземплярами Lines:

Переходим к данным. Каким образом давать гриду информацию о том, какие данные он будет отображать и как их отображать? Здесь уже всё изобретено до нас — я воспользовался триадой MVC (Model-View-Controller). Начнем с элемента View. Так же как класс Lines определяет не одну линию, а целый набор, определим класс View как нечто, что отображает какие-то однородные данные в некотором подмножестве ячеек грида. Например, у нас в первом столбце будет отображаться текст. Это означает, что мы должны создать объект, который умеет отображать текстовые данные и который умеет говорить, что отображаться эти данные должны в первой колонке. Так как данные у нас могут отображаться разные и в разных местах, то лучше реализовать эти функции в разных классах. Назовем класс, который умеет отображать данные, собственно View, а класс, который умеет говорить где данные отображать Range (набор ячеек). Передавая в грид два экземпляра этих классов, мы как раз указываем что и где отображать.

Давайте подробнее остановимся на классе Range. Это удивительно маленький и мощный класс. Его главная задача — быстро отвечать на вопрос, входит ли определенная ячейка в него или нет. По сути это интерфейс с одной функцией:

Таким образом можно определять любой набор ячеек. Самыми полезными конечно же будут следующие два:
Первый класс определяет набор из всех ячеек, а второй — набор из одного конкретного столбца.

Сколько надо места, что бы отобразить данные (например чтобы колонкам установить ширину, достаточную для отображения текста — режим Fit)
Дай текстовое представление данных (чтобы скопировать в буфер обмена как текст или отобразить в tooltip)

Для наглядности рассмотрим пример в котором в первом столбце отображаются чекбоксы и текст. Во втором столбце представлены радио-кнопки, квадратики с цветом и текстовое представление цвета. И еще в одной ячейке есть звёздочка.

Например для чекбокса мы будем использовать LayoutLeft, который спросит у View его размер и «откусит» прямоугольник нужного размера от прямоугольника ячейки. А для текста мы будем использовать LayoutAll, к которому в параметре cellRect перейдет уже усеченный прямоугольник ячейки. LayoutAll не будет спрашивать размер у своего View, а просто «заберет» все доступное пространство ячейки. Можно напридумывать много разных полезных Layouts, которые будут комбинироваться с любыми View.

Возвратимся к классу Grid, для которого мы хотели задавать данные. Получается, что хранить мы можем тройки <Range, View, Layout>, которые определяют в каких ячейках, каким образом отображать данные, плюс как эти данные должны быть расположены внутри ячейки. Итак класс Grid у нас выглядит примерно так:

Нужно отфильтровать m_data и оставить только те тройки, для которых наша ячейка попадает в Range
Определить прямоугольник для ячейки
Определить прямоугольники для всех View
Отрисовать все View в рассчитанные для них прямоугольники

Этот класс в конструкторе выполняет первые три пункта и сохраняет результат в m_cache. При этом функция Draw получилась достаточно легковесной. За эту легковесность пришлось заплатить в виде m_cache. Поэтому создавать экземпляры такого класса на каждую ячейку будет накладно (мы ведь договорились не иметь данных, зависящих от общего количества ячеек). Но нам и не надо иметь экземпляры CellCache для всех ячеек, достаточно только для видимых. Как правило в гриде видна небольшая часть всех ячеек и их количество не зависит от общего числа ячеек.

Таким образом у нас появился еще один класс, который управляет видимой областью грида, хранит CellCache для каждой видимой ячейки и умеет быстро рисовать их.

Когда пользователь меняет размер грида или скроллирует содержимое, мы просто выставляем новый visibleRect в этом объекте. При этом переформируется m_cells, так чтобы содержать только видимые ячейки. Функциональности GridCache достаточно, что бы реализовать read-only грид.

Разделение классов Grid и GridCache очень полезно. Оно позволяет, например, создавать несколько GridCache для одного экземпляра Grid. Это может использоваться для реализации постраничной печати содержимого грида или экспорта грида в файл в виде изображения. При этом объект GridWindow никаким образом не модифицируется — просто в стороне создается GridCache, ссылающийся на тот же экземпляр Grid, в цикле новому GridCache выставляется visibleRect для текущей страницы и распечатывается.

Как же добавить интерактивности? Здесь на первый план выходит Controller. В отличие от остальных классов, этот класс определяет интерфейс со многими функциями. Но лишь потому, что самих мышиных событий достаточно много.

Так же как и для отрисовки, для работы с мышью нам нужны только видимые ячейки. Добавим в класс GridCache функции обработки мыши. По положению курсора мыши определим какая ячейка (CacheCell) находится под ней. Далее в ячейке для всех View, в чей прямоугольник попала мышь, забираем Controller и вызываем у него соответствующий метод. Если метод возвратил true — прекращаем обход Views. Данная схема работает достаточно быстро. При этом нам пришлось в класс View добавить ссылку на Controller.

Осталось разобраться с классом Model. Он нужен как шаблон адаптер. Его основная цель — предоставить данные для View в «удобном» виде. Давайте рассмотрим пример. У нас есть ViewText который умеет рисовать текст. Что бы его нарисовать в конкретной ячейке, этот текст надо для ячейки запросить у объекта ModelText, который, в свою очередь, лишь интерфейс, а его конкретная реализация знает откуда текст взять. Вот примерная реализация класса ViewText:

Таким образом несложно угадать какой интерфейс должен быть у ModelText:

Обратите внимание, мы добавили сеттер для того, что бы им мог воспользоваться контроллер. На практике наиболее часто используется реализация ModelTextCallback

Эта модель позволяет при инициализации грида назначить лямбда функции доступа к настоящим данным.
Ну а что же общего у моделей для разных данных: ModelText, ModelInt, ModelBool . В общем-то ничего, единственное, что про них всех можно сказать, что они должны информировать все заинтересованные объекте о том, что данные изменились. Таким образом базовый класс Model у нас примет следующий вид:

В итоге наш грид разбился на множество небольших классов, каждый из которых выполняет четко определенную небольшую задачу. С одной стороны может показаться, что для реализации грида представлено слишком много классов. Но, с другой стороны, классы получились маленькими и простыми, с четкими взаимосвязями, что упрощает понимание кода и уменьшает его сложность. При этом всевозможные комбинации наследников классов Range, Layout, View, Controller и Model дают очень большую вариативность. Использование лямбда функций для ModelCallback позволяют легко и быстро связывать грид с данными.

В следующей заметке я опишу как реализовать стандартную функциональность грида: selection, sorting, column/row resize, printing, как добавить заголовок (фиксированные верхние строки и левые столбцы).
Раскрою небольшой секрет — все что описано в данной статье уже достаточно для реализации вышеперечисленного. Если какую-то функциональность я пропустил, пожалуйста, пишите в комментариях и я опишу их реализацию в следующей статье.