Search code examples
ag-grid

Vertical text in header cells

I've been trying to get vertical text in header cells to work properly, but just can't seem to find the winning combination. I've tried to render a custom component, that didn't do it, the closest I've got is applying this css to the relevant header cells:

.bool-header {
    transform: rotate(-90deg);
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 300px;
    width: 300px;
    text-align: left;
    justify-content: left;
    margin-bottom: -20px;
    overflow: overlay;
    .ag-header-cell-text {
        margin-bottom: -15px;
    }
}

but I'm still left with it truncating text, and using unnecessary padding, no matter what I set the values to.

Has anyone got a way of making this work? I'm using the react version.

Solution

  • To do that, you need to use some styling.

    Here you are, the minimum requirements to achieve what you want.

    .ag-header-cell-label {
  /*Necessary to allow for text to grow vertically*/
  height: 100%;
}

.ag-header-cell-label .ag-header-cell-text {
  writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
}

    Vertical Headers

    Working plunker: https://plnkr.co/edit/8NeuaQHWQ8TOMXBg?preview

    Further reading: https://www.ag-grid.com/javascript-data-grid/column-headers/