Handsontable uses the HTML table structure so customization is based either on referencing to the already existing elements, such as TR/TD, or by applying
your own CSS classes to HTML elements.
You can format a cell either using a CSS class or with a style applied directly to the DOM element.
Apply custom CSS class styles
In this example, we add a custom class custom-cell to the cell in the top left corner and add a custom-table CSS class that highlights the table headers.
import Handsontable from'handsontable';import'handsontable/dist/handsontable.full.min.css';const container = document.querySelector('#example1');const hot =newHandsontable(container,{data:[['A1','B1','C1','D1','E1'],['A2','B2','C2','D2','E2'],['A3','B3','C3','D3','E3'],['A4','B4','C4','D4','E4'],['A5','B5','C5','D5','E5'],],rowHeaders:true,colHeaders:true,stretchH:'all',className:'custom-table',cell:[{row:0,col:0,className:'custom-cell',},],height:'auto',licenseKey:'non-commercial-and-evaluation',});
To enable the custom borders feature, set the customBorders option. This can either be set as true or initialized as an
array with a pre-defined setup. For the list of available settings and methods, visit the API reference.
In the names of the API properties, the words start and end refer to the starting and ending edges of the
layout direction.
import Handsontable from'handsontable';import'handsontable/dist/handsontable.full.min.css';const container = document.querySelector('#example3');const hot =Handsontable(container,{data:[['A1','B1','C1','D1','E1','F1'],['A2','B2','C2','D2','E2','F2'],['A3','B3','C3','D3','E3','F3'],['A4','B4','C4','D4','E4','F4'],['A5','B5','C5','D5','E5','F5'],],rowHeaders:true,colHeaders:true,stretchH:'all',height:'auto',licenseKey:'non-commercial-and-evaluation',customBorders:[{range:{from:{row:1,col:1,},to:{row:3,col:4,},},top:{width:2,color:'#5292F7',},bottom:{width:2,color:'red',},start:{width:2,color:'orange',},end:{width:2,color:'magenta',},},{row:2,col:2,start:{width:2,color:'red',},end:{width:1,color:'green',},},],});