首页 > 解决方案 > Ag 网格仅在组值之间放置边框

问题描述

附上我的 plunker 链接 [https://plnkr.co/edit/lnF09XtK3eDo1a5v]

我们是否可以选择在不同的组值之间设置边界..在这个例子中,国家是组,假设美国的行已经完成,我们可以得到底部边框来描述组值的结尾吗

标签: javascriptreactjsag-gridag-grid-angularag-grid-react

解决方案


您可以使用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;
}

现场演示

编辑行组边框


推荐阅读