Vue Bootstrap b-table lazy load data

Question

So in the simplest way, I'm using Vue Bootstrap as a framework for my project.

I need to add a custom table to my project, with data that can have thousands of cells (100+ columns and 1k+ rows).

I don't want to render 100% of the table on component mount. I want to render only the visible data (maybe a little bit more), and as the user scrolls X or Y, more cells will be lazy rendered.

I would prefer sticking to Boostrap Vue's table rather than having to use an external library just for the table unless it's needed.

What's the best way to achieve this?

Hope you're day is going well!

Answer 1

You can use items prop which accepts "items provider function" to fetch data from the remote database. Use pagination and filtering in your API request and only fetch required data like 10 items on each request and render just 10 items in the table.

You can find example in official docs here.