Vue3 Datatable

https://vue3-datatable-document.vercel.app
Admin
Vue3 Datatable is a Vue.js component for creating interactive data tables with features like...
Tokens:59,631
Snippets:53
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Vue3 Datatable via Bower

Source: https://vue3-datatable-document.vercel.app/index

Installs the Vue3 Datatable component using Bower. A package manager for the web.

```bash
bower install @bhplugin/vue3-datatable --save
```

--------------------------------

### Install Vue3 Datatable via NPM

Source: https://vue3-datatable-document.vercel.app/index

Installs the Vue3 Datatable component using npm. This is the recommended method for most projects.

```bash
npm install @bhplugin/vue3-datatable --save
```

--------------------------------

### Install Vue3 Datatable via Yarn

Source: https://vue3-datatable-document.vercel.app/index

Installs the Vue3 Datatable component using Yarn. An alternative package manager to npm.

```bash
yarn add @bhplugin/vue3-datatable
```

--------------------------------

### Vue3 Datatable Actions Example

Source: https://vue3-datatable-document.vercel.app/actions

Demonstrates how to implement 'View' and 'Delete' actions within the Vue3 Datatable. This example shows the structure of data including an 'Actions' column with buttons.

```vue
<template>
  <vue3-datatable 
    :rows='rows' 
    :columns='columns'>
  </vue3-datatable>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import Vue3Datatable from '@bhargav25/vue3-datatable';

const rows = ref([
  { id: 1, first_name: 'Caroline', last_name: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', active: true, actions: 'ViewDelete' },
  { id: 2, first_name: 'Celeste', last_name: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', active: false, actions: 'ViewDelete' },
  { id: 3, first_name: 'Tillman', last_name: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', active: false, actions: 'ViewDelete' },
  { id: 4, first_name: 'Daisy', last_name: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', active: true, actions: 'ViewDelete' },
  { id: 5, first_name: 'Weber', last_name: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', active: false, actions: 'ViewDelete' },
  { id: 6, first_name: 'Buckley', last_name: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', active: true, actions: 'ViewDelete' },
  { id: 7, first_name: 'Latoya', last_name: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', active: true, actions: 'ViewDelete' },
  { id: 8, first_name: 'Kate', last_name: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', active: true, actions: 'ViewDelete' },
  { id: 9, first_name: 'Marva', last_name: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', active: false, actions: 'ViewDelete' },
  { id: 10, first_name: 'Decker', last_name: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', active: false, actions: 'ViewDelete' }
]);

const columns = ref([
  { key: 'id', title: 'ID', type: 'number', sort: true, display: true },
  { key: 'first_name', title: 'First Name', type: 'string', sort: true, display: true },
  { key: 'last_name', title: 'Last Name', type: 'string', sort: true, display: true },
  { key: 'email', title: 'Email', type: 'string', sort: true, display: true },
  { key: 'age', title: 'Age', type: 'number', sort: true, display: true },
  { key: 'birthdate', title: 'Birthdate', type: 'date', sort: true, display: true },
  { key: 'city', title: 'City', type: 'string', sort: true, display: true },
  { key: 'active', title: 'Active', type: 'boolean', sort: true, display: true },
  { key: 'actions', title: 'Actions', type: 'string', sort: false, display: true }
]);
</script>

```

--------------------------------

### Vue3 Datatable Skinning Examples

Source: https://vue3-datatable-document.vercel.app/skin

Demonstrates how to apply different visual styles (skins) to the Vue3 Datatable component, such as striped rows and hover effects. These examples showcase the component's flexibility in presentation.

```vue
<template>
  <vue3-datatable
    :rows="rows"
    :columns="cols"
    skin="stripes"
  ></vue3-datatable>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Vue3Datatable from '@bhargav25/vue3-datatable';

export default defineComponent({
  name: 'App',
  components: { Vue3Datatable },
  data() {
    return {
      cols: [
        { title: 'ID', field: 'id' },
        { title: 'First Name', field: 'firstName' },
        { title: 'Last Name', field: 'lastName' },
        { title: 'Email', field: 'email' },
        { title: 'Age', field: 'age' },
        { title: 'Birthdate', field: 'birthdate' },
        { title: 'City', field: 'city' },
        { title: 'Active', field: 'active' },
      ],
      rows: [
        { id: 1, firstName: 'Caroline', lastName: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', active: true },
        { id: 2, firstName: 'Celeste', lastName: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', active: false },
        { id: 3, firstName: 'Tillman', lastName: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', active: false },
        { id: 4, firstName: 'Daisy', lastName: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', active: true },
        { id: 5, firstName: 'Weber', lastName: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', active: false },
        { id: 6, firstName: 'Buckley', lastName: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', active: true },
        { id: 7, firstName: 'Latoya', lastName: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', active: true },
        { id: 8, firstName: 'Kate', lastName: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', active: true },
        { id: 9, firstName: 'Marva', lastName: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', active: false },
        { id: 10, firstName: 'Decker', lastName: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', active: false },
      ]
    };
  },
});
</script>

<style>
/* Add any specific styles for the striped skin if needed */
</style>
```

