删除 headers 和单元格的水平开始和 end-gap

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

删除 headers 和单元格的水平开始和 end-gap

Remove the horizontal start- and end-gap for headers and cells

ag-grid

ag-grid-react