By default Ag-grid sets a fixed column menu width. Their documentation has an example of setting the column menu width to a different fixed value. The issue with this approach is that every column will have the same menu width.

Is there a way to dynamically set the column menu width based upon the column's filter list values? The following has no effect:

.ag-set-filter-list {
  width: auto;
}

Similarly word wrapping could also solve this issue, but is also not working:

.ag-set-filter-list {
  overflow-wrap: break-word;
}

I also tried using the postPopup callback to adjust styling after rendering, with no luck:

created() {
  this.postProcessPopup = (params) => {
    if (params.type !== 'columnMenu') {
      return;
    }
    params.ePopup.style.overflowWrap = "break-word";
    params.ePopup.style.width = "auto";
  }
}

CodePudding user response：

Digging into Ag-grid's filter list styling more, I realized that the filter items are absolutely positioned and use top values for placement. This made it difficult to wrap filter values without having them collide with each other.

I contacted Ag-grid support and they confirmed that dynamic filter list widths are not supported. They did mention their tooltips feature though, which works for my use case.

I modified that example in two ways:

1. Only show tooltips for filter list values that are longer and will be cut off by the edge of the filter menu.
2. Only show tooltips for values in the filter list, not for rows in the grid.

Here's my version of a custom tooltip with the above modifications:

export class GridColumnFilterTooltip {
  init(params) {
    const FILTER_VALUE_CHARACTER_LIMIT = 28;
    this.tooltip = document.createElement("div");

    if (
      params.location === "setFilterValue" &&
      params.value.length > FILTER_VALUE_CHARACTER_LIMIT
    ) {
      this.tooltip.classList.add("grid-column-filter-tooltip");
      this.tooltip.innerHTML = params.value;
    }
  }

  getGui() {
    return this.tooltip;
  }
}