```vue
<template>
  <vue3-datatable
    :rows="rows"
    :columns="cols"
    skin="hover"
  ></vue3-datatable>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Vue3Datatable from '@bhargav25/vue3-datatable';

export default defineComponent({
  name: 'App',
  components: { Vue3Datatable },
  data() {
    return {
      cols: [
        { title: 'ID', field: 'id' },
        { title: 'First Name', field: 'firstName' },
        { title: 'Last Name', field: 'lastName' },
        { title: 'Email', field: 'email' },
        { title: 'Age', field: 'age' },
        { title: 'Birthdate', field: 'birthdate' },
        { title: 'City', field: 'city' },
        { title: 'Active', field: 'active' },
      ],
      rows: [
        { id: 1, firstName: 'Caroline', lastName: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', active: true },
        { id: 2, firstName: 'Celeste', lastName: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', active: false },
        { id: 3, firstName: 'Tillman', lastName: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', active: false },
        { id: 4, firstName: 'Daisy', lastName: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', active: true },
        { id: 5, firstName: 'Weber', lastName: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', active: false },
        { id: 6, firstName: 'Buckley', lastName: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', active: true },
        { id: 7, firstName: 'Latoya', lastName: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', active: true },
        { id: 8, firstName: 'Kate', lastName: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', active: true },
        { id: 9, firstName: 'Marva', lastName: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', active: false },
        { id: 10, firstName: 'Decker', lastName: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', active: false },
      ]
    };
  },
});
</script>

<style>
/* Add any specific styles for the hover skin if needed */
</style>
```

--------------------------------

### Vue3 Datatable Custom Page Size Example

Source: https://vue3-datatable-document.vercel.app/custom-page-size

Demonstrates how to customize the page size and display information for the Vue3 Datatable component. This example shows a table with custom data and pagination controls.

```vue
<template>
  <div class="container">
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        perPage: 15,
        infoFn: ({ from, to, totalRows }) =>
          `Showing ${from} to ${to} of ${totalRows} entries`,
      }"
    />
  </div>
</template>

<script>
import "vue-good-table-next/dist/vue-good-table.css";
import { VueGoodTable } from "vue-good-table-next";

export default {
  name: "custom-page-size",
  components: {
    VueGoodTable,
  },
  data() {
    return {
      columns: [
        { label: "ID", field: "id" },
        { label: "First Name", field: "firstName" },
        { label: "Last Name", field: "lastName" },
        { label: "Email", field: "email" },
        { label: "Age", field: "age" },
        { label: "Birthdate", field: "birthdate" },
        { label: "City", field: "city" },
        { label: "Active", field: "active" },
      ],
      rows: [
        { id: 1, firstName: "Caroline", lastName: "Jensen", email: "carolinejensen@zidant.com", age: 39, birthdate: "2004-05-28", city: "Temperanceville", active: true },
        { id: 2, firstName: "Celeste", lastName: "Grant", email: "celestegrant@polarax.com", age: 32, birthdate: "1989-11-19", city: "Bascom", active: false },
        { id: 3, firstName: "Tillman", lastName: "Forbes", email: "tillmanforbes@manglo.com", age: 26, birthdate: "2016-09-05", city: "Thynedale", active: false },
        { id: 4, firstName: "Daisy", lastName: "Whitley", email: "daisywhitley@applideck.com", age: 21, birthdate: "1987-03-23", city: "Idledale", active: true },
        { id: 5, firstName: "Weber", lastName: "Bowman", email: "weberbowman@volax.com", age: 26, birthdate: "1983-02-24", city: "Broadlands", active: false },
        { id: 6, firstName: "Buckley", lastName: "Townsend", email: "buckleytownsend@orbaxter.com", age: 40, birthdate: "2011-05-29", city: "Vallonia", active: true },
        { id: 7, firstName: "Latoya", lastName: "Bradshaw", email: "latoyabradshaw@opportech.com", age: 24, birthdate: "2010-11-23", city: "Lowgap", active: true },
        { id: 8, firstName: "Kate", lastName: "Lindsay", email: "katelindsay@gorganic.com", age: 24, birthdate: "1987-07-02", city: "Carlton", active: true },
        { id: 9, firstName: "Marva", lastName: "Sandoval", email: "marvasandoval@avit.com", age: 28, birthdate: "2010-11-02", city: "Tuskahoma", active: false },
        { id: 10, firstName: "Decker", lastName: "Russell", email: "deckerrussell@quilch.com", age: 27, birthdate: "1994-04-21", city: "Coultervillle", active: false },
        { id: 11, firstName: "Odom", lastName: "Mills", email: "odommills@memora.com", age: 34, birthdate: "2010-01-24", city: "Churchill", active: true },
        { id: 12, firstName: "Sellers", lastName: "Walters", email: "sellerswalters@zorromop.com", age: 28, birthdate: "1975-11-12", city: "Gloucester", active: true },
        { id: 13, firstName: "Wendi", lastName: "Powers", email: "wendipowers@orboid.com", age: 31, birthdate: "1979-06-02", city: "Elliott", active: true },
        { id: 14, firstName: "Sophie", lastName: "Horn", email: "sophiehorn@snorus.com", age: 22, birthdate: "2018-09-20", city: "Homestead", active: true },
        { id: 15, firstName: "Levine", lastName: "Rodriquez", email: "levinerodriquez@xth.com", age: 27, birthdate: "1973-02-08", city: "Weedville", active: true }
      ]
    };
  },
};
</script>

<style>
.container {
  padding: 20px;
}
</style>
```

--------------------------------

### Vue3 Datatable Methods and Filtering

Source: https://vue3-datatable-document.vercel.app/methods

Demonstrates common methods for interacting with the Vue3 Datatable, such as getting filtered rows, visible rows, selected rows, and clearing selections. It also includes examples of row selection and column filtering with various operators.

```javascript
Get Filtered Rows
Get Visible Rows
Get Selected Rows
Clear Selected Rows
Select 2nd Rows
Unselect 2nd Row
Check 2nd Row Selected
Get Column Filters
Reset
```

--------------------------------

### Vue3 Datatable Basic Usage Example

Source: https://vue3-datatable-document.vercel.app/basic

Demonstrates the basic structure and data display of the Vue3 Datatable component. It shows how to define columns and render data rows.

```vue
<template>
  <vue3-datatable
    :rows="rows"
    :columns="cols"
    :sortable="true"
    :searchable="true"
    :paginated="true"
    :pageSize="10"
  ></vue3-datatable>
</template>

<script setup>
import { ref } from 'vue';
import Vue3Datatable from '@bhaveshpatel200/vue3-datatable';

const cols = ref([
  { title: 'ID', field: 'id' },
  { title: 'First Name', field: 'firstName' },
  { title: 'Last Name', field: 'lastName' },
  { title: 'Email', field: 'email' },
  { title: 'Age', field: 'age' },
  { title: 'Birthdate', field: 'birthdate' },
  { title: 'City', field: 'city' },
  { title: 'Active', field: 'active' },
]);

const rows = ref([
  { id: 1, firstName: 'Caroline', lastName: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', active: true },
  { id: 2, firstName: 'Celeste', lastName: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', active: false },
  { id: 3, firstName: 'Tillman', lastName: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', active: false },
  { id: 4, firstName: 'Daisy', lastName: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', active: true },
  { id: 5, firstName: 'Weber', lastName: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', active: false },
  { id: 6, firstName: 'Buckley', lastName: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', active: true },
  { id: 7, firstName: 'Latoya', lastName: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', active: true },
  { id: 8, firstName: 'Kate', lastName: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', active: true },
  { id: 9, firstName: 'Marva', lastName: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', active: false },
  { id: 10, firstName: 'Decker', lastName: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', active: false },
]);
</script>

<style>
/* Add any necessary styles here */
</style>
```

--------------------------------

### Vue3 Datatable Alt Pagination Example

Source: https://vue3-datatable-document.vercel.app/alt-pagination

Demonstrates an alternative pagination approach for Vue3 Datatable, showcasing how to display data with custom pagination controls and table headers. This example includes sample data and pagination navigation.

