Search code examples
cssdx-data-grid

how to fit column header to left-bottom of dxdatagrid

I have a dxdatagrid.

I want to fit column header,left-bottom.

So, for the illustration, I added a snapshot.

                onCellPrepared: function(options) {
                    if (options.rowType == 'header'){
                        if (options.column.dataField == "salary")
                            options.cellElement.css({ 'transform': 'rotate(90deg)', 'transform-origin': '60% 10%', 'height': '100px' });
                        else if (options.column.dataField == "isActive")
                            options.cellElement.css({ 'transform': 'rotate(90deg)', 'transform-origin': '40% 20%', 'height': '100px' });
                        else
                            options.cellElement.css({ 'transform': 'rotate(90deg)', 'transform-origin': '10% 40%', 'height': '100px' });
                    }

enter image description here

Solution

  • Use display flex on the container(The header) and set the margin of the content(The text) to be "auto auto 0px 0px"