AG grid hide empty columns

Viewed 619

I am trying to implement an AG-grid with simple row grouping and trying to hide the columns that are empty. Is there any way to achieve that? enter image description here

2 Answers

You can hide a column by setting hide=true on the Column Definition for that column.

If you want to achieve this dynamically, then you can leverage columnApi.applyColumnState():

  hideGold() {
    this.gridColumnApi.applyColumnState({
      state: [{ colId: 'gold', hide: true }],
    });
  }

See this implemented in the following sample.

Documentation on Column State.

This could help i write two function in a tool.ts the first one returns the value of each column and the second check if column is empty then hide it

    /**
   *
   * @param o // node data
   * @param propertyName  // columns name = the filed of the headerName
   * @returns
   * This function infers the type of the object T
   * and casts the property name to the key type K,
   * returning the property of the object using the given key T[K]
   */
  public static getProperty<T, K extends keyof T>(o: T, propertyName: K): T[K] {
    return o[propertyName];
  }
  /**
   *
   * @param gridApi
   * @param columnDefs
   * @param columnApi
   * Hide empty columns if all the column is empty
   */
  static hideEmptyColumns(
    gridApi: GridApi,
    columnDefs: any,
    columnApi: ColumnApi
  ) {
    let headers = []; // Headers array to store headersName fields
    if (gridApi) {
      columnDefs.forEach((col) => {
        col.children.forEach((child) => {
          headers.push(child.field);
        });
      });
      const columnsEmptyCheck = [];
      headers.forEach((it) => columnsEmptyCheck.push(true));
      // loop for each node
      gridApi.forEachNode((node) => {
        //loop throw headers
        headers.forEach((header, idx) => {
          const value = this.getProperty(node.data, header);
          if (value?.length === 0 || value === undefined) {
            columnsEmptyCheck[idx] = false;
          }
        });
      });

      /**
       * make the empty columns that has false unvisible
       */

      columnsEmptyCheck.forEach((element, index) => {
        if (element === false) {
          columnApi.setColumnsVisible([headers[index]], false);
        }
      });
    }
  }
Related