Change the appearance of cells, using custom CSS classes, inline styles, or custom cell borders.
Overview 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.
Apply inline styles You can apply inline styles directly to the DOM element using its style
property. You can use the renderer
option to do that.
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import { textRenderer, registerRenderer } from 'handsontable/renderers';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {
textRenderer(hotInstance, TD, ...rest);
TD.style.fontWeight = 'bold';
TD.style.color = 'green';
TD.style.background = '#d7f1e1';
});
return (
<HotTable
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"
cell={[
{
row: 0,
col: 0,
renderer: 'customStylesRenderer',
},
]}
height="auto"
licenseKey="non-commercial-and-evaluation"
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@13.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script>
<div id="example2" class="hot "></div>
Custom cell borders 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 { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
// register Handsontable's modules
registerAllModules();
export const ExampleComponent = () => {
return (
<HotTable
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',
},
},
]}
/>
);
};
ReactDOM.render(<ExampleComponent />, document.getElementById('example3'));
<script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" />
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@13.0/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script>
<div id="example3" class="hot "></div>
Related articles Configuration options:
Plugins: