"
🚀 DataGridXL3 Out Now! See what's new→
NOTE: DataGridXL requires a commercial license.
Create an account to download a trial version of DataGridXL to follow the steps in this tutorial.

DataGridXL — Docs

Built-in Column Types

Column Type: Checkbox

The checkbox column type is a built-in column type with useful features.

If you have a data field that is of a boolean type (true/false), make this column of type checkbox.

javascript
const data = [
  {
    category: "cars",
    hasDiscount: true
  },
  {
    category: "bikes",
    hasDiscount: false
  },
  {
    category: "planes",
    hasDiscount: false
  }
];
javascript
const columns = [
  {
    title: "Has Discount",
    source: "hasDiscount"
    type: "checkbox"
  }
]

Setting the type to "checkbox" is a shortcut to these column settings:

javascript
{
  isToggle: true,
  values: [true, false],
  align: 'center',
  parseFunction: function(cellValue){
    if(cellValue == 'false' || cellValue == 'FALSE' || !cellValue){
      return false;
    } else {
      return true;
    }
  },
  validateFunction: function(cell){
    if(typeof cell.value == 'boolean'){
      return true;
    } else {
      return false;
    }
  },
  hideText: true
}

isToggle

Set isToggle: true to toggle between values by pressing the spacebar. Any cell value with isToggle: true that is inside the user's cell selection will toggle between the 2 given values.

values

When isToggle is true, DataGridXL expects values to be set. Currently, it is only possible to toggle between two values.

For your boolean field, this is [true, false] but you could make this any trueValue, falseValue; even strings.

javascript
// values: [trueValue, falseValue]
values: ["on", "off"]