How to add background on ag grid pinnedBottomRowData using rowClass in aggrid angular

Question

How to add background in pinnedBottomRowData the entire bottom Row

here's the code

list.component.ts

  columnDefs = new Array();
  rowData = new Array();
  pinnedBottomRowData: any;
ngOnInit() {
this.columnDefs = [
      {
        'headerName': 'Style/Machine',
        'field': 'total',
      }
    ];
    for (let i = 1; i < 30; i++) {
      this.rowData.push(
        {
          'total': 'Machine ' + i
        }
      );
    }
    this.pinnedBottomRowData = this.createData(1);
}

  createData(count: number) {
    const result = [];
    for (let i = 0; i < count; i++) {
      result.push({
        total: 'Total Machine'
      },
        {
          total: 'Total',
        });
    }
    return result;
  }

here's the output

Ilonailonka

Answer 1

You can use getRowStyle and check if the row is pinned and at the bottom. Please refer the below example.

this.getRowStyle = function(params) {
      if (params.node.rowPinned === 'bottom') {
        return { "background-color": "blue" };
      }
    };
    this.pinnedBottomRowData = createData(1, "Bottom");

Plunker

Reference link

Rameses