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

<Meta title="DataTable/Introduction" />

# Introduction

Datatable implementation for ADEO Design system.

## 📦 Installation

In order to use the datatable in your 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-web-components" />

Or with **Yarn**:

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

## 📝 Usage

Then to use the component, you can proceed as follows in the stories of the component.

<Source
  language='html'
  dark
  code={`
<script setup>
  import { DataTable } from '@mozaic-ds/datatable-web-components/svelte';
</script>

<template>
  <MDataTable>
  ...
  </MDataTable>
</template>
`} />

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