列标题中的自定义图标，在 ag-grid react 中具有自定义排序功能

Question

Column header with sort icon

您好我正在尝试实现如图所示的列标题。我想不出一种方法来实现这一点。

我正在尝试在列标题中添加一个排序图标，单击该图标后，网格应根据自定义逻辑进行排序。

有两个部分，在标题中添加图标，然后赋予图标 onClick 功能。任何帮助我如何实现这一点将不胜感激。

谢谢你。

Answer 1

Ag-grid 具有内置排序功能，您也可以根据自己的要求进行自定义

有两种方法可以实现它

1. 通过添加 -> 启用单个列的排序可排序：真

   const columnDefs = [
       { field: 'name', sortable: true },
       { field: 'age', sortable: true },
       { field: 'address' },
   ];
   

   2.要对所有列启用排序，请在默认列定义中设置排序。

   const defaultColDef = {
       sortable: true
   };
   
   // If some fields doesn't need sort option, assign the value false to sortable
   const columnDefs = [
       { field: 'name' },
       { field: 'age' },
       // suppress sorting on address column
       { field: 'address', sortable: false },
   ];
   
   

   3. 自定义排序

   const columnDefs = [
       {
           field: 'age',
           // simple number comparator
           comparator: (valueA, valueB, nodeA, nodeB, isDescending) => valueA - valueB
       },
       {
           field: 'name',
           // simple string comparator
           comparator: (valueA, valueB, nodeA, nodeB, isDescending) => {
               if (valueA == valueB) return 0;
               return (valueA > valueB) ? 1 : -1;
           }
       }
   ];