Styling Using CSS

Parent Previous Next

The ReactDataGrid ships with its own css file, Flexicious.css. This is located at http://www.htmltreegrid.com/demo/flexicious/css/flexicious.css . You can pretty much customize all the elements in there and affect all instances of your grid.


For example, if you simply add the following stylesheet to your html page:

       .flexiciousGrid  .flexDataGridCell .cellRenderer {

           font-size:12;

           font-weight:bold;

           font-style : italic;

           font-family:Tahoma;

       }




There are a few limitations of the css method. The grid itself exposes a rich API for styling purposes. It has properties exposed for padding, borders, background, etc. This allows you to programmatically control these properties in a very intuitive way. This API will always win over css. This is because the result of this is applied directly on the element. We will cover this in the next section.