@creatiwity/datatable v1.0.24
Creat Datatable
:warning: This package is under development stay tuned. :warning:
Nuxt3 Typescript Simple Datatable that handles dynamic row content with generic typing
Features
- Table
- Generic typing
- Dynamic row content
- Sorting
Quick Setup
- 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 ✨
Usage
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>
Style
To change th and td style
const dataTableInfos = {
headers: [
{
id: "id",
label: "ID",
thClass: "centerth",
},
],
content: [
{
id: "id",
tdClass: "class",
},
],
};
Type
<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
Sort
<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
Filters
<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" }
Checkbox
<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" }
Pagination
<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)"
/>
5 months ago
9 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago