ag-grid-angular

Why is Angular ag-grid appending numbers to my column headers?


I added a new column to a grid by copying and pasting an existing ColDef. (ag-grid 30.1)

Now the header adds the number 1 to the previously existing header and adds a number 2 to the new header. I don't want those numbers to appear in the header. Where are they coming from? Why is it doing that?

I had this column:

      {
        headerName: 'My Column',
        sort: 'asc',
        filter: 'agDateColumnFilter',
        filterParams: {
          maxNumConditions: 1,
          filterOptions: ['greaterThanOrEqual', 'lessThanOrEqual', 'equals', 'inRange'],
          inRangeInclusive: true
        },
        width: 240,
        valueGetter: (params: any) => new Date(params.data.myColumn),
        valueFormatter: (params: any) => format(params.value, 'P')
      }

and then I added thio column:

      {
        headerName: 'My New Column',
        sort: 'asc',
        filter: 'agDateColumnFilter',
        filterParams: {
          maxNumConditions: 1,
          filterOptions: ['greaterThanOrEqual', 'lessThanOrEqual', 'equals', 'inRange'],
          inRangeInclusive: true
        },
        width: 240,
        valueGetter: (params: any) => new Date(params.data.myNewColumn),
        valueFormatter: (params: any) => format(params.value, 'P')
      }

Instead of "My Column" and "My New Column", the headers appear as "My Column 1" and "My New Column 2".

Why is this happening to me?


Solution

  • When you copied and pasted the ColDef you included the sort order:

    sort: 'asc',
    

    The 1 and 2 apparently indicate that it's sorting by the one column and then by the other. It's not intuitive and I don't see it in the documentation. But if you remove that sort property from the new ColDef the numbers will disappear.