How To translate "No Rows To Show" message in ag-grid?

Question

How to translate "No Rows To Show" message in ag-grid based on the user selected language?

I tired something like this.

gridOptions: GridOptions = <GridOptions> {
        rowSelection: 'single',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        suppressCellSelection: true,

        overlayNoRowsTemplate: '<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">'+.......+'</span>'
    };

I need to add some thing at that .... place.

Answer 1

According to the internationalization section you should be able to just specify this value into the gridOptions like so:

gridOptions: GridOptions = <GridOptions> {
        rowSelection: 'single',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        suppressCellSelection: true,

        localeText: {noRowsToShow: 'No hay nada'}
    };

That is in general how to tackle I18N for ag-grid.

More specifically to what you asked in regards to how to control this behavoir based on user selected language you would have to do something more like this (I am assuming you have some variable already set up that holds the selected language):

function internationalization (){
    return selectedLanguageVariable === 'es'/*or whatever code you use for spanish*/ ? {noRowsToShow: 'No hay nada'} : {noRowsToShow: 'No Rows'}
}

gridOptions: GridOptions = <GridOptions> {
    rowSelection: 'single',
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    suppressCellSelection: true,

    localeText: internationalization()
};

Answer 2

Put this params in the grid HTML:

[overlayNoRowsTemplate] = "overlayNoRowsTemplate";

Declare in class:

private overlayNoRowsTemplate;

And call in constructor

this.overlayNoRowsTemplate = "<span>This is a custom 'no rows' overlay</span>";