VTable usage issue: How to make the table automatically calculate column width based only on the table header

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 columnWidthComputeModeconfiguration 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

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