@mozaic-ds/vue/src/components/datatable/DataTableNested.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref } from 'vue';
import * as utils from './utils';

// Components
import '@mozaic-ds/datatable-vue/style.css';
import { MDataTable, MDataTableColumn } from '@mozaic-ds/datatable-vue';

const meta: Meta<typeof MDataTable> = {
  title: 'DataTable/MDataTable Nested',
  component: MDataTable,
  args: utils.args,
  parameters: {
    componentName: 'MDataTable',
    docs: {
      canvas: { sourceState: 'none' },
    },
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      const subItems = ref([...utils.addlDeals.slice(0, 5)]);
      return { args, subItems };
    },
    template: `
      <MDataTable v-bind="args">
        <!-- Columns -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />
        <MDataTableColumn label="Start date" value="startDate" />
        <MDataTableColumn label="End date" value="endDate" />
        <MDataTableColumn label="Statut" value="status" />

        <!-- Cells -->
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>

        <!-- Expandable Content -->
        <template v-slot:expandContent="slotProps">
          <MDataTable :items="subItems" nested>
            <!-- Columns -->
            <MDataTableColumn label="" value="button" type="button" />
            <MDataTableColumn label="Name" value="name" />
            <MDataTableColumn label="Stock" value="stock" />
            <MDataTableColumn label="Start date" value="startDate" />
            <MDataTableColumn label="End date" value="endDate" />
            <MDataTableColumn label="Statut" value="status" />
            <!-- Cells -->
            <template v-slot:cell.startDate="{ item }">
              {{ formatDate(item.startDate) }}
            </template>
            <template v-slot:cell.endDate="{ item }">
              {{ formatDate(item.startDate) }}
            </template>
            <template v-slot:cell.status="{ item }">
              {{ item.status.code }}
            </template>
          </MDataTable>
        </template>
      </MDataTable>
    `,
    methods: {
      formatDate(date) {
        return new Date(date).toLocaleString();
      },
    },
  }),
};

export default meta;
type Story = StoryObj<typeof MDataTable>;

export const Default: Story = {
  args: {
    expandable: true,
  },
};

export const MaxHeight: Story = {
  args: {
    ...Default.args,
    maxHeight: '300px',
  },
};

export const FixedHeader: Story = {
  args: {
    ...Default.args,
    fixedHeader: true,
    maxHeight: '400px',
  },
};