ag-grid - 如何在 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;
  }

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