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

Question

I want to remove the gap between column border and data. I simply want the data pressed up to the side, as it would in Excel. How can I do this?

Answer 1

Not sure which theme you're using but looks like the default one is theme-alpine and in the examples this is the theme used. If so, you could override the left-padding property like this at the end of a CSS file:

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

For the other rows, it seems you can do it in the code and set the style in the columnDefs as follows:

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

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

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

If you're using Sass, there may be another possibility using theme parameters as described here, in particular this one:

// 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),

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