Getting started
1. ES module
Installation
npm install vue3-easy-data-table
yarn add vue3-easy-data-table
Regist globally
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';
const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);
Basic Example
<template>
<EasyDataTable
:headers="headers"
:items="items"
/>
</template>
<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";
const headers: Header[] = [
{ text: "PLAYER", value: "player" },
{ text: "TEAM", value: "team"},
{ text: "NUMBER", value: "number"},
{ text: "POSITION", value: "position"},
{ text: "HEIGHT", value: "indicator.height"},
{ text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
{ text: "LAST ATTENDED", value: "lastAttended", width: 200},
{ text: "COUNTRY", value: "country"},
];
const items: Item[] = [
{ player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
{ player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
{ player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
{ player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
];
</script>
| Stephen Curry | GSW | 30 | G | 6-2 | 185 | Davidson | USA |
| Lebron James | LAL | 6 | F | 6-9 | 250 | St. Vincent-St. Mary HS (OH) | USA |
| Kevin Durant | BKN | 7 | F | 6-10 | 240 | Texas-Austin | USA |
| Giannis Antetokounmpo | MIL | 34 | F | 6-11 | 242 | Filathlitikos | Greece |
2. Via CDN
<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>
<div id="app">
<easy-data-table
:headers="headers"
:items="items"
/>
</div>
Options api
open in new window
<script>
const App = {
components: {
EasyDataTable: window['vue3-easy-data-table'],
},
data () {
return {
headers: [
{ text: "PLAYER", value: "player" },
{ text: "TEAM", value: "team"},
{ text: "NUMBER", value: "number"},
{ text: "POSITION", value: "position"},
{ text: "HEIGHT", value: "indicator.height"},
{ text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
{ text: "LAST ATTENDED", value: "lastAttended", width: 200},
{ text: "COUNTRY", value: "country"},
],
items: [
{ player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
{ player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
{ player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
{ player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
],
}
},
};
Vue.createApp(App).mount('#app');
</script>
Composition api
open in new window
<script>
const { createApp, ref } = Vue;
const App = {
components: { EasyDataTable: window["vue3-easy-data-table"] },
setup() {
const headers = ref([
{ text: "PLAYER", value: "player" },
{ text: "TEAM", value: "team"},
{ text: "NUMBER", value: "number"},
{ text: "POSITION", value: "position"},
{ text: "HEIGHT", value: "indicator.height"},
{ text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
{ text: "LAST ATTENDED", value: "lastAttended", width: 200},
{ text: "COUNTRY", value: "country"},
]);
const items = ref([
{ player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
{ player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
{ player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
{ player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
]);
return {
headers,
items,
};
}
};
createApp(App).mount("#app");
</script>
| Stephen Curry | GSW | 30 | G | 6-2 | 185 | Davidson | USA |
| Lebron James | LAL | 6 | F | 6-9 | 250 | St. Vincent-St. Mary HS (OH) | USA |
| Kevin Durant | BKN | 7 | F | 6-10 | 240 | Texas-Austin | USA |
| Giannis Antetokounmpo | MIL | 34 | F | 6-11 | 242 | Filathlitikos | Greece |
