Data

Once you've got a DataTable displayed on your page, you are going to want to have it display some data - that's the whole point after all! Typically in the Vue DataTables component you will do this in one of two ways:

• Ajax loading the data to display
• Using Reactive data

Ajax data

To load data for the table to display via Ajax, rather than using local Vue data, use the ajax property of the <DataTable> component. This property maps directly to ajax, and in the most simple case will take a string that points to the URL where the JSON data will be loaded from:

<script setup lang="ts">
    import DataTable, { Column } from 'datatables.net-vue3';
    import DtCore, { Options } from 'datatables.net-dt';

    // Assign DataTables core
    DataTable.use(DtCore);
</script>

<style>
    @import url('datatables.net-dt');
</style>

<template>
    <DataTable ajax="/data.json">
        <Column title="Name" data="name" />
        <Column title="Position" data="position" />
        <Column title="Office" data="office" />
        <Column title="Extn." data="extn" />
        <Column title="Start date" data="start_date" />
        <Column title="Salary" data="salary" />
    </DataTable>
</template>

Example: Ajax data example demonstrating how to use objects as the data source to populate the table via the columns.data option.

As the ajax property maps to ajax, you can also use it in the object form if you wish to have control over the Ajax request (see DataTable.AjaxOptions), for example setting the HTTP verb or adding headers to the request.

Reactive data

One of the most exciting and useful parts of Vue is reactive data. In summary this is where you update data (e.g. variable = 1) the UI will automatically update to reflect this change - however complex that change might be. The datatables.net-vue3 package fully supports Vue's reactive data and will automatically reflect the changes made to the data.

To make use of this ability, simply bind your data:

<script setup lang="ts">
    import { ref } from 'vue';

    import DataTable, { Column } from 'datatables.net-vue3';
    import DtCore from 'datatables.net-dt';

    DataTable.use(DtCore);

    const data = ref([]);

    // Assign values to `data`
    data.value.push({
        // ...
    });
</script>

<template>
    <DataTable class="display" :data="data">
      ...
    </DataTable>
</template>

Example: Reactive data

This example demonstrates the use of the DataTables API to dynamically update the table in responsive to Vue's reactive data. Note how we don't need to tell DataTables about the new data through any API method calls - it just updates automatically.