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" }],
};

<CreatDataTable 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>
</CreatDataTable>

Slots

Sorting Icon Slot

You can customize the sorting icon using the #sorting-icon slot:

<CreatDataTable id="creat-datatable" :infos="dataTableInfos">
  <template #sorting-icon="{ direction, headerId }">
    <span v-if="direction === 'asc'">↑</span>
    <span v-else-if="direction === 'desc'">↓</span>
    <span v-else>○</span>
  </template>
</CreatDataTable>

Checkbox Slots

You can customize the checkboxes in the header and cells using the #checkbox-header and #checkbox-cell slots:

<CreatDataTable id="creat-datatable" :infos="dataTableInfos" :checkbox-config="{}">
  <template #checkbox-header="{ checked, toggleCheckbox }">
    <input type="checkbox" :checked="checked" @click="toggleCheckbox" />
  </template>
  <template #checkbox-cell="{ row, checked, toggleCheckbox }">
    <input type="checkbox" :checked="checked" @click="toggleCheckbox" />
  </template>
</CreatDataTable>

Pagination Slot

You can customize the pagination using the #pagination slot:

<CreatDataTable id="creat-datatable" :infos="dataTableInfos" :pagination-config="{ itemsPerPage: 5 }">
  <template #pagination="{ currentPage, maxPage, changePage }">
    <div>
      <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">Previous</button>
      <span>Page {{ currentPage }} of {{ maxPage }}</span>
      <button @click="changePage(currentPage + 1)" :disabled="currentPage >= maxPage">Next</button>
    </div>
  </template>
</CreatDataTable>

Style

To change th and td style

const dataTableInfos = {
  headers: [
    {
      id: "id",
      label: "ID",
      thClass: "centerth",
    },
  ],

  content: [
    {
      id: "id",
      tdClass: "class",
    },
  ],
};

Type

<CreatDataTable 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

<CreatDataTable 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

<CreatDataTable
  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

<CreatDataTable
  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

<CreatDataTable
  :pagination-config="{
    itemsPerPage: 5,
    currentPage: 1,
    nbItems: 20,
    paginationClass: 'class',
    previousButtonClass: 'class',
    nextButtonClass: 'class',
  }"
  :on-page-change="(page) => console.log('new page index = ', page)"
/>