ReadOnly row depends on "available" checkbox

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example1" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  background: #fff;
  margin: 0;
  padding: 0;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function getCarData() {
    return [{
      car: "Mercedes A 160",
      colors: 'black,yellow,blue,grey,green',
      color: 'black',
      available: false
    }, {
      car: "Citroen C4 Coupe",
      colors: 'black,orange,blue,grey,purple',
      color: 'black',
      available: false
    }, {
      car: "Audi A4 Avant",
      colors: 'black,yellow,red,orange',
      color: 'yellow',
      available: false
    }, {
      car: "Opel Astra",
      colors: 'black,yellow,blue,grey,green',
      color: 'black',
      available: true
    }, {
      car: "BMW 320i Coupe",
      colors: 'white,green,yellow',
      color: 'green',
      available: false
    }, {
      car: "Skoda Octavia",
      colors: 'blue,grey',
      color: 'grey',
      available: false
    }, {
      car: "BMW Z3",
      colors: 'blue,grey, red, black',
      color: 'blue',
      available: true
    }, {
      car: "Hyundai Coupe",
      colors: 'red, black, grey',
      color: 'red',
      available: true
    }];
  }

  var example1 = document.getElementById('example1'),
    hot1;

  hot1 = new Handsontable(example1, {
  	className: 'root-table',
    data: getCarData(),
    colHeaders: ['Car Model', 'Colors', 'Color', 'Available'],
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: [200, 300, 140, 90],
    fillHandle: false,
    columns: [{
      data: 'car'
    }, {
      data: 'colors',
    }, {
      data: 'color',
      type: 'dropdown',
      source: [],
      renderer: autRenderer,
      className: 'color'
    }, {
      data: 'available',
      type: 'checkbox',
      readOnly: true,
    }]
  });

  function autRenderer(instance, td, row, col, prop, value, cellProperties) {
    cellProperties.source = instance.getDataAtRowProp(row, 'colors').split(',');
	  Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
  };
});