How to Quickly Customize Ext JS Data Grid (Part 6/6) – Adding Custom CSS Class to Grid Elements

In this concluding blog of our 6-part blog series on “Customizing Your Ext JS Grid”, we talk about using built-in properties to add custom CSS class to grid elements.

There are multiple ways to add custom CSS class to elements. Let’s discuss a few and how to use them.

Using built-in properties

Grid configuration:

• baseCls
• cls
• componentCls
• bodyStyle
• style
• ui

Column:

• tdCls

1. Define the class to add in column configuration:

{
        dataIndex: 'player',
        flex: 1,
        text: 'Name',
        //CSS class to add
        tdCls: 'player'
}

2. Create CSS class :

.player {
   font-weight: bold;
}

Sencha Fiddle:

Using built-in methods

With renderer method it is possible to access a collection of metadata of the current cell and customize data display.
Override renderer method in column configuration :

      {
        dataIndex: 'team',
        text: 'Team',
        flex:1,
        //Use metadata to modify background color
        renderer: function (value, metaData) {
          metaData.tdAttr = 'bgcolor="grey"';
          return value;
      }

Override getRowClass template function

Override this function to apply custom CSS classes to rows during rendering
1. Override method in grid configuration :

viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store){
            return record.get("rating") > 86 ? "superstar" : "";
        }
    }

2. Create CSS class :

.superstar {
   color: red;
}

Sencha Fiddle:

Use theme variables

Ext JS is equipped with a large selection of theme variables to enhance the data grid.
Read more about theme variables in the documentation here.

With Ext JS, you have enormous flexibility to make your grid appear the way you want it to!
I hope you’ve enjoyed this series on customizing Data Grids. If you missed the previous articles, here’s a quick recap of all posts from this 6-part blog series.
 
Customize using built-in grid and column properties
Customize using grouping methods
Customize using row editing methods
Customize grid display data
Customize using widget column methods
Customize with custom CSS class

It doesn’t end here. Check out our extensive product documentation packed with working examples on everything grid. Looking for something that wasn’t covered here? Connect with us through our forum and get answers to all your pressing questions.

Build Your Data Grid with Ext JS 7.1

The free 30-day trial of Ext JS 7.1 provides full access to the product features. Get started today and see how you can build a high-performing data grid for your application.