...
| Code Block | ||
|---|---|---|
| ||
{{type: 'handsontable', handsontable: { colHeaders: ['Marque', 'Country', 'Parent company'], autoColumnSize: true, data: [{name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'}, {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'}, {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'}, {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'}, {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'}, {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}], getValue: function() {var selection = this.getSelected(); return this.getSourceDataAtRow(selection[0]).name; }}}}
|
Customer Renderer to Change Background Color
| Code Block | ||
|---|---|---|
| ||
{{renderer:function(instance, td, row, col, prop, value, cellProperties){Handsontable.renderers.TextRenderer.apply(this, arguments);td.style.backgroundColor = 'green';}}} |
Custom Renderer to Change Text Style to Bold
| Code Block | ||
|---|---|---|
| ||
{{renderer:function(instance, td, row, col, prop, value, cellProperties){console.log(value);td.innerHTML='<b>'+value+'</b>';}}} |
Date Picker with Customer Renderer
...
| Code Block | ||
|---|---|---|
| ||
{{type:'date',dateFormat:'MM/DD/YYYY',correctFormat:true,defaultDate:'01/01/1900',datePickerConfig:{firstDay:0,showWeekNumber:true,numberOfMonths:3,disableDayFn:function(date){return date.getDay()===0 || date.getDay()===6;}},renderer:function(instance, td, row, col, prop, value, cellProperties){Handsontable.renderers.TextRenderer.apply(this, arguments);td.style.backgroundColor = 'green';}}} |
...