关于rowNumbers配置项 #

AG Grid 社区版没有rowNumbers这个有效配置项，你添加的该配置不会生效，这是旧版本或第三方衍生版本的废弃配置。

社区版实现行号显示的两种方式 #

方式1：自定义序号列（推荐）

直接在columnDefs中添加一列，通过valueGetter获取行索引并转换成序号（行索引从0开始，需+1），示例代码如下：

const columnDefs = [
  { 
    headerName: "STT", 
    valueGetter: params => params.node.rowIndex + 1,
    width: 80,
    sortable: false, // 禁止排序
    filter: false,   // 禁止筛选
    resizable: true  // 允许调整列宽（可选）
  },
  { field: "athlete" },
  { field: "country" },
  { field: "sport" },
  { field: "year" },
  { field: "gold" },
  { field: "silver" },
  { field: "bronze" },
];

const gridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  // 移除无效的rowNumbers配置
  columnDefs: columnDefs,
  rowData: null,
};

document.addEventListener("DOMContentLoaded", () => {
  const gridDiv = document.querySelector("#myGrid");
  const gridApi = agGrid.createGrid(gridDiv, gridOptions);

  fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
    .then((response) => response.json())
    .then((data) => {
      gridApi.setGridOption("rowData", data);
    });
});

对应的HTML代码不变：

<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<div id="myGrid" style="height: 500px"></div>

方式2：使用cellRenderer自定义渲染

如果需要更灵活的行号展示（比如添加前缀、格式化样式），可以用cellRenderer：

{ 
  headerName: "STT", 
  cellRenderer: params => `<span style="color: #666">${params.node.rowIndex + 1}</span>`,
  width: 80,
  sortable: false,
  filter: false
}

企业版额外方案 #

如果你使用AG Grid企业版，可以通过状态栏组件快速添加全局行号面板，配置如下：

const gridOptions = {
  // 其他配置...
  statusBar: {
    statusPanels: [
      { statusPanel: 'agRowNumberComponent', align: 'left' }
    ]
  }
};

内容的提问来源于stack exchange，提问作者Đạt Nguyễn Đình