```vue
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Age</th>
          <th>Birthdate</th>
          <th>City</th>
          <th>Active</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.firstName }}</td>
          <td>{{ item.lastName }}</td>
          <td>{{ item.email }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.birthdate }}</td>
          <td>{{ item.city }}</td>
          <td>{{ item.active }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <span>Showing 1 to {{ data.length }} of 500 entries</span>
      <button>10</button>
      <button>20</button>
      <button>30</button>
      <button>50</button>
      <button>100</button>
      <button>First</button>
      <button>Prev</button>
      <span>123</span>
      <button>Next</button>
      <button>Last</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, firstName: 'Caroline', lastName: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', active: true },
        { id: 2, firstName: 'Celeste', lastName: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', active: false },
        { id: 3, firstName: 'Tillman', lastName: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', active: false },
        { id: 4, firstName: 'Daisy', lastName: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', active: true },
        { id: 5, firstName: 'Weber', lastName: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', active: false },
        { id: 6, firstName: 'Buckley', lastName: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', active: true },
        { id: 7, firstName: 'Latoya', lastName: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', active: true },
        { id: 8, firstName: 'Kate', lastName: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', active: true },
        { id: 9, firstName: 'Marva', lastName: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', active: false },
        { id: 10, firstName: 'Decker', lastName: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', active: false }
      ]
    };
  }
};
</script>

<style scoped>
.pagination {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
```

--------------------------------

### Vue3 Datatable Sorting Example

Source: https://vue3-datatable-document.vercel.app/sorting

Demonstrates how to implement sorting functionality in Vue3 Datatable. This example shows a table with sortable columns for various data fields.

```vue
<template>
  <vue3-datatable
    :rows="rows"
    :columns="cols"
    :sortable="true"
    :columnFilter="true"
    :export="true"
    skin="table-hover table-striped"
    class="table-bordered"
  ></vue3-datatable>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Vue3Datatable from '@bhargav25/vue3-datatable';

export default defineComponent({
  name: 'App',
  components: {
    Vue3Datatable
  },
  data() {
    return {
      cols: [
        { title: 'ID', field: 'id', isUniqueId: true, type: 'number', sort: true },
        { title: 'First Name', field: 'firstName', sort: true },
        { title: 'Last Name', field: 'lastName', sort: true },
        { title: 'Email', field: 'email', sort: true },
        { title: 'Age', field: 'age', type: 'number', sort: true },
        { title: 'Birthdate', field: 'birthdate', type: 'date', sort: true },
        { title: 'City', field: 'city', sort: true },
        { title: 'Active', field: 'isActive', type: 'boolean', sort: true },
      ],
      rows: [
        { id: 1, firstName: 'Caroline', lastName: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', isActive: true },
        { id: 2, firstName: 'Celeste', lastName: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', isActive: false },
        { id: 3, firstName: 'Tillman', lastName: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', isActive: false },
        { id: 4, firstName: 'Daisy', lastName: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', isActive: true },
        { id: 5, firstName: 'Weber', lastName: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', isActive: false },
        { id: 6, firstName: 'Buckley', lastName: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', isActive: true },
        { id: 7, firstName: 'Latoya', lastName: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', isActive: true },
        { id: 8, firstName: 'Kate', lastName: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', isActive: true },
        { id: 9, firstName: 'Marva', lastName: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', isActive: false },
        { id: 10, firstName: 'Decker', lastName: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', isActive: false },
      ]
    };
  }
});
</script>

<style>
.table-hover tbody tr:hover {
  background-color: #f5f5f5;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}
</style>
```

--------------------------------

### Vue3 DataTable Data Examples

Source: https://vue3-datatable-document.vercel.app/pagination-hide

Sample data records for populating a Vue3 DataTable. Each record includes personal information and location details.

