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

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

import type { Meta, StoryObj } from '@storybook/vue3-vite';
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 Expandable',
  component: MDataTable,
  args: utils.args,
  parameters: {
    componentName: 'MDataTable',
    docs: {
      canvas: { sourceState: 'none' },
    },
  },
  render: (args) => ({
    components: { MDataTable, MDataTableColumn },
    setup() {
      return { args };
    },
    template: `
      <MDataTable v-bind="args">
        <!--
          Default content
        -->
        <MDataTableColumn label="Name" value="name" />
        <MDataTableColumn label="Stock" value="stock" />

        <!-- Start Date -->
        <MDataTableColumn label="Start date" value="startDate" />
        <template v-slot:cell.startDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- End Date -->
        <MDataTableColumn label="End date" value="endDate" />
        <template v-slot:cell.endDate="{ item }">
          {{ formatDate(item.startDate) }}
        </template>

        <!-- Status -->
        <MDataTableColumn label="Statut" value="status" />
        <template v-slot:cell.status="{ item }"> {{ item.status.code }} </template>

        <!-- Expandable Row -->
        <template v-slot:expandContent="expandProps">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 20px;
            "
          >
            <p>
              {{ expandProps }}
              <strong>
                This is the expand content for row n°{{ expandProps.rowIndex }}
              </strong>
            </p>
          </div>
        </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 ExpandedRows: Story = {
  args: {
    ...Default.args,
    showExpandableContent: true,
  },
};

export const SpecifiedRows: Story = {
  args: {
    ...Default.args,
    expandableList: [1, 7, 9],
  },
};