Handsontable example

HTML

<div id="example1" class="hot handsontable htColumnHeaders"></div>
<button class="req">Required switch</button>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/handsontable@8.3.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@8.3.1/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/8.3.1/components/numbro/dist/languages.min.js"></script>

JavaScript

let myrequired = false;
 let columns = [{
         data: 'id',
         type: 'numeric',
         required: false,
         validator: function(value, callback) {
						if (value === null || value === '') {
            	callback(false)
            } else {
            	callback(true)
            }
         }
       },
       {
         data: 'number',
         type: 'numeric',
         required: myrequired,
         validator: function(value, callback) {
           if (value !== null) {
             if (value < 100 && value > 10) {
               callback(true);
             } else {
               callback(false);
             }
           } else {
             callback(myrequired);
           }
         }
       },
     ];
     
 var container = document.getElementById('example1'),
   hot = new Handsontable(container, {
     data: [{
       id: 1,
       number: 23
     }, {
       id: 1,
       number: null
     }, {
       id: 1,
       number: 18
     }, ],
     colHeaders: true,
     columns
   });

 hot.validateCells()
 
 document.querySelector('.req').addEventListener('click', () => {
 	myrequired = !myrequired;
  console.log(myrequired)
  hot.updateSettings({
  	columns
  })
   hot.validateCells()
 })