> For the complete documentation index, see [llms.txt](https://matanya.gitbook.io/vue-tables-2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matanya.gitbook.io/vue-tables-2/client-table.md).

# Client Table

Add the following element to your page wherever you want it to render.

Make sure to wrap it with a parent element you can latch your vue instance into.

```markup
<div id="people">
  <v-client-table :data="tableData" :columns="columns" :options="options"/>
</div>
```

Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:

```javascript
new Vue({
    el: "#people",
    data: {
        columns: ['id', 'name', 'age'],
        tableData: [
            { id: 1, name: "John", age: "20" },
            { id: 2, name: "Jane", age: "24" },
            { id: 3, name: "Susan", age: "16" },
            { id: 4, name: "Chris", age: "55" },
            { id: 5, name: "Dan", age: "40" }
        ],
        options: {
            // see the options API
        }
    }
});
```

{% hint style="info" %}
You can access the filtered dataset at any given moment by fetching the \`filteredData\` computed property of the table, using \`ref\` as a pointer (\`this.$refs.myTable.filteredData\`); This will return the current page. To access the entire filtered dataset use \`allFilteredData\` instead.
{% endhint %}

{% hint style="warning" %}
When loading data asynchronously add a \`v-if\` conditional to the component along with some \`loaded\` flag, so it will only compile once the data is attached.
{% endhint %}