Nuxt3 Typescript Simple Datatable that handles dynamic row content with generic typing
- Table
- Generic typing
- Dynamic row content
- Sorting
- Add
@creatiwity/datatable
dependency to your project
# Using pnpm
pnpm add @creatiwity/datatable
# Using yarn
yarn add @creatiwity/datatable
# Using npm
npm install @creatiwity/datatable
- Add
@creatiwity/datatable
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["@creatiwity/datatable"],
});
That's it! You can now use Creat Datatable in your Nuxt app ✨
const dataTableInfos = {
headers: [
{
id: "name",
label: "Nom",
sortable: false, // default: true
},
],
data: [{ name: "Toto" }, { name: "Tata" }],
};
<CreatDatable id="creat-datatable" :infos="dataTableInfos" table-class="class">
<template #header-name="category">
<span>{{ category.data.name }}</span>
<input />
</template>
<template #name="category">
<strong>{{ category.data.name }}</strong>
</template>
<template #empty-state>
<p>No data</p>
</template>
</CreatDatable>
To change th and td style
const dataTableInfos = {
headers: [
{
id: "id",
label: "ID",
thClass: "centerth",
},
],
content: [
{
id: "id",
tdClass: "class",
},
],
};
<CreatDatable type="local" />
By default type is local
Type local
will directly change the dataTable data depending on the actions
With the type remote
you need to add v-model to control the data change
<CreatDatable v-model:sort="sorting" />
const dataTableInfos = {
headers: [
{
id: "firstname",
label: "Prénom",
sortable: true,
},
],
};
const sorting = ref(["firstname", "desc"]);
Set the id you want to sort and the direction desc
or asc
<CreatDatable
v-model:filters="filtering"
:filters-config="{
class: 'class',
}"
/>
const dataTableInfos = {
headers: [
{
id: "firstname",
label: "Prénom",
filtering: true,
},
],
};
const filtering = ref({});
On input it will return data like this filtering = { "firstname": "j" }
<CreatDatable
v-model:checkbox="checkbox"
:checkbox-config="{
overFilterMode: 'delete',
class: 'checkboxTest',
}"
/>
overFilterMode
is to be used with the filters
action, by default it's set to keep
so when the checkbox of a line is selected it's doesn't deselect all the checkbox if you are typing in a filter input.
And the mode delete
clear all the checkbox if you are typing in a filter input
const checkbox = ref([]);
On checkbox selection the array will look like [{ id: 0, firstname: "John" }, { id: 1, firstname: "Jack" }]
<CreatDatable
:pagination-config="{
itemsPerPage: 5,
currentPage: 1,
nbItems: 20,
paginationClass: 'class',
previousButtonClass: 'class',
nextButtonClass: 'class',
}"
:on-page-change="(page) => console.log('new page index = ', page)"
/>