@we/dt

Install

# add package, check the last version!
yarn add https://git.weconstudio.it/vue/dt.git#^0.2.34

Create and add this nuxt plugin

// ~/plugins/dt.js
import Vue from "vue";
import WeDatatable from "@we/dt";

Vue.use(WeDatatable, {
  formatters: {},
});

Use it in your components like this

<template>
  <we-datatable resource="ski_resorts"/>
</template>

Icons

add/change values to vuetify.options.js

export default {
  icons: {
    iconfont: "mdi",
    values: {
      search: "mdi-magnify",
      plus: "mdi-plus",
      save: "mdi-content-save",
      filter: "mdi-filter",
      options: "mdi-dots-horizontal",
      refresh: "mdi-refresh",
    },
  },
};

Props

Name	Type	Default	Description
resource	String	required	Name of the resource on the server
search	String		Search value
page	Number	1	Default current page
itemsPerPage	Number	10	Default items per page
sortOptions	Object	undefined	Default sort options example `{ sortBy: ["name"], sortDesc: [true] }`
actionsHeader	[Boolean, Object]	true	show actions header (Note: you must define `` `` )
requestParams	Object	{}	Extra params sent to the server for each request
filters	Object	{}	Default filters values
mapItem	Function(item, fields)	null	Function called for each item before render
addButton	[Boolean, String	true	Show the add item action
extraActions	Array	[]	Extra actions to show
extraHeaders	Array	[]	Array of extra headers show in the datatable
openFilters	Boolean	false	Open filters by default

Slots

Name	Description
header	Add button, bulk actions and search components
filters	filters slot
action-buttons	Add button desktop
action-buttons-mobile	Add button mobile
bulk-actions	Bulk actions slots
item.[headerName]	override cell slot es: item.actions

Methods

Name	Description
reloadData()	Reload data of current page
refresh()	Refresh datatable *Coming soon*
executeExtraAction(actionId, params)	Execute an extra action
clearSelection()	Clear selection

Events

Name	Type	Description
action	{ id: 'action-id', selection: [], ...dtParams }	Extra action triggered
new	--	Add action triggered
error	Error	An error occurred
update:search	(search) => {}	search changed
update:page	(page) => {}	page changed
update:itemsPerPage	(itemsPerPage) => {}	itemsPerPage changed
update:sortOptions	(sortOptions) => {}	sortOptions changed
update:filters	(filters) => {}	filters changed

Example

Addional headers

<template>
  <we-datatable resource="orders" :extra-headers="headers">
    <!-- Extra header -->
    <template #[`item.extra`]="{ item }">
      <span>extra</span>
    </template>

    <!-- The actions header is added by default if you define this template -->
    <template #[`item.actions`]="{ item }">
      <v-btn> Edit </v-btn>
    </template>

  </we-datatable>
</template>
<script>
export default {
  data: () => ({
    headers: [{ id: "extra", text: 'Extra' width: 90 }],
  }),
};
</script>

Add button

<template>
  <we-datatable resource="orders" @new="create" />
</template>
<script>
export default {
  methods: {
    createNew() {
      // TODO 
    },
  },
};
</script>

Custom formatter

~/plugins/dt.js

import Vue from "vue";
import WeDatatable from "@we/dt";
import EmailFormatter from "~/components/EmailFormatter";
import BooleanFormatter from "~/components/BooleanFormatter";

Vue.use(WeDatatable, {
  formatters: {
    // Note: the key has to match formatter or type value on server header
    email: EmailFormatter,
    boolean: BooleanFormatter,
  },
});

~/components/EmailFormatter.vue

<template>
  <a :href="`mailto:${value}`">{{ value }}</a>
</template>
<script>
export default {
  props: {
    value: Object | String | Number,
    item: Object,
    field: Object,
  },
};
</script>

Extra actions

<template>
  <we-datatable
    ref="dt"
    @action="handleAction"
    :extraActions="extraActions"
    resource="users"
  ></we-datatable>
</template>

<script>
export default {
  data: () => ({
    extraActions: [
      {
        id: "welcome-sms",
        label: "Invia SMS benvenuto",
        icon: "mdi-comment",
        bulk: false,
        multiple: true,
        // confirm: true,
        // confirm_message: "Vuoi inviare un SMS a tutti gli utenti selezionati?"
      },
    ],
  }),
  methods: {
    handleAction({ id, selection }) {
      switch (id) {
        case "welcome-sms":
          // custom logic here
          const extraParams = {
            // extra params
            // from: '2022-01-01',
          }

          // NOTE: this will make a POST in resource/datatable
          // with all the filters, the selection and the extraParams
          await this.$refs.dt.executeExtraAction("welcome-sms", extraParams);
          break;

        // same as @new event  
        case "new":
          alert("New user");
          break;
      }
    },
  },
};
</script>

Pre filtered dt

<template>
  <we-datatable resource="orders" :filters.sync="filters" />
</template>
<script>
export default {
  data: () => ({
    filters: {
      email: {
        operator: "%like",
        value: "@gmail.com",
      },
    },
  }),
};
</script>

Extra params

<template>
  <we-datatable resource="orders" :request-params="requestParams" />
</template>
<script>
export default {
  data: () => ({
    requestParams: {
      // what ever
    },
  }),
};
</script>