How group by date ag grid in angular

Question

I create a ag-grid and I have headerName which is date, time and location.

here's the code

list.component.ts

columnDefs: any = [{
    headerName: 'Date',
    field: 'date',
    valueFormatter: (data: any) => {
      let date = new Date(data.value);
      const month = date.getMonth;
      return data.value ? month : '';
    },
    rowGroup: true,
    hide: true
  },
  {
    headerName: 'Time',
    field: 'date',
    valueFormatter: (data: any) => {
      return data.value ? (format(data.value, 'hh:mm:ss a')) : '';
    },
  },
  {
    headerName: 'Location',
    field: 'sensor'
  }
]

How to group it based on their date. Thanks in advance.

Answer 1

columnDefs: any = [{
    headerName: 'Date',
    field: 'date',
    valueFormatter: (data: any) => {
      let date = new Date(data.value);
      const month = date.getMonth;
      return data.value ? month : '';
    },
    rowGroup: true,
    hide: true
  },
  {
    headerName: 'Time',
    field: 'date',
    valueFormatter: (data: any) => {
      return data.value ? (format(data.value, 'hh:mm:ss a')) : '';
    },
  },
  {
    headerName: 'Location',
    field: 'sensor'
  }
]

Answer 2

You can use this

at list.component.ts

onGridReady(params: GridReadyEvent) {
   this.gridApi = params.api;
   this.gridColumnApi = params.columnApi;
   this.gridColumnApi.getColumn('date').setSort('asc');
}

It may help you for grouping with sorting by date