如何更改农业网格行组缩进？

Question

我想为Tree Data中的每个内部组更改（增加/减少）缩进的大小（当前默认值为28px）。但是，在文档中找不到相同的任何配置选项。我能找到的最接近的东西是suppressPadding，它完全禁止填充。我尝试使用DOM穿孔CSS，但发现每个级别都有一个不同的CSS类（例如ag-row-group-indent-2），这使得在容器组件中编写通用CSS规则变得很困难。

Answer 1

当前，我正在循环覆盖样式，这似乎很有效

// Taken from https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-theme-base/sass/parts/_grid-layout.scss
// support 20 levels here because row group indentation is used for tree data which can be quite deep
@for $i from 1 to 20 {
    .ag-row-group-indent-#{$i} {
        padding-left: $i * 8px;
    }

    .ag-row-level-#{$i} .ag-row-group-leaf-indent {
        margin-left: 40px;
    }
}

Answer 2

您可以添加一个cellStyle回调，该回调根据每个单元格的当前组级别计算padding-left的值。

defaultColDef: {
  cellStyle: (params) => {
    const { level } = params.node;
    const groupCell = params.value === params.node.key;
    const indent = 28; // change this value to your liking

    if (groupCell) {
      return {
        paddingLeft: (level + 1) * indent + "px"
      };
    }
  }
},

如果使用这种方法，请记住从agGrid抑制初始的css填充值，或者同时从agGrid抑制，并且填充值将累加起来。

.ag-cell-wrapper.ag-row-group[class*="ag-row-group-indent"],
.ag-cell-wrapper.ag-row-group-leaf-indent[class*="ag-row-group-indent"] {
  padding-left: 0;
}

实时演示