```text
283 | Craft | Frye | craftfrye@verton.com | 29 | 2020-06-15 | Caberfae | false  
284 | Mildred | Lynn | mildredlynn@nspire.com | 34 | 2016-09-25 | Chicopee | true  
285 | Moses | Nolan | mosesnolan@zoarere.com | 21 | 1992-09-04 | Lindcove | false  
286 | Shanna | Clemons | shannaclemons@nexgene.com | 38 | 1979-04-25 | Dotsero | false  
287 | Pope | Hamilton | popehamilton@microluxe.com | 21 | 2018-05-23 | Sheatown | true  
288 | Gracie | Waller | graciewaller@zaya.com | 37 | 1999-11-27 | Iola | false  
289 | Stacy | Gates | stacygates@hyplex.com | 35 | 1992-01-29 | Coalmont | false  
290 | Cecile | House | cecilehouse@kangle.com | 36 | 2015-05-30 | Cassel | false  
291 | Arnold | Mckee | arnoldmckee@junipoor.com | 40 | 1976-02-15 | Juntura | false  
292 | Cross | Hudson | crosshudson@buzzopia.com | 22 | 2022-06-21 | Jacksonwald | false  
293 | Owen | Frederick | owenfrederick@pigzart.com | 26 | 2007-07-17 | Fredericktown | true  
294 | Desiree | Hooper | desireehooper@supportal.com | 34 | 1982-06-02 | Summertown | true  
295 | Jody | Gamble | jodygamble@gallaxia.com | 24 | 1989-12-07 | Rosine | false  
296 | Barron | Nielsen | barronnielsen@decratex.com | 35 | 1995-08-16 | Bloomington | true  
297 | Hodge | Henderson | hodgehenderson@bleendot.com | 26 | 2022-04-01 | Smock | false  
298 | Skinner | Carroll | skinnercarroll@zillacom.com | 38 | 2003-05-20 | Corinne | true  
299 | Wilkerson | Lynch | wilkersonlynch@medcom.com | 22 | 2013-11-28 | Thornport | false  
300 | Lewis | Juarez | lewisjuarez@jamnation.com | 24 | 2016-03-20 | Welch | true  
301 | Lela | Erickson | lelaerickson@freakin.com | 34 | 2013-07-23 | Cuylerville | true  
302 | Janice | Leon | janiceleon@panzent.com | 37 | 1992-05-24 | Elizaville | false  
303 | Deborah | Good | deborahgood@aquoavo.com | 30 | 2009-02-11 | Brazos | true  
304 | Thelma | Marsh | thelmamarsh@unq.com | 39 | 1979-09-04 | Trexlertown | true  
305 | Loraine | Dillard | lorainedillard@portica.com | 27 | 1996-01-26 | Carlos | false  
306 | Wiley | Obrien | wileyobrien@mitroc.com | 28 | 2006-02-12 | Berlin | false  
307 | Mcmahon | Neal | mcmahonneal@zoinage.com | 31 | 2008-10-01 | Grahamtown | true  
308 | Fernandez | Acosta | fernandezacosta@exostream.com | 33 | 1992-05-05 | Why | true  
309 | Casandra | Pruitt | casandrapruitt@cofine.com | 23 | 1994-04-02 | Loretto | true  
310 | Leola | Osborne | leolaosborne@dadabase.com | 33 | 1972-04-15 | Westmoreland | false  
311 | Debbie | Lloyd | debbielloyd@mondicil.com | 20 | 1996-12-13 | Albrightsville | false  
312 | Ayers | Sloan | ayerssloan@thredz.com | 35 | 1987-05-19 | Jugtown | false  
313 | Audra | Robbins | audrarobbins@genmom.com | 27 | 2018-01-17 | Glasgow | true  
314 | Kristen | Whitfield | kristenwhitfield@songbird.com | 22 | 2015-07-19 | Northridge | true  
315 | Vincent | Sheppard | vincentsheppard@zanity.com | 35 | 2011-08-06 | Bynum | false  
316 | Short | Valenzuela | shortvalenzuela@ecrater.com | 36 | 1982-03-11 | Tooleville | true  
317 | April | Boyer | aprilboyer@quonata.com | 37 | 2006-02-24 | Homeworth | true  
318 | Lucinda | Albert | lucindaalbert@futurity.com | 26 | 1982-01-18 | Spokane | false  
319 | Sanchez | Knowles | sanchezknowles@photobin.com | 21 | 1980-08-20 | Day | false  
320 | Garcia | Wong | garciawong@signity.com | 26 | 1994-12-20 | Itmann | false  
321 | Carmela | Fields | carmelafields@frosnex.com | 33 | 1988-10-22 | Ballico | false  
322 | Elnora | Hull | elnorahull@netur.com | 22 | 2016-06-19 | Whipholt | false  
323 | Bowen | Avila | bowenavila@daycore.com | 24 | 1990-01-06 | Derwood | false  
324 | Webb | Sullivan | webbsullivan@prowaste.com | 25 | 2021-01-19 | Ada | true  
325 | Patricia | Mitchell | patriciamitchell@geekmosis.com | 33 | 2004-07-13 | Bluetown | false  
326 | Hebert | Castaneda | hebertcastaneda@emoltra.com | 25 | 1993-05-16 | Basye | true  
327 | Fischer | Barton | fischerbarton@quinex.com | 37 | 2014-02-26 | Snowville | false  
328 | Aurora | Washington | aurorawashington@melbacor.com | 22 | 2012-01-10 | Vincent | false  
329 | Rutledge | Moon | rutledgemoon@locazone.com | 23 | 1982-10-12 | Whitehaven | false  
330 | Bryan | Newton | bryannewton@acruex.com | 35 | 1980-03-24 | Edneyville | true  
331 | Cummings | Harris | cummingsharris@housedown.com | 36 | 1976-07-02 | Jennings | true  
332 | Alissa | Conrad | alissaconrad@cablam.com | 32 | 1972-11-26 | Aurora | true  
333 | Leonor | Mcfadden | leonormcfadden@parcoe.com | 29 | 1977-03-09 | Breinigsville | false  
334 | Oneill | Baird | oneillbaird@skinserve.com | 29 | 1990-09-19 | Westphalia | true  
335 | Virgie | Winters | virgiewinters@conjurica.com | 23 | 1984-04-28 | Jamestown | false  
336 | Rodriquez | Cameron | rodriquezcameron@extrawear.com | 33 | 2009-09-10 | Newcastle | true  
337 | Nita | Anthony | nitaanthony@greeker.com | 37 | 1972-01-30 | Kansas | true  
338 | Santos | Weeks | santosweeks@baluba.com | 22 | 1980-02-20 | Allensworth | true  
```

