Page Due Diligence: Empty

Showing dropdowns:

  • Add the .show class to the .dropdown element
  • set the dropdown toggle's (button) "aria-expanded" attribute to true
  • add the .show class to the .dropdown-menu element
  • .dropdown elements that have the .-filters modifier class will have to have their height dynamically adjusted through JS, so their bottom part always stays above the fold.

Adding active style to the dropdown toggle when filter are selected

  • toggle the .-filterActive class on the .dropdown element

You can add various positining classes to the dropdown element, though in our case, we'll only need to add the .dropdown-menu-right class to the last .dropdown element to avoid it getting hidden by the table's overflow.

Frame classes

The following classes need to be present on the sds-snetFrame element for styles to be rendered correctly:

  • -menuToggleVisible
  • -fullWidth
<div class="sds-snetFrame -menuToggleVisible -fullWidth">
    <nav role="navigation">
        <ul class="list-unstyled">
            <li>
                <a href="#sidebarNav" class="sds-skipNavigation sds-box -insetMd sds-scaleInteraction text-underline">
                    Skip to sidebar navigation
                </a>
            </li>
            <li>
                <a href="#frameMain" class="sds-skipNavigation sds-box -insetMd sds-scaleInteraction text-underline">
                    Skip to content
                </a>
            </li>
        </ul>
    </nav>

    <header role="banner" class="sds-navTopbar sds-snetFrame__header">
        <div class="sds-navTopbar__container">
            <nav role="navigation" class="sds-navTopbar__inner navbar navbar-expand">
                <div class="sds-navTopbar__alignToMainContent">
                    <a class="sds-navTopbar__logo navbar-brand" href="#">
                        <span class="sr-only">Accueil S-Net</span>
                        <img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="Logo Spuerkeess">
                    </a>
                </div>
                <div class="sds-navTopbar__meta sds-textHelper">
                    <span>Corporate's Bridge</span>
                    <span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
                </div>
                <div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
                    <ul class="sds-navTopbar__content navbar-nav">

                        <li class="sds-navTopbar__item dropdown -hasNotif -hasLabelShown">
                            <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                                <span class="sds-icon sds-icon-bell"></span>

                            </button>

                            <span class="sds-navTopbar__notificationLabel">
                                <span class="sds-navTopbar__notificationLabelText">
                                    10

                                </span>
                            </span>

                            <div class="sds-navTopbar__itemNotifAnim">
                                <span class="lottieBellAnim"></span>
                            </div>

                        </li>

                        <li class="sds-navTopbar__item dropdown">

                            <button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                                <div class="sds-avatar centeredBgi sds-navTopbar__userDropdownAvatar">

                                    <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                </div>

                                <span class="sds-navTopbar__userDropdownLabel sds-textHelper">Label With Name</span>
                                <span class="sds-iconCircle" aria-hidden="true">

                                    <span class="sds-icon sds-icon-chevrondown"></span>

                                </span>

                            </button>

                            <div class="sds-userMenu sds-navTopbar__userMenu dropdown-menu dropdown-menu-right">

                                <div class="sds-userMenu__header d-flex align-items-center">

                                    <div class="sds-avatar centeredBgi -avatarXl sds-userMenu__avatar">

                                        <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                    </div>

                                    <div class="sds-userMenu__headerText">
                                        <div class="h3">Jil Schmit Longname</div>
                                        <div class="sds-userMenu__headerMeta sds-textHelper">Corporate&#39;s Bridge</div>
                                    </div>
                                </div>

                                <ul class="sds-userMenu__content list-unstyled">

                                    <li class="sds-userMenu__item">

                                        <a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
                                            <span class="font-weight-semibold">Changer de convention</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                    <span class="sds-icon sds-icon-switch"></span>

                                                </span>

                                            </div>
                                        </a>
                                    </li>

                                    <li class="sds-userMenu__item -borderTop">
                                        <div class="sds-userMenu__link d-flex align-items-center justify-content-between -isStatic">
                                            <span class="font-weight-semibold">Langue</span>
                                            <ul class="sds-btnGroup">

                                                <li>
                                                    <a href="" class="sds-numberCircle -secondary10 -large sds-userMenu__langItem ">
                                                        EN
                                                    </a>
                                                </li>

                                                <li>
                                                    <a href="" class="sds-numberCircle -secondary10 -large sds-userMenu__langItem -isActive">
                                                        FR
                                                    </a>
                                                </li>

                                                <li>
                                                    <a href="" class="sds-numberCircle -secondary10 -large sds-userMenu__langItem ">
                                                        DE
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </li>

                                </ul>

                            </div>

                        </li>

                        <li class="sds-navTopbar__item">
                            <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">

                                <span class="sds-icon sds-icon-logout"></span>

                            </button>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>

    <div class="sds-snetFrame__inner">
        <div class="sds-snetFrame__fader" aria-hidden="true"></div>

        <div class="sds-snetFrame__menuContainer">
            <nav role="navigation" class="sds-snetFrame__menu" id="sidebarNav">

                <div class="sds-snetFrame__menuList">

                    <ul class="sds-snetFrame__menuListInner list-unstyled">

                        <li class="sds-snetFrame__menuItem -isSeparator -isFloating">
                            <a href="" data-toggle="dropdown" id="cpbShortCutMenu" data-boundary="viewport" data-reference="parent" data-display="static" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Nouvelle Demande" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -successG" aria-hidden="true">

                                        <span class="sds-icon sds-icon-plus"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Nouvelle Demande</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Tableau de bord" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-graphgauge"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Tableau de bord</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Entités" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-business"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Entités</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Suivi des demandes" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-list"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Suivi des demandes</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem -isActive">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Dossiers due diligence" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-folder"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Dossiers due diligence</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Gestion des droits" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-locked"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Gestion des droits</span>

                            </a>

                        </li>

                    </ul>
                    <ul class="sds-snetFrame__settings list-unstyled">

                        <li class="sds-snetFrame__settingsItem sds-snetFrame__settingsOpenMenu">
                            <button type="button" class="sds-snetFrame__settingsButton">
                                <span class="sds-snetFrame__settingsButtonIcon sds-icon sds-icon-chevronrightdouble" data-toggle="tooltip" data-title="Toggle Menu" data-placement="right" data-boundary="window"></span>
                                <span class="sr-only">Déployer le menu</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <main role="main" class="sds-snetFrame__main" id="frameMain">
            <!-- panel header content start -->

            <div class="sds-snetFrame__mainHeader -headroom">

                <div class="sds-panelHeader">
                    <div class="sds-panelHeader__actionGroup">
                        <nav role="navigation" class="sds-linkTabs">
                            <ul class="sds-linkTabs__inner nav nav-tabs">

                                <li class="nav-item">
                                    <a class="nav-link" href="">Vue personnelle <span>(1)</span></a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" href="">Vue équipe <span>(0)</span></a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link active" href="">Vue globale <span>(8)</span></a>
                                </li>

                            </ul>
                        </nav>
                    </div>
                    <div class="sds-panelHeader__alignEnd flex-grow-1">
                        <div class="sds-panelHeader__actionGroup flex-grow-1 flex-lg-grow-0">
                            <div class="flex-grow-1">
                                <div class="sds-input -search -hasIcon -bgWhite">
                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                    <div class="sds-input__searchActions">
                                        <div class="sds-input__clearBtn">
                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                <span class="sds-icon sds-icon-close"></span>

                                            </button>
                                        </div>
                                        <div class="sds-input__searchBtn">
                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                <span class="sds-btn__text">Rechercher</span>

                                            </button>
                                        </div>
                                    </div>

                                    <div class="sds-input__iconLeft">
                                        <span class="sds-icon sds-icon-search"></span>
                                    </div>

                                </div>
                            </div>
                            <div class="dropdown">
                                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="dropdown" aria-expanded="">

                                    <span class="sds-icon sds-icon-simulation"></span>

                                </button>

                                <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -reorder dropdown-menu-right">
                                    <fieldset>
                                        <legend class="dropdown-header">Réglages colonnes</legend>
                                        <ul class="list-unstyled">
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="entite"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="entite">Entité</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="groupe"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="groupe">Groupe</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="equipe"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="equipe">Equipe</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="Responsable"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="Responsable">Responsable</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="Activite"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="Activite">Activite</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="Statut"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="Statut">Statut</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ref"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="ref">Réf.</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rmajef"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="rmajef">Dernière mise à jour.</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                            <li draggable="true">
                                                <div class="d-flex align-items-center dropdown-item justify-content-between">
                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="creation"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                        <label class="custom-control-label" for="creation">Date de création</label>

                                                        <div class="sds-checkbox__error invalid-feedback">
                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                {Hint}

                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </fieldset>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- panel header content end -->
            <div class="sds-snetFrame__mainContent">
                <!-- main content start -->

                <div class="sds-box -insetMd">
                    <div class="sds-filterTable">
                        <div class="sds-filterTable__countHeader">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="h5"><span>0</span> résultats</div>
                                <button type="button" class="sds-btn -btnSecondary -btnInverse d-none -noPadding">

                                    <span class="sds-btn__text">Annuler filtrage</span>

                                    <span class="sds-icon sds-icon-reload"></span>

                                </button>
                            </div>
                        </div>
                        <div class="sds-filterTable__inner">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <th>
                                            <div class="sds-filterTable__fixedWidth">
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Entité</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>

                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <div class="dropdown-header d-flex justify-content-between">
                                                                <legend>Filtrer</legend>

                                                                <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                                                                    <span class="sds-btn__text">Annuler <span>(1)</span></span>

                                                                </button>

                                                            </div>

                                                            <div class="dropdown-item -isStatic">

                                                                <div class="sds-input -search -hasIcon">
                                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                                    <div class="sds-input__searchActions">
                                                                        <div class="sds-input__clearBtn">
                                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                                <span class="sds-icon sds-icon-close"></span>

                                                                            </button>
                                                                        </div>
                                                                        <div class="sds-input__searchBtn">
                                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                                <span class="sds-btn__text">Rechercher</span>

                                                                            </button>
                                                                        </div>
                                                                    </div>

                                                                    <div class="sds-input__iconLeft">
                                                                        <span class="sds-icon sds-icon-search"></span>
                                                                    </div>

                                                                </div>

                                                            </div>

                                                            <div class="dropdown-item">
                                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">Sélectionner tout</label>

                                                                    <div class="sds-checkbox__error invalid-feedback">
                                                                        <p class="sds-hint sds-textHelperSmall -hintError">

                                                                            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                            {Hint}

                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="luxlait">Luxlait</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="samsung"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="samsung">Samsung</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="apple"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="apple">Apple</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rtl"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="rtl">RTL Radio</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ikea"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="ikea">Ikea</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                    </div>

                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="sds-filterTable__fixedWidth">
                                                <div class="dropdown -filterActive">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Groupe</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>
                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <div class="dropdown-header d-flex justify-content-between">
                                                                <legend>Filtrer</legend>

                                                                <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                                                                    <span class="sds-btn__text">Annuler <span>(1)</span></span>

                                                                </button>

                                                            </div>

                                                            <div class="dropdown-item -isStatic">

                                                                <div class="sds-input -search -hasIcon">
                                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                                    <div class="sds-input__searchActions">
                                                                        <div class="sds-input__clearBtn">
                                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                                <span class="sds-icon sds-icon-close"></span>

                                                                            </button>
                                                                        </div>
                                                                        <div class="sds-input__searchBtn">
                                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                                <span class="sds-btn__text">Rechercher</span>

                                                                            </button>
                                                                        </div>
                                                                    </div>

                                                                    <div class="sds-input__iconLeft">
                                                                        <span class="sds-icon sds-icon-search"></span>
                                                                    </div>

                                                                </div>

                                                            </div>

                                                            <div class="dropdown-item">
                                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">Sélectionner tout</label>

                                                                    <div class="sds-checkbox__error invalid-feedback">
                                                                        <p class="sds-hint sds-textHelperSmall -hintError">

                                                                            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                            {Hint}

                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="luxlait">Luxlait</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="samsung"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="samsung">Samsung</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="apple"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="apple">Apple</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rtl"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="rtl">RTL Radio</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ikea"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="ikea">Ikea</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div>
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Equipe</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>
                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <div class="dropdown-header d-flex justify-content-between">
                                                                <legend>Filtrer</legend>

                                                                <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                                                                    <span class="sds-btn__text">Annuler <span>(1)</span></span>

                                                                </button>

                                                            </div>

                                                            <div class="dropdown-item -isStatic">

                                                                <div class="sds-input -search -hasIcon">
                                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                                    <div class="sds-input__searchActions">
                                                                        <div class="sds-input__clearBtn">
                                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                                <span class="sds-icon sds-icon-close"></span>

                                                                            </button>
                                                                        </div>
                                                                        <div class="sds-input__searchBtn">
                                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                                <span class="sds-btn__text">Rechercher</span>

                                                                            </button>
                                                                        </div>
                                                                    </div>

                                                                    <div class="sds-input__iconLeft">
                                                                        <span class="sds-icon sds-icon-search"></span>
                                                                    </div>

                                                                </div>

                                                            </div>

                                                            <div class="dropdown-item">
                                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">Sélectionner tout</label>

                                                                    <div class="sds-checkbox__error invalid-feedback">
                                                                        <p class="sds-hint sds-textHelperSmall -hintError">

                                                                            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                            {Hint}

                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="luxlait">Luxlait</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="samsung"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="samsung">Samsung</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="apple"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="apple">Apple</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rtl"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="rtl">RTL Radio</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ikea"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="ikea">Ikea</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="sds-filterTable__fixedWidth">
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Responsable</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>
                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <div class="dropdown-header d-flex justify-content-between">
                                                                <legend>Filtrer</legend>

                                                                <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                                                                    <span class="sds-btn__text">Annuler <span>(1)</span></span>

                                                                </button>

                                                            </div>

                                                            <div class="dropdown-item -isStatic">

                                                                <div class="sds-input -search -hasIcon">
                                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                                    <div class="sds-input__searchActions">
                                                                        <div class="sds-input__clearBtn">
                                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                                <span class="sds-icon sds-icon-close"></span>

                                                                            </button>
                                                                        </div>
                                                                        <div class="sds-input__searchBtn">
                                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                                <span class="sds-btn__text">Rechercher</span>

                                                                            </button>
                                                                        </div>
                                                                    </div>

                                                                    <div class="sds-input__iconLeft">
                                                                        <span class="sds-icon sds-icon-search"></span>
                                                                    </div>

                                                                </div>

                                                            </div>

                                                            <div class="dropdown-item">
                                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">Sélectionner tout</label>

                                                                    <div class="sds-checkbox__error invalid-feedback">
                                                                        <p class="sds-hint sds-textHelperSmall -hintError">

                                                                            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                            {Hint}

                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="luxlait">Luxlait</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="samsung"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="samsung">Samsung</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="apple"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="apple">Apple</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rtl"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="rtl">RTL Radio</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ikea"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="ikea">Ikea</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div class="sds-filterTable__fixedWidth">
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Statut</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>
                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <div class="dropdown-header d-flex justify-content-between">
                                                                <legend>Filtrer</legend>

                                                                <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                                                                    <span class="sds-btn__text">Annuler <span>(1)</span></span>

                                                                </button>

                                                            </div>

                                                            <div class="dropdown-item -isStatic">

                                                                <div class="sds-input -search -hasIcon">
                                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                                    <div class="sds-input__searchActions">
                                                                        <div class="sds-input__clearBtn">
                                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                                <span class="sds-icon sds-icon-close"></span>

                                                                            </button>
                                                                        </div>
                                                                        <div class="sds-input__searchBtn">
                                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                                <span class="sds-btn__text">Rechercher</span>

                                                                            </button>
                                                                        </div>
                                                                    </div>

                                                                    <div class="sds-input__iconLeft">
                                                                        <span class="sds-icon sds-icon-search"></span>
                                                                    </div>

                                                                </div>

                                                            </div>

                                                            <div class="dropdown-item">
                                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">Sélectionner tout</label>

                                                                    <div class="sds-checkbox__error invalid-feedback">
                                                                        <p class="sds-hint sds-textHelperSmall -hintError">

                                                                            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                            {Hint}

                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="luxlait">Luxlait</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="samsung"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="samsung">Samsung</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="apple"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="apple">Apple</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rtl"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="rtl">RTL Radio</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ikea"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="ikea">Ikea</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div>
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Dernière mise à jour</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>

                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters dropdown-menu-right">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item flex-grow-1">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item flex-grow-1">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <legend class="dropdown-header d-flex justify-content-between">
                                                                Filtrer
                                                            </legend>
                                                            <div class="dropdown-item">
                                                                <div class="sds-radio custom-control custom-radio">
                                                                    <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="default"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">
                                                                        Blank
                                                                    </label>

                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="prevweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="prevweek">
                                                                            Semaine passée
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="currweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="currweek">
                                                                            Cette semaine
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="nextweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="nextweek">
                                                                            Semaine prochaine
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                            </ul>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="prevmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="prevmonth">
                                                                            Mois passé
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="currmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="currmonth">
                                                                            Ce mois-ci
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="nextmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="nextmonth">
                                                                            Mois prochain
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                            </ul>
                                                            <div class="dropdown-divider"></div>
                                                            <div class="dropdown-item">

                                                                <div class="sds-radio custom-control custom-radio">
                                                                    <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="custom"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="custom">
                                                                        Personnalisé
                                                                    </label>

                                                                </div>

                                                            </div>
                                                            <div class="dropdown-item -isStatic d-none">
                                                                <div class="sds-input -hasIcon -calendar js-flatpickr">
                                                                    <input id="inputCalendar" class="sds-input form-control" type="text" placeholder="11/04/2023" value="">

                                                                    <div class="sds-input__iconRight">

                                                                        <span class="sds-icon sds-icon-calendar"></span>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                    </div>

                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div>
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Expiration</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>

                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters dropdown-menu-right">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item flex-grow-1">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item flex-grow-1">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <legend class="dropdown-header d-flex justify-content-between">
                                                                Filtrer
                                                            </legend>
                                                            <div class="dropdown-item">
                                                                <div class="sds-radio custom-control custom-radio">
                                                                    <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="default"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">
                                                                        Blank
                                                                    </label>

                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="prevweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="prevweek">
                                                                            Semaine passée
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="currweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="currweek">
                                                                            Cette semaine
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="nextweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="nextweek">
                                                                            Semaine prochaine
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                            </ul>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="prevmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="prevmonth">
                                                                            Mois passé
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="currmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="currmonth">
                                                                            Ce mois-ci
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-radio custom-control custom-radio">
                                                                        <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="nextmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="nextmonth">
                                                                            Mois prochain
                                                                        </label>

                                                                    </div>
                                                                </li>
                                                            </ul>
                                                            <div class="dropdown-divider"></div>
                                                            <div class="dropdown-item">

                                                                <div class="sds-radio custom-control custom-radio">
                                                                    <input value="radio-value" type="radio" name="radio-name" class="sr-only custom-control-input " id="custom"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="custom">
                                                                        Personnalisé
                                                                    </label>

                                                                </div>

                                                            </div>
                                                            <div class="dropdown-item -isStatic d-none">
                                                                <div class="sds-input -hasIcon -calendar js-flatpickr">
                                                                    <input id="inputCalendar" class="sds-input form-control" type="text" placeholder="11/04/2023" value="">

                                                                    <div class="sds-input__iconRight">

                                                                        <span class="sds-icon sds-icon-calendar"></span>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </fieldset>
                                                    </div>

                                                </div>
                                            </div>
                                        </th>
                                        <th>
                                            <div>
                                                <div class="dropdown">
                                                    <button type="button" class="sds-btn -btnSecondary sds-filterTable__filter" aria-expanded="false" data-toggle="dropdown">

                                                        <span class="sds-btn__text">Délai expiration</span>

                                                        <span class="sds-icon sds-icon-chevrondown"></span>

                                                    </button>
                                                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu list-unstyled -filters dropdown-menu-right">
                                                        <fieldset>
                                                            <legend class="dropdown-header">Trier</legend>
                                                            <ul class="d-flex list-unstyled">
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowbottom"></span>

                                                                        </span>

                                                                        <span>A-Z</span>
                                                                    </button>
                                                                </li>
                                                                <li class="dropdown-item d-flex">
                                                                    <button type="button" class="sds-actionMenu__item">
                                                                        <span class="sds-iconCircle -secondary10" aria-hidden="true">

                                                                            <span class="sds-icon sds-icon-arrowtop"></span>

                                                                        </span>

                                                                        <span>Z-A</span>
                                                                    </button>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                        <div class="dropdown-divider"></div>
                                                        <fieldset>
                                                            <div class="dropdown-header d-flex justify-content-between">
                                                                <legend>Filtrer</legend>

                                                                <button type="button" class="sds-btn -btnSecondary -btnInverse -noPadding -btnSmall d-none">

                                                                    <span class="sds-btn__text">Annuler <span>(1)</span></span>

                                                                </button>

                                                            </div>

                                                            <div class="dropdown-item -isStatic">

                                                                <div class="sds-input -search -hasIcon">
                                                                    <input id="" class="sds-input form-control" type="text" placeholder="Search" value="">

                                                                    <div class="sds-input__searchActions">
                                                                        <div class="sds-input__clearBtn">
                                                                            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost -smaller">

                                                                                <span class="sds-icon sds-icon-close"></span>

                                                                            </button>
                                                                        </div>
                                                                        <div class="sds-input__searchBtn">
                                                                            <button type="button" class="sds-btn -btnSecondary -btnSmall" disabled>

                                                                                <span class="sds-btn__text">Rechercher</span>

                                                                            </button>
                                                                        </div>
                                                                    </div>

                                                                    <div class="sds-input__iconLeft">
                                                                        <span class="sds-icon sds-icon-search"></span>
                                                                    </div>

                                                                </div>

                                                            </div>

                                                            <div class="dropdown-item">
                                                                <div class="sds-checkbox custom-control custom-checkbox">
                                                                    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="default">Sélectionner tout</label>

                                                                    <div class="sds-checkbox__error invalid-feedback">
                                                                        <p class="sds-hint sds-textHelperSmall -hintError">

                                                                            <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                            {Hint}

                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></div>
                                                            <ul class="list-unstyled">
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="luxlait" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="luxlait">Luxlait</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="samsung"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="samsung">Samsung</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="apple"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="apple">Apple</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="rtl"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="rtl">RTL Radio</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                <li class="dropdown-item">
                                                                    <div class="sds-checkbox custom-control custom-checkbox">
                                                                        <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="ikea"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                                                        <label class="custom-control-label" for="ikea">Ikea</label>

                                                                        <div class="sds-checkbox__error invalid-feedback">
                                                                            <p class="sds-hint sds-textHelperSmall -hintError">

                                                                                <span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>

                                                                                {Hint}

                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                        </th>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>

                            <div class="sds-emptyState sds-box -insetLg">
                                <span class="sds-emptyState__icon sds-icon sds-icon-search"></span>
                                <div class="sds-stackXxs">
                                    <p class="sds-emptyState__text sds-textSemiBold">Aucun résultat trouvé</p>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>

                <!-- main content end -->
            </div>

        </main>
    </div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@cpb-frame" %}
{% block panelHeaderContent %}
	<div class="{{ namespace }}panelHeader">
		<div class="{{ namespace }}panelHeader__actionGroup">
			{% render "@snet-link-tabs",panelHeaderTabs,true %}
		</div>
		<div class="{{ namespace }}panelHeader__alignEnd flex-grow-1">
			<div class="{{ namespace }}panelHeader__actionGroup flex-grow-1 flex-lg-grow-0">
				<div class="flex-grow-1">
					{% render "@input--search-bg-white" %}
				</div>
				<div class="dropdown{% if reorderDropdownShown %} show{% endif %}">
					{% render "@icon-btn-secondary",{
						icon: "icon-simulation",
						attrs: {
							"data-toggle": "dropdown",
							"aria-expanded": reorderDropdownShown
						}
					},true %}
					{% if reorderDropdownShown %}
						{% render "@cpb-dropdown--reorder",{
							classes: ["dropdown-menu-right","show"]
						},true %}
						{% else %}
						{% render "@cpb-dropdown--reorder",{
							classes: ["dropdown-menu-right"]
						},true %}
					{% endif %}
				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block panelMainContent %}
	<div class="{{ namespace }}box -insetMd">
		<div class="{{ namespace }}filterTable">
			<div class="{{ namespace }}filterTable__countHeader">
				<div class="d-flex align-items-center justify-content-between">
					<div class="h5"><span>{% if empty %}0{% else %}453{% endif %}</span> résultats</div>
					{% render "@btn-secondary-inverse--icon-right",{
						text: "Annuler filtrage",
						icon: "icon-reload",
						classes: [filterButtonHidden,"-noPadding"]
					},true %}
				</div>
			</div>
			<div class="{{ namespace }}filterTable__inner">
				<div class="table-responsive">
					<table class="table">
						<thead>
						<th>
							<div class="{{ namespace }}filterTable__fixedWidth">
								<div class="dropdown{% if dropdownShown %} show{% endif %}">
									{% render "@btn-secondary--icon-right",{
										text: "Entité",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% if dropdownShown %}
										{% render "@cpb-dropdown--search",{
											classes: ["show"]
										},true %}
									{% else %}
										{% render "@cpb-dropdown--search" %}
									{% endif %}
								</div>
							</div>
						</th>
						<th>
							<div class="{{ namespace }}filterTable__fixedWidth">
								<div class="dropdown -filterActive">
									{% render "@btn-secondary--icon-right",{
										text: "Groupe",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% render "@cpb-dropdown--search" %}
								</div>
							</div>
						</th>
						<th>
							<div>
								<div class="dropdown">
									{% render "@btn-secondary--icon-right",{
										text: "Equipe",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% render "@cpb-dropdown--search" %}
								</div>
							</div>
						</th>
						<th>
							<div class="{{ namespace }}filterTable__fixedWidth">
								<div class="dropdown">
									{% render "@btn-secondary--icon-right",{
										text: "Responsable",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% render "@cpb-dropdown--search" %}
								</div>
							</div>
						</th>
						<th>
							<div class="{{ namespace }}filterTable__fixedWidth">
								<div class="dropdown">
									{% render "@btn-secondary--icon-right",{
										text: "Statut",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% render "@cpb-dropdown--search" %}
								</div>
							</div>
						</th>
						<th>
							<div>
								<div class="dropdown{% if dropdownShown %} show{% endif %}">
									{% render "@btn-secondary--icon-right",{
										text: "Dernière mise à jour",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% if dropdownShown %}
										{% render "@cpb-dropdown--calendar",{
											classes: ["show","dropdown-menu-right"]
										},true %}
									{% else %}
										{% render "@cpb-dropdown--calendar",{classes: ["dropdown-menu-right"]},true %}
									{% endif %}
								</div>
							</div>
						</th>
						<th>
							<div>
								<div class="dropdown{% if dropdownShown %} show{% endif %}">
									{% render "@btn-secondary--icon-right",{
										text: "Expiration",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% if dropdownShown %}
										{% render "@cpb-dropdown--calendar",{
											classes: ["show","dropdown-menu-right"]
										},true %}
									{% else %}
										{% render "@cpb-dropdown--calendar",{classes: ["dropdown-menu-right"]},true %}
									{% endif %}
								</div>
							</div>
						</th>
						<th>
							<div>
								<div class="dropdown{% if dropdownShown %} show{% endif %}">
									{% render "@btn-secondary--icon-right",{
										text: "Délai expiration",
										icon: "icon-chevrondown",
										classes: [namespace+"filterTable__filter"],
										attrs: {
											"aria-expanded": dropdownShown or false,
											"data-toggle": "dropdown"
										}
									},true %}
									{% render "@cpb-dropdown--search",{
										classes: ["dropdown-menu-right"]
									},true %}
								</div>
							</div>
						</th>
						</thead>
						<tbody>
						{% if empty %}
						{% else %}
							{% for key, item in tableItems %}
								<tr>
									<td>
										<div class="{{ namespace }}filterTable__fixedWidth">
											{{ item.entite }}
										</div>
									</td>
									<td>
										<div class="{{ namespace }}filterTable__fixedWidth">
											{{ item.group }}
										</div>
									</td>
									<td>
										<div>
											{{ item.equipe }}
										</div>
									</td>
									<td>
										<div>
											{{ item.responsable }}
										</div>
									</td>
									<td>
										<div class="{{ namespace }}filterTable__status">
											{% render "@snet-transaction-state"+item.statut,{
												icon: item.statutIcon,
												text: item.statutText,
												classes: ["text-wrap"]
											},true %}
										</div>
									</td>
									<td>
										<div>
											{{ item.derniereMaj }}
										</div>
									</td>
									<td>
										<div>
											{{ item.expiration }}
										</div>
									</td>
									<td>
										<div>
											{{ item.delaiExp }}
										</div>
									</td>
								</tr>
							{% endfor %}
						{% endif %}
						</tbody>
					</table>
				</div>
				{% if empty %}
					{% render "@snet-empty-state--no-result",{
						icon: "icon-search"
					},true %}
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}