[Vuejs]-Ag-grid – fit columns to content and wrap headers text

by

0👍

You have to create a custom header to wrap the header text and set the header height.

https://www.ag-grid.com/javascript-grid-header-rendering/#header-group-component-1

<template>
  <div class="ag-cell-label-container"
        :class="{'ag-header-cell-sorted-asc': params.column.sort === 'asc' && params.enableSorting,
          'ag-header-cell-sorted-desc': params.column.sort === 'desc' && params.enableSorting,
          'ag-header-cell-sorted-none': params.column.sort == '' && params.enableSorting,
          'ag-column-menu-visible': params.column.filterActive }"
        role="presentation">
    <div ref="eMenu" v-if="params.enableMenu" class="ag-header-icon ag-header-cell-menu-button"
          :class="{'ag-menu-expanded': params.column.filterActive }"
          @click="onMenuClick"
          @mouseover="showMenuButton=true"
          @mouseleave="showMenuButton=false">
      <span class="ag-icon ag-icon-menu" v-if="showMenuButton"></span>
    </div>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation" :title="params.displayName" @click="changeSortOrder">
      <span ref="eText" class="ag-header-cell-text" role="columnheader">{{ params.displayName }}</span>
      <span ref="eFilter" v-if="params.column.filterActive" class="ag-header-icon ag-filter-icon" aria-hidden="true">
        <span class="ag-icon ag-icon-filter"></span>
      </span>
      <span v-if="params.enableSorting" ref="eSortOrder" class="ag-header-icon ag-sort-order ag-hidden" aria-hidden="true">{{params.column.sort}}</span>
      <span v-if="params.enableSorting" ref="eSortAsc"
          :class="{active : params.column.sort === 'asc', 'ag-hidden': params.column.sort !== 'asc' }" class="ag-header-icon ag-sort-ascending-icon">
        <span class="ag-icon ag-icon-asc"></span>
      </span>
      <span v-if="params.enableSorting" ref="eSortDesc"
          :class="{active : params.column.sort === 'desc', 'ag-hidden': params.column.sort !== 'desc'}" class="ag-header-icon ag-sort-descending-icon">
        <span class="ag-icon ag-icon-desc"></span>
      </span>
      <span v-if="params.enableSorting" ref="eSortNone"
          :class="{active : params.column.sort == '', 'ag-hidden': params.column.sort != '' }" class="ag-header-icon ag-sort-none-icon">
        <span class="ag-icon ag-icon-none"></span>
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'grid-column-header',
    data () {
      return {
        showMenuButton: false
      }
    },
    methods: {
      changeSortOrder (event) {
        this.params.progressSort(event.shiftKey)
      },
      onMenuClick () {
        this.params.showColumnMenu(this.$refs.eMenu)
      }
    },
    mounted () {
    }
  }
</script>

<style lang='less' scoped>
  .ag-header-cell-label {
    white-space: normal; /* allows header text to wrap */
    margin-right: 24px;
  }

  .ag-header-cell-menu-button {
    width: 12px;
    height: 12px;
  }

  .ag-header-cell-menu-button:hover {
    opacity: 1;
    transition: opacity 0.2s, border 0.2s;
  }

  .ag-menu-expanded {
    opacity: 0;
    transition: opacity 0.2s, border 0.2s;
  }
</style>

Then you would reference it on each column in your columnDefs:

var columnDefs = [
    {
      headerName: 'Id',
      field: 'id',
      headerComponentFramework: Vue.extend(ColumnHeader) // This lets you use it
    }
  ]

And on the gridOptions:

gridOptions: { headerHeight: 46 }
👤Karen B

Leave a comment