Creat Datatable

:warning: This package is under development stay tuned. :warning:

Nuxt3 Typescript Simple Datatable that handles dynamic row content with generic typing

• ✨  Release Notes

Features

•  Table
•  Generic typing
•  Dynamic row content
•  Sorting

Quick Setup

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

2. Add @creatiwity/datatable to the modules section of nuxt.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)"
/>