VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content
Tags: visactor, vtable
Published: 2024-04-26 09:06:53

### Question title

How to get the total number of rows in the table and the actual height of the content  

  

### Problem Description

How to obtain the total number of rows in the current table and the actual height of the content from the table instance through the API  

  

### Solution 

1. 1. The `colCount` and `rowCount` attributes in the table instance can obtain the number of rows and columns of the current table.  

1. The table example provides methods `getAllRowsHeight` and `getAllColsWidth`, which can obtain the total column width and total row height of the current table content.  

  

### Code example


```javascript
const tableInstance = new VTable.ListTable(container, option);

console.log(tableInstance.colCount);
console.log(tableInstance.rowCount);
console.log(tableInstance.getAllRowsHeight());
console.log(tableInstance.getAllColsWidth());
```

### Results display 

|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9jb18uhcpegprc4tu7y.png)|![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39haacllmygdui4rw42k.png)|
|-|-|

Complete sample code (you can paste it into the [editor](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) to try it out):  


```typescript
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"
    },
    {
        "field": "Category",
        "title": "Category",
        "width": "auto"
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto"
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    },
    {
        "field": "City",
        "title": "City",
        "width": "auto"
    },
    {
        "field": "Order Date",
        "title": "Order Date",
        "width": "auto"
    },
    {
        "field": "Quantity",
        "title": "Quantity",
        "width": "auto"
    },
    {
        "field": "Sales",
        "title": "Sales",
        "width": "auto"
    },
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto"
    }
];

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

console.log(tableInstance.colCount);
console.log(tableInstance.rowCount);
console.log(tableInstance.getAllRowsHeight());
console.log(tableInstance.getAllColsWidth());
    })
```

### Related documents

Related API：  

https://www.visactor.io/vtable/api/Properties#rowCount  

https://www.visactor.io/vtable/api/Properties#colCount  

https://www.visactor.io/vtable/api/Methods#getAllColsWidth  

https://www.visactor.io/vtable/api/Methods#getAllRowsHeight  

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