[Vuejs]-Ag-grid column menu: display overflow text

by

0👍

✅

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;
  }
}

Leave a comment