How to change default font size for ag-grid row cells in react js?

Question

I am using ag-grid table for first time. I am not able to change the default font size of row cells(Not header portion). I want to change the font size of row cells(row data). I am using ag-theme-alpine.

Here is the code which I am using.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            columnDefs: [
                {headerName: 'Make', field: 'make'},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}

            ],
            rowData: [
                {make: 'Toyota', model: 'Celica', price: 35000},
                {make: 'Ford', model: 'Mondeo', price: 32000},
                {make: 'Porsche', model: 'Boxter', price: 72000}
            ]
        }
    }

    render() {
        return (
            <div
                className="ag-theme-alpine"
          style={{ height: '500px', width: '100%',fontSize:'20px' }}
            >
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}>
                </AgGridReact>
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

Please suggest a good solution.

score 7 · Answer 1 · answered Oct 25 '21 at 15:48

7

You can do this in the ColDef by setting the cellStyle property in ColDef. You can set the font size as follows

columnDefs: [
                {
                  headerName: 'Make', 
                  field: 'make', 
                  cellStyle: {fontSize: '11px'}
                }
            ]

answered Oct 25 '21 at 15:48

ajaali

860
12
16

This should be the accepted answer. – Nishant Kumar Dec 20 '21 at 16:51

score 3 · Accepted Answer · answered Oct 15 '20 at 11:29

You can override the font size via CSS. Ag-Grid's CSS sets the font at the row level, and unfortunately it has an !important tag. Providing a higher selector specificity should do the trick:

div.ag-theme-alpine div.ag-row {
    font-size: 12px !important;
}

score 1 · Answer 3 · answered Feb 07 '22 at 13:55

You can set font-size and other parameters globally by customizing a theme: React Data Grid: Customising Themes

Define the style parameters in the styles.scss file like this:

.ag-theme-alpine {
  @include ag-theme-alpine((        
      font-size: 10px,
  ));
}

How to change default font size for ag-grid row cells in react js?

3 Answers3