{"id":11055,"date":"2021-11-26T10:00:00","date_gmt":"2021-11-26T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=11055"},"modified":"2021-11-25T19:21:17","modified_gmt":"2021-11-25T10:21:17","slug":"javascript-handsontable-renderer-memo","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/11055","title":{"rendered":"JavaScript HandSonTable Renderer Memo"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

I would like to share about how to renderer as your desire cells when you use HandSonTable. HandSonTable can’t directly insert html elements into cells. But after declaration renderer:html<\/strong> <\/span>in our table of cell, we can use html elements as your desire. Second ways is to create custom renderer in cells properties with our own way.<\/p>\n\n\n\n

Firstly we will create simple html file. In this file we will import handsontable.min.js and handsontable.min.css. We can get these file script from this site cdnjs.com<\/a>. <\/p>\n\n\n\n

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/handsontable@11.0\/dist\/handsontable.full.min.js\"><\/script>\n<link type=\"text\/css\" rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/handsontable@11.0\/dist\/handsontable.full.min.css\" \/><\/strong><\/code><\/pre>\n\n\n\n
To insert our table, create a div with id attribute and call this id with JS querySelector<\/strong>.<\/p>\n\n\n\n
<div id=\"example1\" class=\"hot \"><\/div><\/strong>\nconst container = document.querySelector('#example1');<\/strong><\/code><\/pre>\n\n\n\n
Usage of HandSonTable<\/span><\/strong><\/p>\n\n\n\n
const hot = new Handsontable(container, {\ndata : data \n})<\/strong>;<\/code><\/pre>\n\n\n\n
const data = [\n    { id: 1, name: 'Suga', isActive: true, date: '2021-11-25' },\n    { id: 2, name: 'Jimin', isActive: false,  date: null },\n    { id: 3, name: 'JHope', isActive: true,  date: null },\n    { id: 4, name: 'V', isActive: false, date: null },\n  ];<\/strong><\/code><\/pre>\n\n\n\n
If you want to add colsHeader<\/strong>, set to true => colHeaders : true<\/strong><\/p>\n\n\n\n
And if you want to add strict cell type and render columns, we can set inside columns<\/strong>.<\/p>\n\n\n\n
  columns: [\n    { data: 'id', type: 'text' },\n    \/\/ 'text' is default, you don't actually need to declare it\n    { data: 'name', renderer: yellowRenderer },\n    \/\/ use default 'text' cell type but overwrite its renderer with yellowRenderer\n    { data: 'isActive', type: 'checkbox' },\n    { data: 'date', type: 'date', dateFormat: 'YYYY-MM-DD' },\n  ],<\/strong><\/code><\/pre>\n\n\n\n
I will add another custom renderer named with greenRenderer<\/strong> but this greenRenderer<\/strong> will not add all the cell, just add some row. So I will use this greenRenderer<\/strong> inside a cell.<\/p>\n\n\n\n
 cells(row, col, prop) {\n    if (row === 3 && col === 0) {\n      this.renderer = greenRenderer;\n    }\n  }<\/strong><\/code><\/pre>\n\n\n\n
yellowRenderer<\/strong> function<\/strong> => this function will add all the cell with background color yellow.<\/p>\n\n\n\n
const yellowRenderer = function(instance, td, row, col, prop, value, cellProperties) {\n  Handsontable.renderers.TextRenderer.apply(this, arguments);\n  td.style.backgroundColor = 'organe';\n};<\/strong><\/code><\/pre>\n\n\n\n
greenRenderer<\/strong> function<\/strong> => this function will add some of cell with background color red.<\/p>\n\n\n\n
const greenRenderer = function(instance, td, row, col, prop, value, cellProperties) {\n  Handsontable.renderers.TextRenderer.apply(this, arguments);\n\n  td.style.backgroundColor = 'purple';\n}<\/strong>;\n<\/code><\/pre>\n\n\n\n
If you want to set custom colWidths , then set colWidths<\/strong> to your desire value.<\/p>\n\n\n\n
colWidths : 100<\/strong><\/code><\/pre>\n\n\n\n
Hope you enjoyed about this article!<\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>