--------------------------------

### Vue3 Datatable - Clone Header in Footer Example

Source: https://vue3-datatable-document.vercel.app/header-clone

Demonstrates how to clone the header of a Vue3 Datatable component and display it in the footer. This example showcases a common UI pattern for large tables.

```vue
<template>
  <div id="app">
    <vue3-datatable 
      :rows="rows"
      :columns="cols"
      :cloneHeaderInFooter="true"
    ></vue3-datatable>
  </div>
</template>

<script>
import Vue3Datatable from '@bhargavsura/vue3-datatable';

export default {
  name: 'App',
  components: {
    Vue3Datatable
  },
  data() {
    return {
      cols: [
        { title: 'ID', field: 'id' },
        { title: 'First Name', field: 'firstName' },
        { title: 'Last Name', field: 'lastName' },
        { title: 'Email', field: 'email' },
        { title: 'Age', field: 'age' },
        { title: 'Birthdate', field: 'birthdate' },
        { title: 'City', field: 'city' },
        { title: 'Active', field: 'active' },
      ],
      rows: [
        { id: 1, firstName: 'Caroline', lastName: 'Jensen', email: 'carolinejensen@zidant.com', age: 39, birthdate: '2004-05-28', city: 'Temperanceville', active: true },
        { id: 2, firstName: 'Celeste', lastName: 'Grant', email: 'celestegrant@polarax.com', age: 32, birthdate: '1989-11-19', city: 'Bascom', active: false },
        { id: 3, firstName: 'Tillman', lastName: 'Forbes', email: 'tillmanforbes@manglo.com', age: 26, birthdate: '2016-09-05', city: 'Thynedale', active: false },
        { id: 4, firstName: 'Daisy', lastName: 'Whitley', email: 'daisywhitley@applideck.com', age: 21, birthdate: '1987-03-23', city: 'Idledale', active: true },
        { id: 5, firstName: 'Weber', lastName: 'Bowman', email: 'weberbowman@volax.com', age: 26, birthdate: '1983-02-24', city: 'Broadlands', active: false },
        { id: 6, firstName: 'Buckley', lastName: 'Townsend', email: 'buckleytownsend@orbaxter.com', age: 40, birthdate: '2011-05-29', city: 'Vallonia', active: true },
        { id: 7, firstName: 'Latoya', lastName: 'Bradshaw', email: 'latoyabradshaw@opportech.com', age: 24, birthdate: '2010-11-23', city: 'Lowgap', active: true },
        { id: 8, firstName: 'Kate', lastName: 'Lindsay', email: 'katelindsay@gorganic.com', age: 24, birthdate: '1987-07-02', city: 'Carlton', active: true },
        { id: 9, firstName: 'Marva', lastName: 'Sandoval', email: 'marvasandoval@avit.com', age: 28, birthdate: '2010-11-02', city: 'Tuskahoma', active: false },
        { id: 10, firstName: 'Decker', lastName: 'Russell', email: 'deckerrussell@quilch.com', age: 27, birthdate: '1994-04-21', city: 'Coultervillle', active: false },
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

```
Tokens:
Raw