import { Meta, Source } from '@storybook/addon-docs/blocks';

<Meta title="DataTable/Introduction" />

# Introduction

Datatable implementation in [Vue.js](https://vuejs.org/) for ADEO Design system.

## 📦 Installation

In order to use the datatable in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/datatable-vue):

<Source language="bash" dark code="npm i @mozaic-ds/datatable-vue" />

Or with **Yarn**:

<Source language="bash" dark code="yarn add @mozaic-ds/datatable-vue" />

## 📝 Usage

Import the styles

<Source
  language='typescript'
  dark
  code={`
// 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:

<Source
  language='html'
  dark
  code={`
<script setup>
  import '@mozaic-ds/datatable-vue/style.css';
  import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-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 other stories of the component.