# 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.

```html
<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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ryunosukee.gitbook.io/vue3-datatables/client-table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.