@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/adeo/components/datatable/DataTable.svelte

@@ -0,0 +1,959 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import {
+    areAllItemsSelected,
+    onePageSort,
+    getCellContent,
+    getDataAttribute,
+    getSortDirection,
+    checkSubRow,
+    handleCountItemSelection,
+    handleCountAllSelection,
+    clearSelection,
+    selectAll,
+    isHeaderSelectCheckboxIndeterminate,
+  } from '../../utilities/DataTableUtilities';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import DefaultEdition from './datatable-default-edtion.nested.svelte';
+  import DefaultAction from './datatable-default-action.nested.svelte';
+  import DefaultSelection from './datatable-default-selection.nested.svelte';
+  import DefaultSelectionLabel from './datatable-default-selection-label.nested.svelte';
+  import DefaultFilterTags from './datatable-default-filter-tags.nested.svelte';
+  import DataTableFooter from './datatable-default-footer.nested.svelte';
+
+  import type {
+    HeadData,
+    SortParams,
+    TableBodyDatas,
+    TableFooterDatas,
+    TableOptions,
+    BodyData,
+  } from './datatable.types';
+
+  import ControlCircleLess24 from './../../../public/icons/ControlCircleLess24.js';
+  if (!customElements.get('navigation-control-circle--less-24px')) {
+    customElements.define(
+      'navigation-control-circle--less-24px',
+      ControlCircleLess24 as any,
+    );
+  }
+
+  import ControlCircleMore24 from './../../../public/icons/ControlCircleMore24.js';
+  if (!customElements.get('navigation-control-circle--more-24px')) {
+    customElements.define(
+      'navigation-control-circle--more-24px',
+      ControlCircleMore24 as any,
+    );
+  }
+
+  import DisplaySearch24 from './../../../public/icons/DisplaySearch24.js';
+  if (!customElements.get('navigation-display-search-24px')) {
+    customElements.define(
+      'navigation-display-search-24px',
+      DisplaySearch24 as any,
+    );
+  }
+
+  import DisplayFilter24 from './../../../public/icons/DisplayFilter24.js';
+  if (!customElements.get('navigation-display-filter-24px')) {
+    customElements.define(
+      'navigation-display-filter-24px',
+      DisplayFilter24 as any,
+    );
+  }
+
+  import DisplaySetting24 from './../../../public/icons/DisplaySetting24.js';
+  if (!customElements.get('navigation-display-setting-24px')) {
+    customElements.define(
+      'navigation-display-setting-24px',
+      DisplaySetting24 as any,
+    );
+  }
+
+  import PublishEdit24 from './../../../public/icons/PublishEdit24.js';
+  if (!customElements.get('navigation-publish-edit-24px')) {
+    customElements.define('navigation-publish-edit-24px', PublishEdit24 as any);
+  }
+
+  import DownloadWeb24 from './../../../public/icons/DownloadWeb24.js';
+  if (!customElements.get('media-download-web-24px')) {
+    customElements.define('media-download-web-24px', DownloadWeb24 as any);
+  }
+
+  import ArrowArrowLeft32 from './../../../public/icons/ArrowArrowLeft32.js';
+  if (!customElements.get('navigation-arrow-arrow--left-32px')) {
+    customElements.define(
+      'navigation-arrow-arrow--left-32px',
+      ArrowArrowLeft32 as any,
+    );
+  }
+
+  import ArrowArrowRight32 from './../../../public/icons/ArrowArrowRight32.js';
+  import { afterUpdate, onMount } from 'svelte';
+  if (!customElements.get('navigation-arrow-arrow--right-32px')) {
+    customElements.define(
+      'navigation-arrow-arrow--right-32px',
+      ArrowArrowRight32 as any,
+    );
+  }
+
+  import DisplayOther24 from './../../../public/icons/DisplayOther24.js';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+  if (!customElements.get('navigation-display-other-24px')) {
+    customElements.define(
+      'navigation-display-other-24px',
+      DisplayOther24 as any,
+    );
+  }
+
+  export let tablebodydatas = '';
+  export let tablefooterdatas = '';
+  export let tableoptions = '';
+
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+  let indeterminate = false;
+  let datatableDiv: HTMLDivElement;
+
+  let thSelection: HTMLElement;
+  let thSubRow: HTMLElement;
+
+  $: parsedTableOptions = tableoptions
+    ? (JSON.parse(tableoptions) as TableOptions)
+    : undefined;
+  $: parsedTableBodyDatas = tablebodydatas
+    ? (JSON.parse(tablebodydatas) as TableBodyDatas)
+    : undefined;
+  $: parsedFooterDatas = tablefooterdatas
+    ? (JSON.parse(tablefooterdatas) as TableFooterDatas)
+    : undefined;
+
+  $: items = parsedTableBodyDatas?.bodyDatas ?? [];
+  $: headTitles = parsedTableBodyDatas
+    ? (parsedTableBodyDatas.headDatas as HeadData[])
+    : [];
+  $: dataTableId = parsedTableOptions?.dataTableId;
+  $: loading = parsedTableOptions?.loading ?? false;
+  $: itemsSelection = parsedTableOptions?.itemsSelection ?? false;
+  $: optionsButton = parsedTableOptions?.optionsButton ?? false;
+  $: hideOptionsButton = parsedTableOptions?.hideOptionsButton ?? [];
+  $: e2eAttributeSuffix = parsedTableOptions?.e2eAttributeSuffix;
+  $: useOnePageSorting = parsedTableOptions?.useOnePageSorting ?? false;
+  $: showTopbarEdition = parsedTableOptions?.showTopbarEdition ?? true;
+  $: showTopbarAction = parsedTableOptions?.showTopbarAction ?? true;
+  $: showFilterTags = parsedTableOptions?.showFilterTags ?? true;
+  $: filterTags = parsedTableOptions?.filterTags;
+  $: showColumnHeaders = parsedTableOptions?.showColumnHeaders ?? true;
+  $: itemsLabel = parsedTableOptions?.itemsLabel ?? 'items';
+  $: pageLabel = parsedTableOptions?.pageLabel ?? 'Page';
+  $: rowsPerPageLabel = parsedTableOptions?.rowsPerPageLabel ?? 'Rows per page';
+  $: resetFiltersLabel = parsedTableOptions?.resetFiltersLabel ?? 'Reset';
+  $: removeFilterLabel = parsedTableOptions?.removeFilterLabel ?? 'Reset';
+  $: showItemsCount = parsedTableOptions?.showItemsCount ?? true;
+  $: disableSelection = parsedTableOptions?.disableSelection ?? false;
+  $: showToggle = parsedTableOptions?.showToggle ?? false;
+  $: toggleValue = parsedTableOptions?.toggleValue ?? false;
+  $: toggleLabel = parsedTableOptions?.toggleLabel ?? '';
+  $: sortParams =
+    parsedTableOptions?.sortedParams ??
+    ({ columnId: '', direction: 'na' } as SortParams);
+  $: maxHeight = parsedTableOptions?.heightToBeRemoved
+    ? window.innerHeight - (parsedTableOptions?.heightToBeRemoved || 0)
+    : undefined;
+  $: showTopBar = showTopbarEdition || showTopbarAction;
+  $: allItems = areAllItemsSelected(items);
+  $: hasSubRow = checkSubRow(items);
+  $: selectionParams = parsedTableOptions?.selectionParams ?? undefined;
+  $: showSelectionCount = parsedTableOptions?.showSelectionCount ?? false;
+  $: searchPlaceholder = parsedTableOptions?.searchPlaceholder ?? '';
+  $: searchValue = parsedTableOptions?.searchValue ?? '';
+  $: itemsPerPageOptions = parsedTableOptions?.itemsPerPageOptions ?? [
+    5, 10, 15, 20,
+  ];
+  $: showAllPages = parsedTableOptions?.showAllPages ?? false;
+  $: activateSettings = parsedTableOptions?.activateSettings ?? false;
+  $: applyButtonSettingsLabel =
+    parsedTableOptions?.applyButtonSettingsLabel ?? 'Apply';
+  $: resetButtonSettingsLabel =
+    parsedTableOptions?.resetButtonSettingsLabel ?? 'Reset';
+  $: fixedFirstColumn = parsedTableOptions?.fixedFirstColumn ?? false;
+  $: fixedFirstColumnLabel =
+    parsedTableOptions?.fixedFirstColumnLabel ?? 'Fix the first column';
+  $: layerColumnTitleSettingsLabel =
+    parsedTableOptions?.layerColumnTitleSettingsLabel ?? 'Column Display';
+  $: layerTitleSettingsLabel =
+    parsedTableOptions?.layerTitleSettingsLabel ?? 'Settings';
+  $: layerBodyTitleSettingsLabel =
+    parsedTableOptions?.layerBodyTitleSettingsLabel ?? 'Column lock';
+  $: hideDownloadButton = parsedTableOptions?.hideDownloadButton ?? false;
+  $: disabledEdit = parsedTableOptions?.disabledEdit ?? false;
+  $: disabledDownload = parsedTableOptions?.disabledDownload ?? false;
+  $: filterLabel = parsedTableOptions?.filterLabel ?? '';
+  $: clickableRow = parsedTableOptions?.clickableRow ?? false;
+  $: fixCheckbox = parsedTableOptions?.fixCheckbox ?? false;
+  $: hideSettingsCol = parsedTableOptions?.hideSettingsCol ?? [];
+  $: filterTagsMax = parsedTableOptions?.filterTagsMax ?? 20;
+  $: filterReduceLabel = parsedTableOptions?.filterReduceLabel ?? 'Show all';
+  $: filterShowLabel = parsedTableOptions?.filterShowLabel ?? 'Reduce';
+  // Update to reactive ($:)
+  onMount(() => {
+    window.addEventListener('resize', () => {
+      maxHeight =
+        window.innerHeight - (parsedTableOptions?.heightToBeRemoved || 0);
+    });
+    if (items.every((item) => item.disableSelection)) {
+      disableSelection = true;
+    }
+  });
+
+  afterUpdate(() => {
+    if (itemsSelection && showSelectionCount && selectionParams != null) {
+      if (selectionParams?.allSelected) {
+        items = items.map((item) => ({
+          ...item,
+          selected:
+            item.disableSelection === true
+              ? false
+              : !(selectionParams?.excludedIdsFromSelection || []).includes(
+                  item.id,
+                ),
+        }));
+      } else {
+        items = items.map((item) => ({
+          ...item,
+          selected:
+            item.disableSelection === true
+              ? false
+              : (selectionParams?.idsSelected || []).includes(item.id),
+        }));
+      }
+      if (
+        (selectionParams?.idsSelected || []).length ===
+        selectionParams.totalItems
+      ) {
+        selectionParams.allSelected = true;
+        selectionParams.idsSelected = [];
+        selectionParams.excludedIdsFromSelection = [];
+      }
+      indeterminate = isHeaderSelectCheckboxIndeterminate(
+        items,
+        selectionParams,
+        indeterminate,
+      );
+    }
+    items.map((item) => {
+      if (datatableDiv) {
+        const button = datatableDiv.querySelector('#cell-button-' + item.id);
+        const file = datatableDiv.querySelector('#cell-file-' + item.id);
+        const link = datatableDiv.querySelector('#cell-link-' + item.id);
+        const input = datatableDiv.querySelector<HTMLInputElement>(
+          '#cell-input-' + item.id,
+        );
+        if (button) {
+          button.addEventListener(
+            'click',
+            (event: any) => {
+              dispatchCustomEvent('click-cell-button', item.id);
+              event.stopPropagation();
+            },
+            { once: true },
+          );
+        }
+        if (link) {
+          link.addEventListener(
+            'click',
+            (event: any) => {
+              dispatchCustomEvent('click-cell-link', item.id);
+              event.stopPropagation();
+            },
+            { once: true },
+          );
+        }
+        if (file) {
+          file.addEventListener(
+            'click',
+            (event: any) => {
+              dispatchCustomEvent('click-cell-file', item.id);
+              event.stopImmediatePropagation();
+            },
+            { once: true },
+          );
+        }
+        if (input) {
+          input.addEventListener('blur', (event: any) => {
+            dispatchCustomEvent('click-cell-input-blur', {
+              id: item.id,
+              value: input.value,
+            });
+            event.stopImmediatePropagation();
+          });
+        }
+      }
+    });
+  });
+
+  function dispatchCustomEvent(
+    name: string,
+    detail: CustomEvent['detail'] = {},
+  ): void {
+    eventHandler.dispatch(name, detail);
+  }
+
+  function handleOptionsClick(item: BodyData, itemIndex: number, event: Event) {
+    dispatchCustomEvent('on-options-button-click', {
+      ...item,
+      itemIndex: itemIndex,
+      event,
+    });
+  }
+
+  function getLeftValueFixFirstColumn(): number {
+    let value = 0;
+    if (itemsSelection && thSelection) {
+      value += thSelection.clientWidth;
+    }
+    if (hasSubRow && thSubRow) {
+      value += thSubRow.clientWidth;
+    }
+    return value;
+  }
+
+  function findFirstHeadTitleNotHide(): HeadData[] {
+    return headTitles.filter((headTitle) => !headTitle.hideColumn);
+  }
+
+  function reorderColumns(data: any): void {
+    fixedFirstColumn = data.fixedFirstColumn;
+    headTitles = [...data.headTitle];
+    dispatchCustomEvent('columns-order', {
+      headers: headTitles,
+      firstColumnFixed: fixedFirstColumn,
+    });
+  }
+
+  function handleSortClick(useOnePageSorting: boolean, headTitle: HeadData) {
+    const columnIsSorted = isSorted(headTitle.id);
+    const sortDirection = columnIsSorted
+      ? getSortDirection(sortParams.direction)
+      : 'desc';
+
+    if (useOnePageSorting) {
+      items = onePageSort(
+        items,
+        headTitle.id,
+        headTitle.cellsFormat,
+        sortDirection,
+      );
+    } else {
+      dispatchCustomEvent('on-sort-button-click', {
+        columnId: headTitle.id,
+        sortDirection,
+      });
+    }
+    sortParams.direction = sortDirection;
+    sortParams.columnId = headTitle.id;
+  }
+  function isSorted(columnId: string) {
+    return columnId === sortParams.columnId;
+  }
+  function handleItemSelection(item: BodyData) {
+    items = items.map((obj) => {
+      if (obj.id === item.id) {
+        return {
+          ...obj,
+          selected: item.disableSelection
+            ? false
+            : item.selected
+            ? false
+            : true,
+        };
+      }
+      return obj;
+    });
+    allItems = areAllItemsSelected(items);
+    selectionParams = handleCountItemSelection(
+      item,
+      selectionParams,
+      showItemsCount,
+    );
+    dispatchCustomEvent(item.selected ? 'unselect-item' : 'select-item', {
+      id: item.id,
+      idsSelected: selectionParams?.idsSelected,
+      excludedIdsFromSelection: selectionParams?.excludedIdsFromSelection,
+      allIsSelected: selectionParams?.allSelected,
+    });
+  }
+
+  function handleAllSelection() {
+    const isAllItems = allItems;
+    items = items.map((item) => ({
+      ...item,
+      selected: item.disableSelection ? false : !allItems,
+    }));
+    allItems = areAllItemsSelected(items);
+    selectionParams = handleCountAllSelection(
+      items,
+      selectionParams,
+      showSelectionCount,
+      indeterminate,
+      allItems,
+    );
+    dispatchCustomEvent(
+      isAllItems ? 'unselect-all-items' : 'select-all-items',
+      {
+        idsSelected: selectionParams?.idsSelected,
+        excludedIdsFromSelection: selectionParams?.excludedIdsFromSelection,
+        allIsSelected: selectionParams?.allSelected,
+      },
+    );
+  }
+</script>
+
+<div class="mc-datatable" bind:this={datatableDiv}>
+  {#if showTopBar || showFilterTags}
+    <div class="mc-datatable__header">
+      {#if showTopBar}
+        <div class="mc-datatable__topbar">
+          <div class="edition-selection-core">
+            {#if showTopbarEdition}
+              <slot name="edition">
+                <DefaultEdition
+                  {hideDownloadButton}
+                  {disabledEdit}
+                  {disabledDownload}
+                  {loading}
+                  on:click-download={() =>
+                    dispatchCustomEvent('click-download')}
+                  on:click-edit={() => dispatchCustomEvent('click-edit')}
+                  {e2eAttributeSuffix}
+                  {dataTableId}
+                />
+              </slot>
+            {/if}
+            <slot name="selection">
+              <DefaultSelectionLabel
+                {showSelectionCount}
+                {selectionParams}
+                {itemsSelection}
+              />
+            </slot>
+          </div>
+
+          <slot name="action">
+            <DefaultAction
+              {loading}
+              on:submit-search={(event) =>
+                dispatchCustomEvent('submit-search', event.detail)}
+              on:input-search={(event) =>
+                dispatchCustomEvent('input-search', event.detail)}
+              on:click-filter={() => dispatchCustomEvent('click-filter')}
+              on:click-settings={() => dispatchCustomEvent('click-settings')}
+              on:click-primary-action={() =>
+                dispatchCustomEvent('click-primary-action')}
+              on:click-secondary-action={() =>
+                dispatchCustomEvent('click-secondary-action')}
+              on:apply-new-columns-order={(event) =>
+                reorderColumns(event.detail)}
+              on:toggle-change={(event) =>
+                dispatchCustomEvent('toggle-change', event.detail)}
+              {e2eAttributeSuffix}
+              {dataTableId}
+              {searchPlaceholder}
+              {searchValue}
+              {headTitles}
+              {activateSettings}
+              {applyButtonSettingsLabel}
+              {resetButtonSettingsLabel}
+              {fixedFirstColumn}
+              {fixedFirstColumnLabel}
+              {showToggle}
+              {toggleLabel}
+              {toggleValue}
+              {filterLabel}
+              {layerTitleSettingsLabel}
+              {layerBodyTitleSettingsLabel}
+              {layerColumnTitleSettingsLabel}
+              {hideSettingsCol}
+            /></slot
+          >
+        </div>
+      {/if}
+      <div class="mc-datatable__selection">
+        <DefaultSelection
+          {showSelectionCount}
+          {selectionParams}
+          {itemsSelection}
+          {allItems}
+          on:clear-selection={() => {
+            selectionParams = clearSelection(selectionParams);
+            dispatchCustomEvent('clear-selection', {
+              idsSelected: selectionParams?.idsSelected,
+              excludedIdsFromSelection:
+                selectionParams?.excludedIdsFromSelection,
+              allIsSelected: selectionParams?.allSelected,
+            });
+          }}
+          on:select-all={() => {
+            selectionParams = selectAll(selectionParams);
+            dispatchCustomEvent('select-all', {
+              idsSelected: selectionParams?.idsSelected,
+              excludedIdsFromSelection:
+                selectionParams?.excludedIdsFromSelection,
+              allIsSelected: selectionParams?.allSelected,
+            });
+          }}
+        />
+      </div>
+
+      {#if showFilterTags}
+        <slot name="filtertags">
+          <DefaultFilterTags
+            {loading}
+            {resetFiltersLabel}
+            {removeFilterLabel}
+            {filterTags}
+            on:click-remove-tag={(event) =>
+              dispatchCustomEvent('click-remove-tag', event.detail)}
+            on:click-clear-tags={() => dispatchCustomEvent('click-clear-tags')}
+            {e2eAttributeSuffix}
+            {dataTableId}
+            {filterTagsMax}
+            {filterReduceLabel}
+            {filterShowLabel}
+          />
+        </slot>
+      {/if}
+    </div>
+  {/if}
+  <div class="mc-datatable__container">
+    <div
+      class={`mc-datatable__main ${maxHeight ? ' max-height-table' : ''}`}
+      style={`max-height:${maxHeight}px`}
+    >
+      {#if items.length === 0 && !loading}
+        <div class="mc-datatable__empty">
+          <slot name="no-data" />
+        </div>
+      {:else}
+        <table class="mc-datatable__table">
+          <!------- DATA TABLE THEAD ------->
+          {#if showColumnHeaders && items.length > 0}
+            <thead>
+              <tr>
+                {#if itemsSelection}
+                  <th
+                    scope="col"
+                    class="mc-datatable__cell-checkbox"
+                    class:mc-datatable__fix-first-column={fixCheckbox}
+                    {...getDataAttribute(
+                      e2eAttributeSuffix,
+                      'columnHead-selection',
+                    )}
+                    bind:this={thSelection}
+                  >
+                    <div class="mc-checkbox">
+                      <input
+                        id="item-selection__all"
+                        type="checkbox"
+                        class="mc-checkbox__input"
+                        name="example"
+                        disabled={disableSelection}
+                        checked={allItems}
+                        {indeterminate}
+                        on:click={handleAllSelection}
+                      />
+                      <label
+                        for="item-selection__all"
+                        class="mc-checkbox__label"
+                      />
+                    </div>
+                  </th>
+                {/if}
+                {#if hasSubRow}
+                  <th
+                    scope="col"
+                    class="mc-datatable__cell-button"
+                    bind:this={thSubRow}
+                    style:left={`${
+                      itemsSelection && thSelection
+                        ? thSelection.clientWidth
+                        : 0
+                    }px`}>&nbsp;</th
+                  >{/if}
+                {#each headTitles as headTitle}
+                  {#if !headTitle.hideColumn}
+                    {#if headTitle.sortable}
+                      <th
+                        scope="col"
+                        {...getDataAttribute(
+                          e2eAttributeSuffix,
+                          `columnHead-${headTitle.id}`,
+                        )}
+                        class:mc-datatable__fix-first-column={fixedFirstColumn &&
+                          findFirstHeadTitleNotHide()[0].id === headTitle.id}
+                        style:left={`${getLeftValueFixFirstColumn()}px`}
+                        style:min-width={headTitle.width}
+                      >
+                        <button
+                          class="mc-datatable__sort mc-datatable__btn"
+                          type="button"
+                          on:click={() =>
+                            handleSortClick(useOnePageSorting, headTitle)}
+                        >
+                          <span class="mc-datatable__sort-label">
+                            <span class="visually-hidden">Sort by</span
+                            >{headTitle.label}
+                          </span>
+
+                          <span
+                            class={`mc-datatable__sort-arrow${
+                              isSorted(headTitle.id)
+                                ? ` is-sorted-${sortParams.direction}`
+                                : ``
+                            }`}
+                          />
+                        </button>
+                      </th>
+                    {:else}
+                      <th
+                        scope="col"
+                        {...getDataAttribute(
+                          e2eAttributeSuffix,
+                          `columnHead-${headTitle.id}`,
+                        )}
+                        class:mc-datatable__fix-first-column={fixedFirstColumn &&
+                          headTitles[0].id === headTitle.id}
+                        style:left={`${getLeftValueFixFirstColumn()}px`}
+                        style:min-width={headTitle.width}
+                      >
+                        <span class="mc-datatable__head-label"
+                          >{headTitle.label}</span
+                        >
+                      </th>
+                    {/if}
+                  {/if}
+                {/each}
+                {#if optionsButton}
+                  <th scope="col" class="mc-datatable__cell-button" />
+                {/if}
+              </tr>
+            </thead>
+          {/if}
+          <!------- DATA TABLE TBODY ------->
+          <tbody>
+            {#if loading}
+              {#each Array(6) as _}
+                <tr class="mc-datatable__row">
+                  {#if itemsSelection}
+                    <td>
+                      <div
+                        class="skeleton-box mu-mb-100"
+                        style="width: 25px; height: 25px;"
+                      />
+                    </td>
+                  {/if}
+                  {#each headTitles as _}
+                    <td>
+                      <div
+                        class="skeleton-box mu-mb-100"
+                        style="width: 250px; height: 25px;"
+                      />
+                    </td>
+                  {/each}
+                </tr>
+              {/each}
+            {:else}
+              {#each items as item, itemIndex}
+                <tr
+                  class={`mc-datatable__row-parent${
+                    item.subRow?.expanded ? '--expanded' : ''
+                  } ${item.selected ? ' selected' : ''}`}
+                  class:mc-datatable-row__clickable={clickableRow}
+                  class:selected={item.selected}
+                  on:click={() => dispatchCustomEvent('item-clicked', item)}
+                >
+                  {#if itemsSelection}
+                    <th
+                      scope="row"
+                      class:mc-datatable__fix-first-column={fixCheckbox}
+                      {...getDataAttribute(
+                        e2eAttributeSuffix,
+                        `lineHead-item-${itemIndex + 1}`,
+                      )}
+                    >
+                      <div class="mc-checkbox">
+                        <input
+                          id={`item-selection__${item.id}`}
+                          type="checkbox"
+                          class="mc-checkbox__input"
+                          name="example"
+                          disabled={item.disableSelection}
+                          checked={item.selected}
+                          on:click|stopPropagation={() =>
+                            handleItemSelection(item)}
+                        />
+                        <label
+                          for={`item-selection__${item.id}`}
+                          class="mc-checkbox__label"
+                        />
+                      </div>
+                    </th>
+                  {/if}
+                  {#if hasSubRow}
+                    <td
+                      {...getDataAttribute(
+                        e2eAttributeSuffix,
+                        `subRowButton-item-${itemIndex + 1}`,
+                      )}
+                      class="mc-datatable__fix-first-column"
+                      style:left={`${
+                        itemsSelection && thSelection
+                          ? thSelection.clientWidth
+                          : 0
+                      }px`}
+                    >
+                      {#if 'subRow' in item}
+                        <button
+                          id={`expand-item-${itemIndex + 1}`}
+                          class="mc-datatable__expand mc-datatable__btn"
+                          type="button"
+                          on:click={() =>
+                            item.subRow
+                              ? (item.subRow.expanded = !item.subRow.expanded)
+                              : ''}
+                        >
+                          <span class="mc-datatable__btn-label"
+                            >Déplier la ligne</span
+                          >
+                          <span class="mc-datatable__btn-icon">
+                            {#if item.subRow?.expanded}
+                              <navigation-control-circle--less-24px />
+                            {:else}
+                              <navigation-control-circle--more-24px />
+                            {/if}
+                          </span>
+                        </button>
+                      {/if}
+                    </td>{/if}
+
+                  {#each headTitles as headTitle}
+                    {#if !headTitle.hideColumn}
+                      <td
+                        {...getDataAttribute(
+                          e2eAttributeSuffix,
+                          `item-${itemIndex + 1}-${headTitle.id}`,
+                        )}
+                        style={`text-align:${headTitle.textAlign}`}
+                        class:mc-datatable__fix-first-column={fixedFirstColumn &&
+                          findFirstHeadTitleNotHide()[0].id === headTitle.id}
+                        style:left={`${getLeftValueFixFirstColumn()}px`}
+                      >
+                        {@html getCellContent(headTitle, item)}
+                      </td>
+                    {/if}
+                  {/each}
+                  {#if optionsButton}
+                    <td class="mc-datatable__cell-button">
+                      {#if !hideOptionsButton.includes(item.id)}
+                        <button
+                          class="mc-datatable__options mc-datatable__btn"
+                          type="button"
+                          on:click={(e) =>
+                            handleOptionsClick(item, itemIndex, e)}
+                        >
+                          <navigation-display-other-24px />
+                        </button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+
+                <!------- SUB ROW ------->
+                {#if item.subRow}
+                  <tr
+                    class="
+              mc-datatable__row-expandable
+              mc-datatable__row-expandable--offset-2"
+                  >
+                    <td colspan="20">
+                      <div class="mc-datatable__row-inner">
+                        <table class="mc-datatable__subtable">
+                          <thead>
+                            <tr>
+                              {#each item.subRow.headDatas as subHeadtitle}
+                                <th
+                                  scope="col"
+                                  {...getDataAttribute(
+                                    e2eAttributeSuffix,
+                                    `subColumnHead-${subHeadtitle.id}`,
+                                  )}>{subHeadtitle.label}</th
+                                >
+                              {/each}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {#each item.subRow.bodyDatas as subItem, subItemIndex}
+                              <tr>
+                                {#each item.subRow.headDatas as subHeadtitle}
+                                  <td
+                                    {...getDataAttribute(
+                                      e2eAttributeSuffix,
+                                      `subItem-${subItemIndex + 1}-${
+                                        subHeadtitle.id
+                                      }`,
+                                    )}
+                                  >
+                                    {@html getCellContent(
+                                      subHeadtitle,
+                                      subItem,
+                                    )}
+                                  </td>
+                                {/each}
+                              </tr>
+                            {/each}
+                          </tbody>
+                        </table>
+                      </div>
+                    </td>
+                  </tr>
+                {/if}
+              {/each}
+            {/if}
+          </tbody>
+        </table>
+      {/if}
+    </div>
+    <!------- DATA TABLE FOOTER ------->
+    {#if parsedTableOptions?.showFooter}
+      <DataTableFooter
+        {loading}
+        {...parsedFooterDatas}
+        {itemsLabel}
+        {pageLabel}
+        {rowsPerPageLabel}
+        {e2eAttributeSuffix}
+        {dataTableId}
+        {showItemsCount}
+        {itemsPerPageOptions}
+        {showAllPages}
+        on:page-change={(event) =>
+          dispatchCustomEvent('page-change', event.detail)}
+      />
+    {/if}
+  </div>
+</div>
+
+<div
+  style="display: none"
+  id="fix-css-purge"
+  class="mc-datatable mc-badge mc-badge--danger"
+/>
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.datatable';
+  @import '@mozaic-ds/styles/components/c.datatable-tools';
+  @import '@mozaic-ds/styles/components/c.datatable-header';
+  @import '@mozaic-ds/styles/components/c.datatable-subtable';
+  @import '@mozaic-ds/styles/components/c.datatable-empty';
+  @import '@mozaic-ds/styles/components/c.button';
+  @import '@mozaic-ds/styles/components/c.toggle';
+  @import '@mozaic-ds/styles/components/_c.checkbox';
+  @import '@mozaic-ds/styles/components/c.badge';
+  @import '@mozaic-ds/styles/components/c.tooltip';
+  @import '@mozaic-ds/styles/components/c.links';
+  @import '@mozaic-ds/styles/components/c.left-icon-input';
+
+  :root {
+    --table-max-height: 200px;
+  }
+
+  .mc-datatable__fix-first-column {
+    position: sticky;
+    z-index: 1;
+    background-color: white;
+    left: 0;
+  }
+
+  .mc-datatable-row__clickable {
+    cursor: pointer;
+  }
+
+  .edition-selection-core {
+    display: flex;
+  }
+
+  .mc-datatable__fixed-column {
+    position: sticky;
+    background-color: white;
+  }
+
+  .max-height-table {
+    overflow: auto;
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 3;
+      box-shadow: 0px 1px 5px 0px rgb(34 32 32 / 20%);
+    }
+  }
+
+  .mc-datatable__row-inner {
+    overflow: auto;
+    thead {
+      position: sticky;
+      z-index: 0;
+    }
+  }
+
+  .is-sorted-asc {
+    &:after {
+      background: $color-grey-999;
+    }
+  }
+  .is-sorted-desc {
+    &:before {
+      background: $color-grey-999;
+    }
+  }
+
+  .skeleton-box {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background-color: $color-grey-200;
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.5) 60%,
+        rgba(255, 255, 255, 0)
+      );
+      -webkit-animation: shimmer 2s infinite;
+      animation: shimmer 2s infinite;
+      content: '';
+    }
+  }
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  .mc-datatable__topbar-selection {
+    margin-bottom: 1rem;
+  }
+</style>