I have created a table using AG-grid. here is the code
.HTML
<ag-grid-angular #agGrid
style="width: 100%; height: 100%; font-size: 12px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
.Ts
columnDefs = [{
headerName: '',
field: 'rush',
width: 53,
resizable: true,
cellRendererFramework: RegularGridCheckboxComponent,
cellRendererParams: { clickHandler: this.checkBoxClickHander.bind(this)},
},
{
headerName: 'Type',
field: 'type',
width: 74,
resizable: true,
},
{
headerName: 'Address',
field: 'address',
width: 176,
resizable: true
}]
I have some rowData I am not include those in here
Actually I want to create a grid design like following image. You can see bottom of the grid have one specific raw
You can use Footer to fix a row in the bottom: .HTML
<ag-grid-angular #agGrid
style="width: 100%; height: 100%; font-size: 12px;"
class="ag-theme-alpine"
[rowData]="rowData"
[autoGroupColumnDef]="autoGroupColumnDef"
[columnDefs]="columnDefs">
</ag-grid-angular>
.TS add this
public autoGroupColumnDef: ColDef = {
minWidth: 300,
cellRendererParams: {
innerRenderer: MyInnerRenderer,
},
};
Create a new component: for me its MyInnerRenderer
MyInnerRenderer
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';
@Component({
selector: 'total-value-component',
template: `<span style="color: {{ color }}; font-weight: {{ fontWeight }};"
>{{ prefix }} {{ cellValue }}</span
>`,
})
export class MyInnerRenderer implements ICellRendererAngularComp {
public cellValue = '';
public color = '';
public fontWeight = '';
public prefix = '';
// gets called once before the renderer is used
agInit(params: ICellRendererParams): void {
this.cellValue = params.value;
this.color = params.node.footer ? 'navy' : '';
this.fontWeight =
params.node.footer && params.node.level === -1 ? 'bold' : '';
if (params.node.footer) {
this.prefix = params.node.level === -1 ? 'Grand Total' : 'Sub Total';
}
}
refresh(params: ICellRendererParams) {
return false;
}
}
for more details Refer here