Truncate headers on a data grid?

Hi forum – Does anyone have a styling trick to truncate headers on a data grid? I would like to keep a series of lengthy headers within a data grid so they are included when I export to excel. However, the default view makes one of the headers 14 lines tall. Would like to make it so that the headers are not so unwieldy when looking at the data grid.   There is the option to create a custom export so the headers are defined in that instead, but looking to see if there a way to do it without the custom export using a css class or similar.   Thanks, Jon
2 answers

Give the datagrid a class, say ‘yourgrid’ and add to the customs.scss:

    table th .mx-datagrid-head-caption {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;




If you don’t need the column to display in the web page, you can set the display length to 0.  That column will still export, but won’t be visible on the page.

Maybe that helps,