RayQuestion 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
