https://formation.ch-alpes-isere.fr/lib/javascript.php/1789977024/…/utils/libs/eticeo_table/eticeo_table.js

1class EticeoTable{constructor(tableElement,options={}){this.table=tableElement;this.searchBar=this.createSearchBar();this.containerDiv=document.createElement('div');this.containerDiv.classList.add('search-dropdown-container');if(options.enableDropdown){this.rowsDropdown=this.createRowsDropdown();this.containerDiv.appendChild(this.rowsDropdown)}
2this.containerDiv.appendChild(this.searchBar);this.table.insertAdjacentElement('beforebegin',this.containerDiv);this.sortDirection=1;this.lastSortedColumn=null;this.addSortEvent();this.fixHeaders();if(this.rowsDropdown){this.rowsDropdown.value=5;this.updateRowsPerPage(5)}}
3createSearchBar(){let searchBar=document.createElement('input');searchBar.type='text';searchBar.placeholder='Rechercher...';searchBar.classList.add('search-bar');searchBar.addEventListener('keyup',(e)=>{this.search(e.target.value)});return searchBar}
4createRowsDropdown(){let dropdown=document.createElement('select');dropdown.classList.add('rows-dropdown');let options=[5,10,'Tous'];options.forEach(option=>{let optionElement=document.createElement('option');optionElement.value=option;optionElement.textContent=option;dropdown.appendChild(optionElement)});dropdown.addEventListener('change',(e)=>{let value=e.target.value;this.updateRowsPerPage(value)});return dropdown}
5updateRowsPerPage(value){let rows=Array.from(this.table.querySelectorAll('tbody tr'));if(value==='Tous'){rows.forEach(row=>row.style.display='');return}
6let numRows=parseInt(value);rows.forEach((row,index)=>{if(index<numRows){row.style.display=''}else{row.style.display='none'}})}
7search(query){let rows=Array.from(this.table.querySelectorAll('tbody tr'));rows.forEach(row=>{let text=row.textContent.toLowerCase();row.style.display=text.indexOf(query.toLowerCase())>-1?'':'none'})}
8addSortEvent(){let headers=Array.from(this.table.querySelectorAll('th.eticeo_sortable'));let allheaders=Array.from(this.table.querySelectorAll('th'));headers.forEach((header)=>{let index=allheaders.indexOf(header);let sortIcon=document.createElement('i');sortIcon.classList.add('sort-icon','fas','fa-sort','ml-2');header.appendChild(sortIcon);sortIcon.addEventListener('click',(event)=>{event.stopPropagation();if(this.lastSortedColumn===index){this.sortDirection*=-1}else{this.lastSortedColumn=index;this.sortDirection=1}
9this.sortTable(index);this.updateSortIcons(headers,index)});if(header.classList.contains('asc')){this.sortDirection=1;this.sortTable(index);this.updateSortIcons(headers,index)}})}
10updateSortIcons(headers,columnIndex){let allheaders=Array.from(this.table.querySelectorAll('th'));headers.forEach((header)=>{let index=allheaders.indexOf(header);let sortIcon=header.querySelector('.sort-icon');if(sortIcon){if(index===columnIndex){sortIcon.classList.remove('fa-sort','fa-sort-up','fa-sort-down');if(this.sortDirection===1){sortIcon.classList.add('fa-sort-up');header.classList.add('asc');header.classList.remove('desc')}else{sortIcon.classList.add('fa-sort-down');header.classList.add('desc');header.classList.remove('asc')}}else{sortIcon.classList.remove('fa-sort-up','fa-sort-down');sortIcon.classList.add('fa-sort');header.classList.remove('asc','desc')}}})}
11sortTable(columnIndex){let rows=Array.from(this.table.querySelectorAll('tbody tr'));let sortedRows=rows.sort((a,b)=>{let aColText=a.querySelector(`td:nth-child(${columnIndex + 1})`).textContent.trim().toLowerCase();let bColText=b.querySelector(`td:nth-child(${columnIndex + 1})`).textContent.trim().toLowerCase();let aValue=this.extractValue(aColText);let bValue=this.extractValue(bColText);let finalDirection=this.sortDirection*(aValue>bValue?1:-1)
12return finalDirection});this.table.querySelector('tbody').innerHTML='';sortedRows.forEach(row=>this.table.querySelector('tbody').appendChild(row))}
13extractValue(text){if(text.includes('%')){return parseFloat(text.replace('%',''))}
14return text}
15fixHeaders(){this.table.classList.add('fixed-header')}}