ag-Grid: extend rows till right edge if columns don't occupy full width

user_293680 0
Viewed 1110

In ag-Grid, if the columns occupy a smaller space than the width of the grid, a blank hole appears on the right of the last column. Please see below (example taken from ag-Grid docs):

enter image description here

The UX designers on my team don't like that. They would like to see the rows extended all the way to the right to balance out the look. Is this possible to do with ag-Grid?

Edit: We don't want to use the sizeColumnsToFit option, because on large monitors it produces very wide columns and the grid becomes unreadable. We want to use the autoSize option to compact the columns and fill the hole on the RHS with blank stripes as suggested above.

ag-grid
5 Answers

I had the same situation and resolved with the following css override:

.ag-center-cols-container {
  width: 100% !important;
}
user_102234380

Yes it is possible. You can call the sizeColumnsToFit function on the ag-Grid api which will fill out the width of the table with the columns.

Take a look at documentation.

Here is a plunker example.

EDIT Use the property suppressSizeToFit and set it to true to when you call sizeColumnsToFit, it won't have an affect. Apply this property to the defaultColDef and set it to false for the last column. This was, when you call sizeColumnsToFit, only the last column will be set to full width. See the updated plunker above.

user_43006080

One possible option I've been playing with is adding a fake column at the end to fill the remaining space. To do so, you just need to add a column with options similar to the following to the end of your list of columns:

{
  flex: 1,
  headerName: '',
}

See this plunker forked from @ViqMontana's example above.

It's not a perfect solution, but wanted to mention it here in case it helps.

user_31242880

this is how i do it:

/**
 * if there is "dead space" present on the grid, the columns will be auto sized to fill the gap
 * @param gridApi
 * @param columnApi
 */
resizeColumnsToFit(gridApi: GridApi, columnApi: ColumnApi, allowShrink = false) {
  if (allowShrink) {
    gridApi.sizeColumnsToFit();
  } else {
    const gridBodyWidth = document.getElementsByClassName("ag-root-wrapper")[0].clientWidth; // todo: use grid's id instead of [0] to allow multiple grids on a page
    const allColumnsWidth = columnApi.getAllDisplayedColumns().map(c => c.getActualWidth()).reduce((a, b) => a + b, 0);
    if (gridBodyWidth > allColumnsWidth) {
      gridApi.sizeColumnsToFit();
    }
  }
}

This method will size columns to fit only when there is "dead" space on the right. Optionaly set allowShrink to true to force resizing even if there is no dead space

user_7609520

This works like Craig Weston's answer but without the need for !important:

.ag-center-cols-container {
    min-width: 100%;
}
user_92247230
Related