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">
    <a href="#frameMain" class="sds-skipNavLink">
        Skip to content
    </a>

    <header class="sds-navTopbar sds-snetFrame__header">
        <div class="sds-navTopbar__container">
            <nav class="sds-navTopbar__inner navbar navbar-expand">
                <div class="sds-navTopbar__alignToMainContent">
                    <a class="sds-navTopbar__logo navbar-brand" href="#">
                        <img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
                    </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>
                                            <div class="sds-btnGroup">

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

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

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

                                            </div>
                                        </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 class="sds-snetFrame__menu">

                <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 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 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 -reorder dropdown-menu-right">
                                    <div class="dropdown-header">Réglages colonnes</div>
                                    <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">Error message</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">Error message</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">Error message</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">Error message</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">Error message</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">Error message</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">Error message</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">Error message</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">Error message</div>
                                                </div>
                                                <div class="sds-actionMenu__reorder sds-icon sds-icon-reorder"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </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 -filters">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

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

                                                            <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>
                                                            <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">Error message</div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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 -filters">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

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

                                                            <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>
                                                            <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">Error message</div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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 -filters">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

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

                                                            <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>
                                                            <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">Error message</div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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 -filters">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

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

                                                            <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>
                                                            <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">Error message</div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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 -filters">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

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

                                                            <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>
                                                            <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">Error message</div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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 -filters dropdown-menu-right">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

                                                                <span>Z-A</span>
                                                            </button>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="dropdown-header d-flex justify-content-between">
                                                            Filtrer
                                                        </div>
                                                        <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="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>
                                                            <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="prevweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="prevweek">
                                                                        Semaine passée
                                                                    </label>

                                                                </div>
                                                            </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="currweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="currweek">
                                                                        Cette semaine
                                                                    </label>

                                                                </div>
                                                            </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="nextweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="nextweek">
                                                                        Semaine prochaine
                                                                    </label>

                                                                </div>
                                                            </div>
                                                            <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="prevmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="prevmonth">
                                                                        Mois passé
                                                                    </label>

                                                                </div>
                                                            </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="currmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="currmonth">
                                                                        Ce mois-ci
                                                                    </label>

                                                                </div>
                                                            </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="nextmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="nextmonth">
                                                                        Mois prochain
                                                                    </label>

                                                                </div>
                                                            </div>
                                                            <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>
                                                        </div>
                                                    </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 -filters dropdown-menu-right">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

                                                                <span>Z-A</span>
                                                            </button>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="dropdown-header d-flex justify-content-between">
                                                            Filtrer
                                                        </div>
                                                        <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="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>
                                                            <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="prevweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="prevweek">
                                                                        Semaine passée
                                                                    </label>

                                                                </div>
                                                            </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="currweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="currweek">
                                                                        Cette semaine
                                                                    </label>

                                                                </div>
                                                            </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="nextweek"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="nextweek">
                                                                        Semaine prochaine
                                                                    </label>

                                                                </div>
                                                            </div>
                                                            <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="prevmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="prevmonth">
                                                                        Mois passé
                                                                    </label>

                                                                </div>
                                                            </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="currmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="currmonth">
                                                                        Ce mois-ci
                                                                    </label>

                                                                </div>
                                                            </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="nextmonth"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
                                                                    <label class="custom-control-label" for="nextmonth">
                                                                        Mois prochain
                                                                    </label>

                                                                </div>
                                                            </div>
                                                            <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>
                                                        </div>
                                                    </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 -filters dropdown-menu-right">
                                                        <div class="dropdown-header">Trier</div>
                                                        <div class="d-flex">
                                                            <button type="button" class="sds-actionMenu__item dropdown-item d-flex">
                                                                <span class="sds-iconCircle -secondary10" aria-hidden="true">

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

                                                                </span>

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

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

                                                                </span>

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

                                                            <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>
                                                            <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">Error message</div>
                                                                </div>
                                                            </div>
                                                            <div class="dropdown-divider"></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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</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="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">Error message</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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 %}