删除标题和单元格的水平起始和结束间隙

Question

我想删除列边框和数据之间的间隙。我只是希望将数据压到一边，就像在 Excel 中一样。我该怎么做？

Answer 1

不确定您使用的是哪个主题，但看起来默认主题是 theme-alpine，在示例中这就是使用的主题。如果是这样，您可以在 CSS 文件末尾重写

left-padding

属性，如下所示：

.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell {
        padding-left:  0px !important;
        padding-right: 0px !important;
}

对于其他行，似乎您可以在代码中完成并在columnDefs中设置样式，如下所示：

// Create column definitions
const columnDefs = [
{
        // ...
        cellStyle: { 'padding-left': 0 }
        // ...
}]

// Create grid options
const gridOptions = {
        columnDefs: columnDefs,
};

// Grid creation
new agGrid.Grid(gridDiv, gridOptions);

如果您使用 Sass，可能还有另一种可能使用此处描述的主题参数，特别是这个：

// Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height)
cell-horizontal-padding: ag-derived(grid-size, $times: 3),

参考
https://www.ag-grid.com/javascript-data-grid/themes-customising/#customising-themes-using-css-rules

Answer 2

AG Grid 有不同的 css 自定义属性来自定义表格样式规范。
您可以在您使用的主题中使用 override

--ag-cell-horizontal-padding

自定义属性来定义标题和普通行单元格的水平填充。

  .ag-theme-alpine {
    --ag-cell-horizontal-padding: 0;
  }

参考： https://www.ag-grid.com/react-data-grid/global-style-customization-compactness/