Vue 3 Datatables

Set of simple datatable components for Vue 3.

Installation

npm install @mythicaldev/md-vue3-datatables

OR

npm i @mythicaldev/md-vue3-datatables

Tailwind configuration

You will need to update your tailwind.config.js file to include the following in your content array.

./node_modules/@mythicaldev/md-vue3-datatables/**/*.vue

Quick Start

Bare bones and basic implementation.

<template>
  <DataTable :rows="data" />
</template>

<script setup>
  // Import the main DataTable component
  import { DataTable } from '@mythicaldev/md-vue3-datatables';

  // Give it some data!
  const data = [
    {
      id: 1,
      author: 'J.K. Rowling',
      bestSeller: 'Harry Potter',
      theme: 'Magic',
    },
    {
      id: 2,
      author: 'Stephen King',
      bestSeller: 'The Shining',
      theme: 'Horror',
    },
    ...
  ];
</script>

Advanced Usage

There are a number of ways you can utilize the set of components. Here are a few ways beyond a basic implementation.

Custom data rows

You can override the table body rows and include any other custom content, including other vue components if desired. This is often useful for an action row.

<template>
  <DataTable :rows="data">
    <template #tbody="{ row }">
      <TBodyCell>{{ row.id }}</TBodyCell>
      <TBodyCell><span class="text-red-500"> {{ row.author }}</span></TBodyCell>
      <TBodyCell><span class="font-bold"> {{ row.bestSeller }}</span></TBodyCell>
      <TBodyCell><span class="text-xs"> {{ row.theme }}</span></TBodyCell>
      <TBodyCell>
        <div class="flex items-center">
          <ActionButton class="text-blue mr-5" @onAction="handleEdit(row.id)">
            <PencilIcon class="w-5 h-5" />
          </ActionButton>
          <ActionButton class="text-red-600" @onAction="handleDelete(row.id)">
            <TrashIcon class="w-5 h-5" />
          </ActionButton>
        </div>
      </TBodyCell>
    </template>
  </DataTable>
</template>

<script setup>
  // Import both the main DataTable component and the TBodyCell component
  import { DataTable, TBodyCell } from '@mythicaldev/md-vue3-datatables';

  // Give it some data!
  const data = [
    {
      id: 1,
      author: 'J.K. Rowling',
      bestSeller: 'Harry Potter',
      theme: 'Magic',
    },
    {
      id: 2,
      author: 'Stephen King',
      bestSeller: 'The Shining',
      theme: 'Horror',
    },
    ...
  ];
</script>

Custom headers/data rows

You are able to override the headers and give them custom labels. This method requires you to also override the data cells.

<template>
  <DataTable :columns="columns" :rows="data">
    <template #tbody="{ row }">
      <TBodyCell><span class="text-red-500"> {{ row.author }}</span></TBodyCell>
      <TBodyCell><span class="font-bold"> {{ row.bestSeller }}</span></TBodyCell>
      <TBodyCell><span class="text-xs"> {{ row.theme }}</span></TBodyCell>
    </template>
  </DataTable>
</template>

<script setup>
  // Import both the main DataTable component and the TBodyCell component
  import { DataTable, TBodyCell } from '@mythicaldev/md-vue3-datatables';

  // Custom Column array
  const columns = ['Authors Name', 'Example Best Seller', 'Theme'];
  
  // Give it some data!
  const data = [
    {
      id: 1,
      author: 'J.K. Rowling',
      bestSeller: 'Harry Potter',
      theme: 'Magic',
    },
    {
      id: 2,
      author: 'Stephen King',
      bestSeller: 'The Shining',
      theme: 'Horror',
    },
    ...
  ];
</script>

Overriding both headers and data rows

You are able to override both the header content giving more control over what you add to the column header and data cells.

