@mozaic-ds/angular 0.23.0 → 0.23.1

package/projects/kit/components/datatable/moz-datatable.stories.ts

@@ -0,0 +1,1118 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { MozDatatableComponent } from './moz-datatable.component';
+import { StoryObj } from '@storybook/angular';
+import { BadgeModule } from '../badge/badge.module';
+import { TextInputModule } from '../text-input/text-input.module';
+import { ButtonModule } from '../button/button.module';
+import { IconModule } from '../icon/icon.module';
+import { ToggleModule } from '../toggle/toggle.module';
+import { TagModule } from '../tag/tag.module';
+import { MozDatatableModule } from './moz-datatable.module';
+import { MozDatatableManagementModule } from '../datatable-management/moz-datatable-management.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+type StoryType = MozDatatableComponent;
+
+const meta: Meta<StoryType> = {
+  title: 'Data/Datatable',
+  component: MozDatatableComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        MozDatatableModule,
+        BadgeModule,
+        TextInputModule,
+        ButtonModule,
+        IconModule,
+        ToggleModule,
+        TagModule,
+        TextInputModule,
+        MozDatatableManagementModule,
+        BrowserAnimationsModule,
+      ],
+    }),
+  ],
+  argTypes: {
+    rowPerPageChangeEvent: { action: 'rowPerPageChange' },
+    rowClickEvent: { action: 'rowClick' },
+    pageChangeEvent: { action: 'pageChange' },
+    sortEvent: { action: 'sortColumn' },
+    selectionRowEvent: { action: 'rowSelected' },
+    selectionAllRowEvent: { action: 'rowAllSelected' },
+    emptyButtonClickEvent: { action: 'emptyBodyButtonClicked' },
+  },
+  render: (args) => {
+    const { ...props } = args;
+    return {
+      props,
+      template: `
+        <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings" [selectionSettings]="selectionSettings">
+
+          <moz-datatable-content-cell field="discount">
+            <ng-template let-item>
+                <input
+                moz-input
+                type="number"
+                placeholder="e.g. 15"
+                size="s"
+              />
+            </ng-template>
+          </moz-datatable-content-cell>
+
+          <moz-datatable-content-cell field="status">
+            <ng-template let-row>
+              <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+            </ng-template>
+          </moz-datatable-content-cell>
+
+          <moz-datatable-content-cell field="productLink">
+            <ng-template let-row>
+              <a href="{{row.content.link}}">{{row.content.label}}</a>
+            </ng-template>
+          </moz-datatable-content-cell>
+
+        </moz-datatable>
+      `,
+    };
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryType>;
+
+export const Default: Story = {
+  args: {
+    datatableSettings: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+  },
+};
+
+export const WithFixHeaderRow: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <div style="height: 240px;">
+        <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings">
+
+          <moz-datatable-content-cell field="discount">
+            <ng-template let-item>
+                <input
+                moz-input
+                type="number"
+                placeholder="e.g. 15"
+                size="s"
+              />
+            </ng-template>
+          </moz-datatable-content-cell>
+
+          <moz-datatable-content-cell field="status">
+            <ng-template let-row>
+              <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+            </ng-template>
+          </moz-datatable-content-cell>
+
+          <moz-datatable-content-cell field="productLink">
+            <ng-template let-row>
+              <a href="{{row.content.link}}">{{row.content.label}}</a>
+            </ng-template>
+          </moz-datatable-content-cell>
+
+        </moz-datatable>
+      </div>
+   `,
+  }),
+  args: {
+    datatableSettings: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+      fixHeaderRow: true,
+    },
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    selectionSettings: {
+      selectionIdentifierFieldKey: 'id',
+      allSelected: false,
+      totalSelectableItems: 4,
+      excludedIds: [],
+      selectedIds: [],
+      labels: {},
+    },
+    datatableSettings: {
+      activateSelection: true,
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          id: 1,
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 2,
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+          disableSelection: true,
+        },
+        {
+          id: 3,
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 4,
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 5,
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+  },
+};
+
+export const WithColumnSort: Story = {
+  args: {
+    datatableSettings: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+          sort: {
+            activate: true,
+            direction: 'ASC',
+          },
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+          sort: {
+            activate: true,
+          },
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+  },
+};
+
+export const WithEmptyBody: Story = {
+  args: {
+    datatableSettings: {
+      activatePagination: true,
+      activateEmptyBodyButton: true,
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      labels: {
+        emptyBodyTitle: 'There is no result',
+        emptyBodyDescription: 'Please try changing your filters',
+      },
+      icons: {
+        emptyBodyButtonIcon: 'Navigation_Display_Filter_24px',
+      },
+      rowData: [],
+    },
+  },
+};
+
+export const WithCaptionAndPagination: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings" [selectionSettings]="selectionSettings">
+    
+      <moz-datatable-caption>
+        <ng-container edition>
+            <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Navigation_Publish_Edit_24px"></moz-icon>
+          </button>
+          <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Media_Download_Web_24px"></moz-icon>
+          </button>
+        </ng-container>
+        <ng-container actions>
+          <div>
+            <moz-toggle size="s">Slot toggle</moz-toggle>
+          </div>
+          <div>
+            <input moz-input type="search" placeholder="This is a SLOT text input" size="s" />
+          </div>
+          <button moz-button size="s" variation="bordered" widthBehavior="fit">
+            <moz-icon iconName="Navigation_Display_Filter_24px"></moz-icon>
+            Filters
+          </button>
+          <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Navigation_Display_Setting_24px"></moz-icon>
+          </button>
+          <button moz-button size="s">Primary action</button>
+          <button moz-button size="s" theme="danger" variation="bordered">Negative action</button>
+        </ng-container>
+        <ng-container filters>
+          <moz-tag type="removable" size="s">
+            slot tag 1
+          </moz-tag>
+          <moz-tag type="removable" size="s">
+            slot tag 2
+          </moz-tag>
+        </ng-container>
+      </moz-datatable-caption>
+
+      <moz-datatable-content-cell field="discount">
+        <ng-template let-item>
+            <input
+            moz-input
+            type="number"
+            placeholder="e.g. 15"
+            size="s"
+          />
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="status">
+        <ng-template let-row>
+          <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="productLink">
+        <ng-template let-row>
+          <a href="{{row.content.link}}">{{row.content.label}}</a>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-row-expansion-content>
+        <ng-template let-row>
+          <div style="display: flex; justify-content: center; align-items: center;">
+            <h1>{{row.subRowContent.productName}}</h1>
+            <div moz-badge [type]="row.subRowContent.status.type">{{row.subRowContent.status.label}}</div>
+          </div>
+        </ng-template>
+      </moz-datatable-row-expansion-content>
+    </moz-datatable>
+   `,
+  }),
+  args: {
+    selectionSettings: {
+      selectionIdentifierFieldKey: 'id',
+      allSelected: false,
+      totalSelectableItems: 5,
+      excludedIds: [],
+      selectedIds: [],
+      labels: {},
+    },
+    datatableSettings: {
+      activatePagination: true,
+      fixHeaderRow: true,
+      activateSelection: true,
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'Status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'Product link',
+        },
+      ],
+      rowData: [
+        {
+          id: 1,
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 2,
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 3,
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+          subRow: {
+            productName: 'Perceuse sans fil',
+            status: { label: 'Online', type: 'success' },
+          },
+        },
+        {
+          id: 4,
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 5,
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+    footerSettings: {
+      pagination: {
+        totalItems: 6,
+        itemsPerPage: 5,
+        currentPage: 1,
+        rowPerPage: { options: [5, 10, 15, 20], selected: 10 },
+      },
+      labels: {
+        rowPerPage: 'Rows per page',
+        items: 'Products',
+        page: 'Page',
+        of: 'of',
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings" [selectionSettings]="selectionSettings">
+
+      <moz-datatable-content-cell field="discount">
+        <ng-template let-item>
+            <input
+            moz-input
+            type="number"
+            placeholder="e.g. 15"
+            size="s"
+          />
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="status">
+        <ng-template let-row>
+          <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="productLink">
+        <ng-template let-row>
+          <a href="{{row.content.link}}">{{row.content.label}}</a>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-row-expansion-content>
+        <ng-template let-row>
+          <div style="display: flex; justify-content: center; align-items: center;">
+            <h1>{{row.subRowContent.productName}}</h1>
+            <div moz-badge [type]="row.subRowContent.status.type">{{row.subRowContent.status.label}}</div>
+          </div>
+        </ng-template>
+      </moz-datatable-row-expansion-content>
+    </moz-datatable>
+   `,
+  }),
+  args: {
+    selectionSettings: {
+      selectionIdentifierFieldKey: 'id',
+      allSelected: false,
+      totalSelectableItems: 5,
+      excludedIds: [],
+      selectedIds: [],
+      labels: {},
+    },
+    datatableSettings: {
+      isLoading: true,
+      activatePagination: true,
+      fixHeaderRow: true,
+      activateSelection: true,
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          id: 1,
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 2,
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 3,
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+          subRow: {
+            productName: 'Perceuse sans fil',
+            status: { label: 'Online', type: 'success' },
+          },
+        },
+        {
+          id: 4,
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 5,
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+    footerSettings: {
+      pagination: {
+        totalItems: 6,
+        itemsPerPage: 5,
+        currentPage: 1,
+        rowPerPage: { options: [5, 10, 15, 20], selected: 10 },
+      },
+      labels: {
+        rowPerPage: 'Rows per page',
+        items: 'Products',
+        page: 'Page',
+        of: 'of',
+      },
+    },
+  },
+};
+
+export const WithSubrow: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <moz-datatable [datatableSettings]="datatableSettings">
+
+      <moz-datatable-content-cell field="discount">
+        <ng-template let-item>
+            <input
+            moz-input
+            type="number"
+            placeholder="e.g. 15"
+            size="s"
+          />
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="status">
+        <ng-template let-row>
+          <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="productLink">
+        <ng-template let-row>
+          <a href="{{row.content.link}}">{{row.content.label}}</a>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-row-expansion-content>
+        <ng-template let-row>
+          <div style="display: flex; justify-content: center; align-items: center;">
+            <h3> MY OTHER DATATABLE IN SUBROW </h3> 
+          </div>
+          <div style="display: flex; justify-content: center; align-items: center;">
+            <h4> content of subrow with row.subRowContent.productName for example : {{row.subRowContent.productName}}</h4>
+          </div>
+          <div style="display: flex; justify-content: center; align-items: center;">
+            <h4> Datatable example in subrow : </h4>
+          </div>
+
+          <moz-datatable [datatableSettings]="datatableSettingsForSubRow" [footerSettings]="footerSettings" [selectionSettings]="selectionSettings">
+
+            <moz-datatable-content-cell field="discount">
+              <ng-template let-item>
+                  <input
+                  moz-input
+                  type="number"
+                  placeholder="e.g. 15"
+                  size="s"
+                />
+              </ng-template>
+            </moz-datatable-content-cell>
+
+            <moz-datatable-content-cell field="status">
+              <ng-template let-row>
+                <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+              </ng-template>
+            </moz-datatable-content-cell>
+
+            <moz-datatable-content-cell field="productLink">
+              <ng-template let-row>
+                <a href="{{row.content.link}}">{{row.content.label}}</a>
+              </ng-template>
+            </moz-datatable-content-cell>
+
+          </moz-datatable>
+        </ng-template>
+      </moz-datatable-row-expansion-content>
+    
+    </moz-datatable>
+   `,
+  }),
+  args: {
+    datatableSettingsForSubRow: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+        },
+        {
+          productName: 'Perceuse sans fil',
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+        },
+      ],
+    },
+    datatableSettings: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+          subRow: {
+            productName: 'Perceuse sans fil',
+            status: { label: 'Online', type: 'success' },
+          },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+  } as any,
+};
+
+export const WithManageColumns: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings" [selectionSettings]="selectionSettings">
+    
+      <moz-datatable-caption>
+        <ng-container edition>
+            <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Navigation_Publish_Edit_24px"></moz-icon>
+          </button>
+          <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Media_Download_Web_24px"></moz-icon>
+          </button>
+        </ng-container>
+        <ng-container actions>
+          <div>
+            <moz-toggle size="s">Slot toggle</moz-toggle>
+          </div>
+          <div>
+            <input moz-input type="search" placeholder="This is a SLOT text input" size="s" />
+          </div>
+          <button moz-button size="s" variation="bordered" widthBehavior="fit">
+            <moz-icon iconName="Navigation_Display_Filter_24px"></moz-icon>
+            Filters
+          </button>
+          <moz-datatable-management [datatableSettings]="datatableSettings"></moz-datatable-management>
+          <button moz-button size="s">Primary action</button>
+          <button moz-button size="s" theme="danger" variation="bordered">Negative action</button>
+        </ng-container>
+        <ng-container filters>
+          <moz-tag type="removable" size="s">
+            slot tag 1
+          </moz-tag>
+          <moz-tag type="removable" size="s">
+            slot tag 2
+          </moz-tag>
+        </ng-container>
+      </moz-datatable-caption>
+
+      <moz-datatable-content-cell field="discount">
+        <ng-template let-item>
+            <input
+            moz-input
+            type="number"
+            placeholder="e.g. 15"
+            size="s"
+          />
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="status">
+        <ng-template let-row>
+          <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="productLink">
+        <ng-template let-row>
+          <a href="{{row.content.link}}">{{row.content.label}}</a>
+        </ng-template>
+      </moz-datatable-content-cell>
+    </moz-datatable>
+   `,
+  }),
+  args: {
+    selectionSettings: {
+      selectionIdentifierFieldKey: 'id',
+      allSelected: false,
+      totalSelectableItems: 5,
+      excludedIds: [],
+      selectedIds: [],
+      labels: {},
+    },
+    datatableSettings: {
+      activatePagination: true,
+      fixHeaderRow: true,
+      activateSelection: true,
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'Status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'Product link',
+        },
+      ],
+      rowData: [
+        {
+          id: 1,
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 2,
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 3,
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 4,
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          id: 5,
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+    footerSettings: {
+      pagination: {
+        totalItems: 6,
+        itemsPerPage: 5,
+        currentPage: 1,
+        rowPerPage: { options: [5, 10, 15, 20], selected: 10 },
+      },
+      labels: {
+        rowPerPage: 'Rows per page',
+        items: 'Products',
+        page: 'Page',
+        of: 'of',
+      },
+    },
+  },
+};