Datatable Vue

Datatable implementation in Vue.js for ADEO Design system.

📦 Installation

In order to use the datatable in your Vue.js project, you must first install the npm package:

npm i @mozaic-ds/datatable-vue

Or with Yarn:

yarn add @mozaic-ds/datatable-vue

📝 Usage

Import the styles

// In the Vue file using the datatable component

import '@mozaic-ds/datatable-vue/style.css';

Then to use the component, you can proceed as follows:

<script setup>
  import { MButton } from '@mozaic-ds/vue';
</script>

<template>
  <MDataTable
    v-bind="{items:{0:{id:0,name:'Deal test 0',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 0'},1:{id:1,name:'Deal test 1',startDate:{},endDate:{},status:{code:'CALCULATED'},stock:'Stock 1'},2:{id:2,name:'Deal test 2',startDate:{},endDate:{},status:{code:'CALCULATED'},stock:'Stock 2'},3:{id:3,name:'Deal test 3',startDate:{},endDate:{},status:{code:'ACTIVE'},stock:'Stock 3'},4:{id:4,name:'Deal test 4',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 4'},5:{id:5,name:'Deal test 5',startDate:{},endDate:{},status:{code:'ACTIVE'},stock:'Stock 5'},6:{id:6,name:'Deal test 6',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 6'},7:{id:7,name:'Deal test 7',startDate:{},endDate:{},status:{code:'ACTIVE'},stock:'Stock 7'},8:{id:8,name:'Deal test 8',startDate:{},endDate:{},status:{code:'CLOSE'},stock:'Stock 8'},9:{id:9,name:'Deal test 9',startDate:{},endDate:{},status:{code:'CALCULATED'},stock:'Stock 9'}}}"
  >
    <MDataTableColumn label="Name" value="name" />
    <MDataTableColumn label="Stock" value="stock" />
    <MDataTableColumn label="Start date" value="startDate" />
    <template v-slot:cell.startDate="{ item }">
      {{formatDate(item.startDate)}}
    </template>
    <MDataTableColumn label="End date" value="endDate" />
    <template v-slot:cell.endDate="{ item }">
      {{formatDate(item.startDate)}}
    </template>
    <MDataTableColumn label="Statut" value="status" />
    <template v-slot:cell.status="{ item }">{{item.status.code}}</template>
  </MDataTable>
</template>

To see more examples of usage, please refer to the stories of the component.