Question title
How to make the table automatically calculate column width based only on the content width of the table header
Problem description
In automatic width mode, you want the width of a column to be determined only by the content width of the header cell and not affected by the content cell.
Solution
VTable provides columnWidthComputeMode
configuration for specifying the bounded areas that are involved in content width calculations:
'Only-header ': Only the header content is calculated.
'Only-body ': Only calculate the content of the body cell.
'Normal ': Calculate normally, that is, calculate the contents of the header and body cells.
Code example
const options = {
//......
columnWidthComputeMode: 'only-header'
};
Results show
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"
},
{
"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#columnWidthComputeMode
Top comments (0)