JavaScript Data GridStyling the Grid (Draft)

ReactAngularVueJavascript

This tutorial demonstrates how to style, customise and extend the grid.

Overview

In this tutorial you will:

1. Pick a theme
2. Customise the Theme
3. Style rows & cells
4. Apply styles dynamically

Once complete, you will have a grid with custom styles applied to rows & cells, formatted price & date values, and a component in place of the country values.

Try it out by editing the success or price columns to see the styles update in real-time:

Setup

Introduction

There are three ways to style the grid:

• Themes: CSS Classes which style all elements, including rows and cells.
• Styles: Applies CSS classes to rows or cells.
• Class Rules: Applies Styles to rows or cells based on their value.

Customising Themes

All themes can be customised by overriding CSS variables.

Let's test this out by creating a new styles.css file with a single selector that matches our chosen theme (ag-theme-quartz) and override the --ag-alpine-active-colour to change the colour of active elements within the grid:

.ag-theme-quartz {
  --ag-checkbox-checked-color: rgb(126, 46, 132);
}

We should now see the checkboxes styled with our new colour:

Note: You can also create your own theme entirely. Read our Style Customisation guide for more info.

Styling Rows & Cells

In addition to themes, CSS classes can be applied to rows with Row Classes and to cells with Cell Classes.

Row Classes are defined using the rowClass prop, with a CSS classname as the value. Let's try this by adding a new .row selector in our styles.css file to control the font of our rows:

.row {
  font-family: 'Courier New';
}

And then setting the value of the rowClass prop to the .row selector:

<div className="ag-theme-material" style={{ width: 600, height: 500 }}>
  <AgGridReact ... rowClass='row' />
</div>

All rows should now use the Courier New font:

Cell Classes work in the same way but are applied by adding a cellClass property to the column we want the styles to apply to. Let's try this by adding a new selector to styles.css to set the font-weight of the 'Mission' column:

.mission-cell {
  font-weight: 900;
}

And then setting the value of the cellClass prop on the 'Mission' column to the .mission-cell selector:

const [colDefs] = useState([
  {
    field: "mission",
    resizable: false,
    cellClass: 'mission-row' // Apply 'mission-row' class to cells within this column
  },
  ...
]);

We should now see our mission column with a heavy font-weight:

Applying Styles Dynamically

Styles can also be dynamically applied to rows with Row Class Rules and to cells with Cell Class Rules.

Row Class Rules are configured by providing a JavaScript map to the rowClassRules prop where the keys are the CSS classnames and the values are functions that describe when the selectors should be applied.

Let's try this out by adding a few new selectors to our styles.css file to control the colour of the row when hovered:

.successful-mission:hover {
  background: green;
}

.unsucessful-mission:hover {
  background: red;
}

And then creating a map to apply these classes based on the value of the 'Sucessful' column:

const rowClassRules = {
  'unsucessful-mission': (p: RowClassParams) => { return p.data.successful === false },
  'successful-mission': (p: RowClassParams) => { return p.data.successful === true }
}

<div className="ag-theme-material" style={{ width: 600, height: 500 }}>
  <AgGridReact ... rowClassRules=rowClassRules />
</div>

We should now see that rows are either green or red when hovered, depending on the value of the 'succesful' column:

Cell Class Rules work in the same but are applied by adding a cellClassRules property to the column we want the styles to apply to.

Let's try this out by adding a few new selectors to our styles.css file to control the style of the 'price' column:

.very-low-cost {
  background: linear-gradient(to right, #03682995 30%, #313131 1%);
  border-right: #313131 !important;
}

.low-cost {
  background: linear-gradient(to right, #03682995 45%, #313131 1%);
  border-right: #313131 !important;
}

.medium-cost {
  background: linear-gradient(to right, #FFA50095 60%, #313131 1%);
  border-right: #313131 !important;
}

.high-cost {
  background: linear-gradient(to right, #FF000095 75%, #313131 1%);
  border-right: #313131 !important;
}

.very-high-cost {
  background: linear-gradient(to right, #FF000095 90%, #313131 1%);
  border-right: #313131 !important;
}

And then creating another map and setting it as the value for our cellClassRules prop on otheur 'Price' column:

const cellClassRules = {
  'very-low-cost': (p: CellClassParams) => { return p.value < 2500000},
  'low-cost': (p: CellClassParams) => { return p.value > 2500000 && p.value < 5000000},
  'medium-cost': (p: CellClassParams) => { return p.value > 5000000 && p.value < 7500000},
  'high-cost': (p: CellClassParams) => { return p.value > 7500000 && p.value < 9000000},
  'very-high-cost': (p: CellClassParams) => { return p.value >= 9000000},
}

const [colDefs] = useState([
  {
    field: "price",
    cellClassRules: cellClassRules // Apply cellClassRules map to the price column
  },
  ...
]);

We should now see our price column formatted based on its value:

Test Your Knowledge

Let's put what you've learned so far into action by modifying the grid:

1. Set the colour of --ag-header-column-resize-handle-color to rgb(155, 155, 155)

   Hint: --ag-header-column-resize-handle-color is a theme CSS variable

2. Apply a CSS Class to the 'mission' column that sets cursor: pointer.

   Hint: Use the cellClass property on the 'Mission' column to provide a CSS class to the cells

Once complete, your grid should look like the example below. If you're stuck, check out the source code to see how its done:

Summary

Congratulations! You've completed the tutorial and customised, styled, & extended your grid. By now, you should be familiar with several concepts:

• Themes: CSS Classes that control the look and feel of the entire grid. Choose from and 1 of 5 pre-made themes, or create your own.
• Styles: Apply CSS Classes to rows & cells directly, either by default or based on arbitrary data in the grid.

Next Steps

Check out our other guides to explore more features of AG Grid:

• ...