Datatables.net

[DataTableNet] (https://datatables.net/)

Installation

npm i @clickadilla/datatable-formatter

yarn add @clickadilla/datatable-formatter

Usage

<template>
  <datatable-formatter
    v-slot="{ items, loading, totalItemsCount }"
    :items.sync="panels"
    :loading.sync="loading"
    :options.sync="options"
    :headers="headers"
    :fetch="fetch"
  >
    <v-data-table
      :headers="headers"
      :items="items"
      :options.sync="options"
      :loading="loading"
      :server-items-length="totalItemsCount"
    />
  </datatable-formatter>
</template>

<script>
import DatatableFormatter from '@clickadilla/datatable-formatter';
import panelsRepository from '@/services/panels-repository';

export default {
  components: {
    DatatableFormatter,
    PanelStatus,
  },
  data: () => ({
    fetch: panelsRepository.table,
    panels: [],
    loading: false,
    options: {
      sortBy: ['id'],
      sortDesc: [true],
    },
  }),
  computed: {
    headers() {
      return [
        {
          value: 'id',
          text: this.$t('id'),
          width: 150,
        },
        {
          value: 'name',
          text: this.$t('name'),
        },
        {
          value: 'status',
          text: this.$t('status'),
        },
      ];
    },
  },
};
</script>

import { datatableFormaterStringified } from '@clickadilla/datatable-formatter';
import http from '@/plugins/http';
import Panel from '@/classes/Panel';
import urlFormatter from './url-formatter';

const getURL = urlFormatter({
  table: '/api/v1/admin/panels',
});

export default {
  table({
    headers,
    options,
    search,
  }) {
    const requestBody = datatableFormaterStringified({
      headers,
      headersDictionary: Panel.getReversedDictionary(),
      options,
      search,
    });

    const endpoint = getURL('table');
    return http.get(`${endpoint}?${requestBody}`)
      .then(response => ({
        items: response.data.data.map(panel => new Panel(panel)),
        totalItemsCount: response.data.recordsFiltered,
      }));
  },
  getURL,
};