How to do the below CSS changes on Handsontable?

#1

Hi Team,
I have a few requirements for my Handsontable component. Please provide me with the solutions for these, preferably a working sample.

  • How do I change the color of the column header? By default, it’s light grey.

  • How do you change the default column selection color? Right now if we select a column we can see a blue border as well as the background of the cells along with the column header. Want to change that color based on the type of the column. For example, for text, it should be red and for numeric one, it should be green

  • How do I change the column header cell height? I Can set the row heights but it only applies to the rows, not the Column header.

  • Is there any hook for column unselect action? Something like afterSelectColumns which gets triggered when the column is selected, do we have any such hook? Else how to capture that?

  • How to enable in-place editing? I have set the className: “htMiddle htLeft”, to display the text in the middle and left. But when I am trying to edit the cell the editing is happening on the left corner. I want some in-place editing

Please check these and update me with the solutions.

Thanks.

#2

Hi @adutta

Here’s Aleksandra from the Technical Support team. I’ll do my best to help :slight_smile:

Column Header Color
I recommend setting up a custom theme. This approach makes it easier to manage visual changes without relying on hacky CSS overwrites. You can find a quick tutorial on creating a custom theme and applying it to your tables here: Custom Theme Tutorial. The option to change is --ht-header-background-color.

Change Default Column Selection Color
Selection is controlled using the highlight classes, which can be modified within a custom theme. For reference, here’s the Horizon theme: Horizon Theme CSS. It includes several detailed highlight classes that you can customize.

Look for --ht-cell-selection-border-color for the border of the selection. Here pink
15

And --ht-cell-selection-background-color for the background within selection (here pink)
18

Column Header Cell Height
The column header height can be adjusted using the columnHeaderHeight option. You can read more about it here: ColumnHeaderHeight Documentation. To set it, pass a numeric value representing the height in pixels for the column header group. Here https://jsfiddle.net/Ltr3w2y0/ at line 22 we set up the column header to have 100 pixels in height.

Un-selection Hook
Handsontable provides an afterDeselect hook. More details can be found here: afterDeselect Documentation. A working demo is available here: JSFiddle Demo. This hook is triggered when no cells are selected, such as when clicking outside the table or focusing on an element outside the table, provided outsideClickDeselects is set to true (default).

Editor Styling
General styles are applied to cell renderers, which handle cells in display mode. When a cell is being edited, a cell editor with its own styles is triggered. To customize the editor’s appearance, you can go here https://handsontable.com/docs/javascript-data-grid/cell-editor/ and read more about customizing cell editor.

Here https://stackblitz.com/edit/pgrkmldm-u4neylu2?file=some-custom-style.css,index.js,index.html,styles.css is a demo where I created a custom theme with all those alterations applied.