<template>
  <DataTable :rows="data">
    <template #thead>
      <THeadCell><span class="text-red-500">Authors Name</span></THeadCell>
      <THeadCell><span class="font-bold">Example Best Seller</span></THeadCell>
      <THeadCell><span class="text-xl">Theme</span></THeadCell>
    </template>
    <template #tbody="{ row }">
      <TBodyCell><span class="text-red-500"> {{ row.author }}</span></TBodyCell>
      <TBodyCell><span class="font-bold"> {{ row.bestSeller }}</span></TBodyCell>
      <TBodyCell><span class="text-xs"> {{ row.theme }}</span></TBodyCell>
    </template>
  </DataTable>
</template>

<script setup>
  // Import the main DataTable, THeadCell, and TBodyCell components
  import { DataTable, THeadCell, TBodyCell } from '@mythicaldev/md-vue3-datatables';

  // Give it some data!
  const data = [
    {
      id: 1,
      author: 'J.K. Rowling',
      bestSeller: 'Harry Potter',
      theme: 'Magic',
    },
    {
      id: 2,
      author: 'Stephen King',
      bestSeller: 'The Shining',
      theme: 'Horror',
    },
    ...
  ];
</script>

Full example

You can also add pagination and filtering.

<tempalte>
  <DataTable :rows="data" :pagination="pagination" :showFilter="true" :showPageSize="true">
    <template #thead>
      <THeadCell><span class="text-red-500">Authors Name</span></THeadCell>
      <THeadCell><span class="font-bold">Example Best Seller</span></THeadCell>
      <THeadCell><span class="text-xl">Theme</span></THeadCell>
    </template>
    <template #tbody="{ row }">
      <TBodyCell><span class="text-red-500"> {{ row.author }}</span></TBodyCell>
      <TBodyCell><span class="font-bold"> {{ row.bestSeller }}</span></TBodyCell>
      <TBodyCell><span class="text-xs"> {{ row.theme }}</span></TBodyCell>
    </template>
  </DataTable>
</tempalte>

<script setup>
  // Import the main DataTable, THeadCell, and TBodyCell components
  import { DataTable, THeadCell, TBodyCell } from '@mythicaldev/md-vue3-datatables';

  // Pagination Data
  const pagination = {
      total: 50,
      perPage: 5,
      page: 1,
      search: '',
      sort: '',
  };
  
  // Give it some data!
  const data = [
    {
      id: 1,
      author: 'J.K. Rowling',
      bestSeller: 'Harry Potter',
      theme: 'Magic',
    },
    {
      id: 2,
      author: 'Stephen King',
      bestSeller: 'The Shining',
      theme: 'Horror',
    },
    ...
  ];
</script>

Events

loadData

This event is fired whenever the internal data query is updated, for example when a new per page number is selected, a new page is selected, or a search parameter is entered.

You can use this event to load data from an external API.

<template>
  <DataTable :rows="state.data" :pagination="state.pagination" @loadData="loadData" />
</template>

<script setup>
  import { reactive } from 'vue';
  // Import the main DataTable component
  import { DataTable } from '@mythicaldev/md-vue3-datatables';

  const state = reactive({
    data: [],
    params: {
      limit: 5,
      page: 1,
      search: '',
    },
    pagination: {
      total: 0,
      perPage: 5,
      page: 1,
      search: '',
      sort: '',
    },
  });

  const loadData = async () => {
    state.params.page = query.page;
    state.params.limit = query.per_page;
    state.pagination.perPage = query.per_page;
    state.params.search = query.search;
    
    state.data = await MyService.getData(state.params);
  }
</script>

Props

| Prop | Type | Default | Required | Description | |------------------|---------|------------------------------|----------|---------------------------------------------------------------------------------------------| | showFilter | Boolean | false | false | Display/Hide the search filter | | showPageSize | Boolean | false | false | Display/Hide the page size drop down | | rows | Array | null | true | The data to display. This is the only reauired field | | columns | Array | null | false | Custom column names. If not supplied will use the key for the data row | | pagination | Object | null | false | Pagination object. Should contain the following keys: total, perPage, page, search and sort | | perPageOptions | Object | [5, 10, 15, 25, 50, 75, 100] | false | Options for the per page dropdown | | topPagination | Boolean | true | false | Display/Hide the top pagination | | bottomPagination | Boolean | false | false | Display/Hide the bottom pagination |

License

MIT