VTable usage issue: How to set only one column to not be selected for operation

Question title

How to set only one column that cannot be selected for operation

Problem description

How to click a cell in a column of a table without selecting it?

Solution

VTable provides disableSelectand disableHeaderSelectconfigurations in the column:

• DisableSelect: The content of this column is partially disabled

• disableHeaderSelect: Disable the selection of the header section of the list

Code example

const options = {
    columns: [
        {
            field: 'name',
            title: 'name',
            disableSelect: true,
            disableHeaderSelect: true
        },
        // ......
    ],
    //......
};

Full sample code (you can try pasting it into the editor ):

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto",
        disableSelect: true,
        disableHeaderSelect: true
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  columnWidthComputeMode: 'only-header'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })

Related Documents

Related api: https://www.visactor.io/vtable/option/ListTable-columns-text#disableSelect

github：https://github.com/VisActor/VTable