如何在Ag-grid中添加行标题？

Question

请参考下图。 （突出显示的部分是我在AG-Grid中所需的ROW标头）

Answer 1

我不确定这第一栏对您的功能用例。 不过，您可以通过将其添加到列定义中来实现此目标，如下所示。

var gridOptions = {
    // define grid columns
    columnDefs: [
        // using default ColDef
        {
            headerName: ' ',
            field: '__',
            width: 15,
            sortable: false,
            cellStyle: {
                // you can use either came case or dashes, the grid converts to whats needed
                backgroundColor: 'lightgrey', // whatever cell color you want
            },
        },
...
}

在此处创建了工作示例plnkr。

Answer 2

据我所知，ag-grid 没有任何对行标题的内置支持，但作为一种解决方法，您可以将第一列显示为行标题。我建议让整列与其他列（包括列标题，如果它不是空白的）相比看起来有点不同，这样就可以清楚地看到它们是列标题，而不是标准行数据。

示例列定义：

ColumnDefs: [ 
    { headerName: 'Column Title 1', field: 'Column1', minWidth: 100, headerClass: "upperLeftCell", cellStyle: {
            backgroundColor: 'AliceBlue', //make light blue
            fontWeight: 'bold' //and bold
        }
    },
    { headerName: 'Column Title 2', field: 'Column2', minWidth: 100 },
    { headerName: 'Column Title 3', field: 'Column3', minWidth: 100 }
]

您还可以使用左上角单元格在 SCSS 中设置样式，如下所示：

::ng-deep .ag-header-cell.upperLeftCell {
    background-color: aliceblue;
    font-weight: bold;
  }

在数据行中：您必须在第一列中输入每行所需的标题。