Data table - Server side tables
Server-side Data tables are used for showing data coming from an API.
API
| Component | Description |
|---|---|
| v-data-table-server | Primary Component |
Examples
Server-side paginate and sort
To use data from an API, listen to the @update:options event to know when to fetch new data. Use the loading prop to display a progress bar while fetching the data.
Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) | Iron (%) |
|---|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 | 1 |
| Jelly bean | 375 | 0 | 94 | 0 | 0 |
| KitKat | 518 | 26 | 65 | 7 | 6 |
| Eclair | 262 | 16 | 23 | 6 | 7 |
| Gingerbread | 356 | 16 | 49 | 3.9 | 16 |
Server-side search
If you need to support search functionality, use the search prop to let the table know when new search input is available. Since the table does not actually do any filtering on its own, the search input does not need to be the actual value being searched for. In this example we have multiple values searchable, so we just make sure to set search to anything when we need to fetch new data.
Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) | Iron (%) |
|---|---|---|---|---|---|
| Frozen Yogurt | 159 | 6 | 24 | 4 | 1 |
| Jelly bean | 375 | 0 | 94 | 0 | 0 |
| KitKat | 518 | 26 | 65 | 7 | 6 |
| Eclair | 262 | 16 | 23 | 6 | 7 |
| Gingerbread | 356 | 16 | 49 | 3.9 | 16 |
Loading
You can use the loading prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the loading-text prop or the loading slot.
| Loading... Please wait |