Ag网格仅在组值之间放置边框

时间:2020-08-13 06:17:02

标签: javascript reactjs ag-grid ag-grid-angular ag-grid-react

附加了我的广告链接[https://plnkr.co/edit/lnF09XtK3eDo1a5v]

我们是否可以选择在不同的组值之间放置一个边界。在此示例中,国家/地区为组,并说美国行已完成,是否可以获取底部边框来描述组值的结尾

1 个答案:

答案 0 :(得分:2)

您可以使用rowClassRules确定哪些行应具有某些样式。在您的情况下,您可能希望为组中第一行的border-top减去表中的第一行设置样式。这样吧

<AgGridReact
  ...
  rowClassRules={{
    "first-row-in-group": (params) => 
        params.node.rowIndex !== 0 && params.node.firstChild
  }}
/>

在您的CSS文件中

/* style expanded row group */
.first-row-in-group,
/* style collapsed row group */
.ag-row-group-contracted {
  border-top: tomato solid 1px !important;
}

实时演示

Edit Row Group Border