DEV Community

方帅
方帅

Posted on

How to manually update the state when using the Checkbox in the VTable component?

Problem Title

Problem Description
Is there a way to manually set the checkbox of the ListTable in VTable, and how to clear the selected state of all checkboxes?

Solution

Call the interface to update the state
You can call the interface setCellCheckboxState. This interface can set the checkbox state of a cell, and is defined as follows:

setCellCheckboxState(col: number, row: number, checked: boolean) => void
Enter fullscreen mode Exit fullscreen mode

Parameter description:

  • col: Column number
  • row: Row number
  • checked: Whether checked Example: tableInstance.setCellCheckboxState(0, 3, true) sets the Checkbox state of the cell at position (0, 3) to checked state. The demo effect after modifying the official website is as follows: https://visactor.io/vtable/demo/cell-type/checkbox

Image description

Batch update status:
For the second question about batch update, currently, there is no dedicated interface to reset the status of all checkboxes. However, you can achieve the goal of updating all checkbox statuses by resetting the data using setRecords or updating the column configuration using updateColumns.

  1. Update through column configuration Add "checked" as true or false in the column configuration to set the status of the entire column. However, if there is a field in the data records indicating the status, the data record will prevail.

Image description

  1. To batch set the checkbox status by updating the records data source, it is required to explicitly specify the checkbox value fields in the records.

Image description

Related documents

Tutorial on checkbox type usage: https://visactor.io/vtable/guide/cell_type/checkbox
Checkbox demo: https://visactor.io/vtable/demo/cell-type/checkbox
Related API:https://visactor.io/vtable/option/ListTable-columns-checkbox#cellType
https://visactor.io/vtable/api/Methods#setCellCheckboxState
github:https://github.com/VisActor/VTable

Top comments (0)