具有动态列定义的AG-GRID默认排序模型

npm install --save ag-grid-community ag-grid-react

yarn add ag-grid-community ag-grid-react

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const DynamicColumnsExample = () => {
  const [columnDefs, setColumnDefs] = useState([
    { headerName: 'ID', field: 'id', sortable: true },
    { headerName: 'Value', field: 'value', sortable: true },
    // ...其他动态列
  ]);

  const rowData = [
    { id: 1, value: 'A' },
    { id: 2, value: 'B' },
    // ...其他行数据
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        defaultColDef={{ sortable: true }}
        sortModel={[
          { colId: 'id', sort: 'asc' }, // 默认按ID升序排序
          { colId: 'value', sort: 'desc' } // 默认按Value降序排序
        ]}
      />
    </div>
  );
};

export default DynamicColumnsExample;