Если вы новичок и еще не читали нашу предыдущую статью. 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]