Data table - Virtual tables
The v-data-table-virtual component relies on all data being available locally. But unlike the standard data-table it uses virtualization to only render a small portion of the rows. This makes it well suited for displaying large data sets. It supports sorting and filtering, but not pagination.
API
| Component | Description |
|---|---|
| v-data-table-virtual | Primary Component |
Toggle Inline API
Examples
Basic example
Boat Type | Speed(knots) | Length(m) | Price($) | Year |
|---|---|---|---|---|
| Speedster #0 | 35 | 22 | $300,000 | 2021 |
| OceanMaster #1 | 25 | 35 | $500,000 | 2020 |
| Voyager #2 | 20 | 45 | $700,000 | 2019 |
| WaveRunner #3 | 40 | 19 | $250,000 | 2022 |
| SeaBreeze #4 | 28 | 31 | $450,000 | 2018 |
| HarborGuard #5 | 18 | 50 | $800,000 | 2017 |
| SlickFin #6 | 33 | 24 | $350,000 | 2021 |
| StormBreaker #7 | 22 | 38 | $600,000 | 2020 |
| WindSail #8 | 15 | 55 | $900,000 | 2019 |
| FastTide #9 | 37 | 20 | $280,000 | 2022 |
| Speedster #10 | 35 | 22 | $300,000 | 2021 |
| OceanMaster #11 | 25 | 35 | $500,000 | 2020 |
| Voyager #12 | 20 | 45 | $700,000 | 2019 |
| WaveRunner #13 | 40 | 19 | $250,000 | 2022 |
| SeaBreeze #14 | 28 | 31 | $450,000 | 2018 |
| HarborGuard #15 | 18 | 50 | $800,000 | 2017 |
| SlickFin #16 | 33 | 24 | $350,000 | 2021 |
| StormBreaker #17 | 22 | 38 | $600,000 | 2020 |
| WindSail #18 | 15 | 55 | $900,000 | 2019 |
| FastTide #19 | 37 | 20 | $280,000 | 2022 |
| Speedster #20 | 35 | 22 | $300,000 | 2021 |
| OceanMaster #21 | 25 | 35 | $500,000 | 2020 |
| Voyager #22 | 20 | 45 | $700,000 | 2019 |
| WaveRunner #23 | 40 | 19 | $250,000 | 2022 |
| SeaBreeze #24 | 28 | 31 | $450,000 | 2018 |
When customizing rows with the #item slot, you must bind the provided itemRef to your <tr>. This ensures that the virtual scroller can correctly measure and recycle rows.
ID | Title | Name | Email | Role |
|---|---|---|---|---|
| 1 | Mr. | James Smith | james.smith@gmail.com | Owner |
| 2 | Ms. | Mary Johnson | mary.johnson@yahoo.com | Manager |
| 3 | Dr. | Robert Williams | robert.williams@outlook.com | Board Member |
| 4 | Mrs. | Patricia Brown | patricia.brown@hotmail.com | Developer |
| 5 | Mr. | John Davis | john.davis@gmail.com | Designer |
| 6 | Ms. | Jennifer Garcia | jennifer.garcia@yahoo.com | Manager |
| 7 | Mr. | Michael Miller | michael.miller@outlook.com | Owner |
| 8 | Mrs. | Linda Martinez | linda.martinez@hotmail.com | Developer |
| 9 | Dr. | William Rodriguez | william.rodriguez@gmail.com | Board Member |
| 10 | Ms. | Elizabeth Hernandez | elizabeth.hernandez@yahoo.com | Designer |
| 11 | Mr. | David Lopez | david.lopez@outlook.com | Manager |
| 12 | Mrs. | Barbara Gonzalez | barbara.gonzalez@hotmail.com | Owner |
| 13 | Mr. | James Smith | james.smith@gmail.com | Owner |
| 14 | Ms. | Mary Johnson | mary.johnson@yahoo.com | Manager |
| 15 | Dr. | Robert Williams | robert.williams@outlook.com | Board Member |
| 16 | Mrs. | Patricia Brown | patricia.brown@hotmail.com | Developer |
| 17 | Mr. | John Davis | john.davis@gmail.com | Designer |
| 18 | Ms. | Jennifer Garcia | jennifer.garcia@yahoo.com | Manager |
| 19 | Mr. | Michael Miller | michael.miller@outlook.com | Owner |
| 20 | Mrs. | Linda Martinez | linda.martinez@hotmail.com | Developer |
| 21 | Dr. | William Rodriguez | william.rodriguez@gmail.com | Board Member |
| 22 | Ms. | Elizabeth Hernandez | elizabeth.hernandez@yahoo.com | Designer |
| 23 | Mr. | David Lopez | david.lopez@outlook.com | Manager |
| 24 | Mrs. | Barbara Gonzalez | barbara.gonzalez@hotmail.com | Owner |
| 25 | Mr. | James Smith | james.smith@gmail.com | Owner |
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.