LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Row Styling

Row Styling

  • rowStyle to add styles to all rows.
  • getRowStyle callback to conditionally add styles.
  • rowClass to set the classes for all rows.
  • getRowClass callback to conditional add class.
  • rowClassRules to add and remove classes.

Configuration

Let's look at how you use the Angular input bindings for row styling.

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [AgGridModule],
  template: `
    <ag-grid-angular
      class="ag-theme-material"
      [columnDefs]="columnDefs"
      [getRowClass]="getRowClass"
      [rowClass]="rowClass"
      [rowClassRules]="rowClassRules"
      [rowStyle]="{ color: '#fff', 'background-color': '#37474f' }"
    ></ag-grid-angular>
  `
})
export class GridComponent {}

export class GridComponent {
  rowClassRules = {
    'row-highlight': ({ data }) => data.total > 100,
    'row-danger': ({ data }) => data.dateOfOrder.getFullYear() < 2019,
  };

  getRowClass({ data }) {
    return data.total > 2000 ? 'row-highlight' : '';
  }
}