Switch Cell Type

Switch cell type is suitable for providing switch states in tables, allowing users to select or deselect one or more items. The interactive capability provided by switch cell type is widely used in many applications.

Switch-specific Configuration Options

The switch cell type has the following specific configuration options:

checked: Whether the cell is in checked state, default value is false. Supports function configuration, can be different for different cells.
disable: Whether the switch can be disabled for clicking, default value is false. Supports function configuration, can be different for different cells.
checkedText: Specifies the text for checked state, supports function configuration.
uncheckedText: Specifies the text for unchecked state, supports function configuration.

Example:

{
  field: 'switch', // Specify the cell's field
  cellType: 'switch', // Specify the cell to display as switch type
  checked: true,
  disable: false,
  checkedText: 'on', // Specify text for checked state, supports function configuration
  uncheckedText: 'off', // Specify text for unchecked state, supports function configuration
  style: {
    // Specify text style
    color: '#FFF',
    // ......
    // Specify switch style
    switchStyle: {
      boxWidth: 40, // Specify switch width
      boxHeight: 20, // Specify switch height
      // ......
    }
  }
}

Switch Data Types

The switch cell type supports boolean or Object data types, or defaults to false if no value is set.

Setting boolean type is most common among the three types. Example switch field configuration:

const columns = [
  // ......
  {
    field: 'switch',
    cellType: 'switch'
  }
];
const records = [
  { name: 'a', switch: true },
  { name: 'b', switch: false }
];

Setting Object type supports configuring checked and disable. Example switch field configuration:

const columns = [
  // ......
  {
    field: 'switch',
    cellType: 'switch'
  }
];
const records = [
  { name: 'a', switch: { checked: true, disable: false } },
  { name: 'b', switch: { checked: false, disable: true } }
];

checked: Whether the cell's switch is checked
disable: Whether the cell's switch is disabled

Both checked and disable can be configured in data or in column. Configuration in data takes higher priority than configuration in column.

Switch State Update Event

When the switch state is updated, it triggers the VTable.ListTable.EVENT_TYPE.SWITCH_STATE_CHANGE event.

instance.on(VTable.ListTable.EVENT_TYPE.SWITCH_STATE_CHANGE, e => {
  console.log(VTable.ListTable.EVENT_TYPE.SWITCH_STATE_CHANGE, e.col, e.row, e.checked);
});

Getting Switch States via API

Get switch states for all data under a specific field.

Note: The order corresponds to the original input records data, not the table display row state values

getSwitchState(field?: string | number): Array

Get switch state for a specific cell.

getCellSwitchState(col: number, row: number): boolean

Setting Switch States via API

Set switch state for a specific cell.