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 props for row styling.

export default function Grid() {
  return (
    <AgGridReact
      columnDefs={columnDefs}
      getRowClass={getRowClass}
      rowClass={rowClass}
      rowClassRules={rowClassRules}
      rowStyle={{ color: '#fff', 'background-color': '#37474f' }}
    />
  );
}

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

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