ag-grid存在明细行时如何将主行高度设置为小于42px

要在带明细行的主网格中将主行高度调整到42px以下，按以下方式配置即可：

• 首先放开主网格默认的最小行高限制：在主网格配置项中添加suppressRowHeightMinLimit: true，这个配置用来关闭框架默认强制设置的42px最小行高约束，不开启的话哪怕自定义行高返回更小值，也会被框架强制修正为42px。
• 在主网格的getRowHeight回调中区分主行和明细行，给主行返回你需要的目标高度值即可，你之前写的明细行高度调整逻辑可以直接保留，参考配置：

const gridOptions = {
  // 其余原有业务配置保持不变
  masterDetail: true,
  suppressRowHeightMinLimit: true,
  getRowHeight: (params) => {
    // 匹配到明细行时走原有明细高度逻辑
    if (params.node.detail) {
      return 你之前配置的明细行高度
    }
    // 主行返回小于42px的目标高度，例如38
    return 38
  },
  detailGridOptions: {
    // 明细网格的原有配置无需改动
  }
}

• 如果配置完发现主行内容上下留白和设置的行高不匹配，可以通过自定义CSS调整单元格内边距适配：

/* 替换成你实际使用的grid主题类名即可 */
.ag-theme-quartz .ag-cell {
  padding-top: 7px;
  padding-bottom: 7px;
}

如果你使用的是29.0以下的旧版本，框架还没提供suppressRowHeightMinLimit配置项，可以直接通过CSS覆盖强制取消行高最小值限制：

.ag-row {
  min-height: unset !important;
}

问题场景参考截图：

内容的提问来源于stack exchange，提问作者Aditya Sethi