1.0.24 • Published 5 months ago

@creatiwity/datatable v1.0.24

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Creat Datatable

npm version npm downloads License Nuxt

: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

  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
  1. 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)"
/>
1.0.24

5 months ago

1.0.22

9 months ago

1.0.23

8 months ago

1.0.21

10 months ago

1.0.19

10 months ago

1.0.18

10 months ago

1.0.20

10 months ago

1.0.17

10 months ago

1.0.16

10 months ago

1.0.15

11 months ago

1.0.14

11 months ago

1.0.13

11 months ago

1.0.12

11 months ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago