Если вы новичок и еще не читали нашу предыдущую статью. Checkout
Введение в ag-grid: https://medium.com/codalyze/getting-started-with-ag-grid-a-rich-performant-data-table-fb541debf5e9

Привет, разработчики! Как и в прошлой статье, мы проверили внедрение Ag-Grid в ReactJs. В этой статье мы узнаем о сортировке, фильтрах и filterParams в Ag-Grid.

Ag-Grid [ https://www.ag-grid.com/documentation/react/ ]

Готово к сетке

Когда компонент сетки монтируется и готовится, он запускает функцию обратного вызова с объектом в качестве аргумента, который имеет api и columnApi. Эти два API используются для применения различных функций, предоставляемых ag-grid. Итак, передайте onGridReady prop с функцией в качестве значения для хранения двух API в локальном состоянии.

Сортировка:

Сортировка в Ag-Grid стала очень простой. Все, что вам нужно сделать, это добавить свойство sortable: true в определение столбца.

Сортировка по умолчанию:

Если вы хотите иметь порядок сортировки по умолчанию, тогда addsortingOrder:['desc'], который даст вам порядок сортировки по умолчанию по убыванию. Свойство sortingOrder принимает массив значений «asc» и «desc».

Пользовательская сортировка:

Иногда возникают ситуации, когда сортировку нужно производить в соответствии с нашими потребностями. Например, нам нужно сравнить даты. Итак, мы можем написать собственную функцию сортировки для сравнения дат. Ag-Grid предоставляет функцию компаратора в columnDefination, которую можно использовать для определения нашего собственного метода сортировки.

Если вы хотите запустить функцию после завершения сортировки, есть свойство postSort. Вы должны передать эту опору в компонент AgGridReact.

ФИЛИТРЫ:

Вы можете фильтровать строки в сетке, используя свойство filter в определениях столбцов. Типы фильтров: 1) agTextColumnFilter, 2) agNumberColumnFilter, 3) agSetColumnFilter, 4) agDateColumnFilter

Если вы хотите применить какие-либо фильтры вручную, когда сетка будет готова, вы можете использовать grid-api для применения фильтров. Сначала получите экземпляр фильтра любого столбца с помощью getFilterInstance метода, доступного в api. Затем установите модель для экземпляра с помощью setModel с различными параметрами, такими как тип, фильтр и т. Д. И, наконец, не забудьте применить фильтры, вызвав метод onFilterChanged.

Также есть getFilterModel, который предоставит фильтры для всех столбцов, и setFilterModel, который установит фильтры для всех столбцов.

FilterParams:

Если вы хотите настроить правила фильтрации по своему усмотрению, в определении столбца есть свойство filterParams, где мы должны предоставить такие параметры в объекте, как filterOptions, defaultOption, caseSensitive, textCustomComparator и т. Д.

Надеюсь, эта статья поможет вам разобраться в функциях сортировки, фильтрации и filterParams в Ag-grid React.

Автор Харишпонна
Для любых разъяснений обращайтесь: www.linkedin.com/in/harish-ponna-b9b885ba

Не стесняйтесь делиться своими отзывами на [email protected]