如何为AgGridReact的myDate列设置默认升序排序？

问题说明 #

使用AgGridReact时，尝试为myDate列（格式MM/DD/YYYY）设置默认升序排序，调用setSortModel时出现错误：params.api.setSortModel is not a function。相关代码如下：

组件代码 #

<AgGridReact
  onGridReady={onGridReady}
  columnDefs={columnDefs}
  rowData={pipelineData}
  gridOptions={gridOptions}
  onCellClicked={onCellClicked}
/>

列定义 #

const columnDefs = [
  // 其他列配置
  {
    headerName: 'My Date',
    field: 'myDate',
    unSortIcon: true,
    sortable: true,
    filter: true,
    resizable: true,
    suppressMenu: false,
    wrapText: true,
    autoHeight: true,
  }
];

失败的尝试代码 #

const onGridReady = (params: any) => {
  setGridApi(params.api);
  setGridColumnApi(params.columnApi);
  params.api.sizeColumnsToFit();

  const sort = [
    {
      colId: "myDate",
      sort: "asc",
    },
  ];

  params.api.setSortModel(sort); // 此处报错
};

解决方法 #

1. 直接在列定义中配置默认排序 #

这是最简洁的方式，无需额外API调用，直接在目标列的配置中添加sort: 'asc'：

const columnDefs = [
  // 其他列配置
  {
    headerName: 'My Date',
    field: 'myDate',
    unSortIcon: true,
    sortable: true,
    filter: true,
    resizable: true,
    suppressMenu: false,
    wrapText: true,
    autoHeight: true,
    sort: 'asc' // 新增此行设置默认升序
  }
];

2. 使用columnApi.applyColumnState替代旧API #

setSortModel是AgGrid旧版本的API，新版本已废弃，改用applyColumnState来设置列排序状态：

const onGridReady = (params: any) => {
  setGridApi(params.api);
  setGridColumnApi(params.columnApi);
  params.api.sizeColumnsToFit();

  params.columnApi.applyColumnState({
    state: [
      { colId: 'myDate', sort: 'asc' }
    ],
    defaultState: { sort: null } // 其他列默认不启用排序
  });
};

3. 通过gridOptions预配置排序模型 #

在gridOptions中直接定义sortModel，组件初始化时会自动应用该排序规则：

const gridOptions = {
  // 其他网格配置项
  sortModel: [
    { colId: 'myDate', sort: 'asc' }
  ]
};

内容的提问来源于stack exchange，提问作者Ar_