Set Column Headers Vertically in FlexGrid

Background:

By default, FlexGrid column headers are displayed horizontally. However, some applications, such as scientific or industrial dashboards, may require vertical headers with text rotated 180 degrees so they read from bottom to top. FlexGrid doesn't offer a direct setting for this layout, but it can be achieved through custom CSS styling.

Steps to Complete:

1. Target the column header cells using CSS
2. Apply writing-mode and transform to rotate text vertically
3. Adjust alignment and padding as needed for styling

Getting Started:

Target the column header cells using CSS

To change the layout of column headers, you’ll need to apply CSS rules to the header cell elements. The following CSS targets .wj-cell elements within the column headers of the FlexGrid:

.wj-flexgrid .wj-colheaders .wj-cell,
.wj-colheaders .wj-cell span {
  text-align: left;
  transform: rotate(180deg);
  writing-mode: vertical-rl; /* chrome */
  -ms-writing-mode: tb-rl; /* IE */
}

Explanation of CSS Properties:

• writing-mode: vertical-rl displays text vertically from right to left (downward).
• transform: rotate(180deg) flips the text upside-down so it reads from bottom to top.
• text-align: left aligns the text within the cell.
• Compatibility is included for both modern browsers and IE with -ms-writing-mode.

Adjust alignment and padding as needed for styling

If your header text appears too cramped or misaligned, consider adding padding or adjusting the column width:

.wj-flexgrid .wj-colheaders .wj-cell {
  padding: 10px 5px;
  white-space: nowrap;
}

With these style changes, FlexGrid will now display column headers in a bottom-to-top vertical orientation.

Hopefully you found this helpful. Happy coding!