@iamproperty/components 3.4.6 → 3.4.7

package/assets/ts/modules/table.ts

@@ -1,586 +1,751 @@
 // @ts-nocheck
-import { zeroPad, isNumeric } from "./helpers";
+import { zeroPad, isNumeric, ucfirst } from "./helpers";
+import createPaginationButttons from "./pagination";
 
-function table(tableElement) {
+// Basic functionality needed
+export const addDataAttributes = (table) => {
 
-  if(typeof tableElement != "object")
-    return false;
+  const colHeadings = Array.from(table.querySelectorAll('thead th'));
+  const colRows = Array.from(table.querySelectorAll('tbody tr'));
 
-  const thead = tableElement.querySelector('thead');
-  const tbody = tableElement.querySelector('tbody');
-  const storedData = tbody.cloneNode(true);
-  const sortedEvent = new Event('sorted');
-  const filteredEvent = new Event('filtered');
-  const reorderedEvent = new Event('reordered');
-  const randID = 'table_'+Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
-  let draggedRow;
+  colRows.forEach((row, index) => {
 
-  tableElement.setAttribute('id',randID)
+    const cells = Array.from(row.querySelectorAll('th, td'));
+    const statuses = ['Low','Medium','High','N/A','Pending','Verified','Incomplete','Completed','Requires approval'];
+    
+    cells.forEach((cell, cellIndex) => {
 
-  // #region Sortable
-  const sortTable = function(sortBy,sort){
+      const heading = colHeadings[cellIndex];
+      if(typeof heading != "undefined"){
 
-    // Create an array from the table rows, the index created is then used to sort the array
-    let tableArr = [];
-    Array.from(tbody.querySelectorAll('tr')).forEach((tableRow, index) => {
+        let tempDiv = document.createElement("div");
+        tempDiv.innerHTML = heading.innerHTML;
+        let headingText = tempDiv.textContent || tempDiv.innerText || "";
+        cell.setAttribute('data-label',headingText);
 
-      let rowIndex = tableRow.querySelector('td[data-label="'+sortBy+'"], th[data-label="'+sortBy+'"]').textContent;
+        if(heading.hasAttribute('class'))
+          cell.setAttribute('class',heading.getAttribute('class'))
 
-      if(isNumeric(rowIndex))
-        rowIndex = zeroPad(rowIndex,10)
+        if(heading.hasAttribute('data-format')){
+          cell.setAttribute('data-format',heading.getAttribute('data-format'))
+          cell.innerHTML = formatCell('date',cell.textContent.trim()); //Make sure date format is consistent
+        }
 
-      const dataRow = {
-        index: rowIndex,
-        row: tableRow
+        if(statuses.includes(cell.textContent.trim())){
+          cell.setAttribute('data-content',cell.textContent.trim());
+        }
       }
-      tableArr.push(dataRow);
     });
+  });
+}
 
-    // Sort array
-    tableArr.sort((a, b) => (a.index > b.index) ? 1 : -1)
+export const getLargestLastColWidth = (table) => {
+ 
+  let largestWidth = 0;
 
-    // Reverse if descending
-    if(sort == "descending")
-      tableArr = tableArr.reverse();
+  Array.from(table.querySelectorAll('tr')).forEach((row, index) => {
 
-    // Create a string to return and populate the tbody
-    let strTbody = '';
-    tableArr.forEach((tableRow, index) => {
-      strTbody += tableRow.row.outerHTML;
-    });
-    tbody.innerHTML = strTbody;
+    let htmlStyles = window.getComputedStyle(document.querySelector('html'));
+    let lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
 
-    // Dispatch the sortable event
-    tableElement.dispatchEvent(sortedEvent);
-  }
+    if(lastColChild){
 
-  // Declare event handlers
-  tableElement.addEventListener('click', function(e){
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('[data-sortable]')) {
+      let responsiveWidth = lastColChild.offsetWidth/parseFloat(htmlStyles.fontSize);
+      responsiveWidth += 1.5;
+      largestWidth = largestWidth > responsiveWidth ? largestWidth : responsiveWidth;
+    }
 
-        // Get current sort order
-        let sort = target.getAttribute('aria-sort') == "ascending" ? "descending" : "ascending";
+    let rowHeight = row.offsetHeight/parseFloat(htmlStyles.fontSize);
+    row.style.setProperty("--row-height", `${rowHeight}rem`);
+  });
 
-        // unset sort attributes
-        Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
-          col.setAttribute('aria-sort','none');
-        });
+  return largestWidth;
+}
 
-        // Set the sort order attribute
-        target.setAttribute('aria-sort', sort);
+export const createMobileButton = (table) => {
 
-        // Save the sort options on the table element so that it can be re-sorted later
-        tableElement.setAttribute('data-sort', sort);
-        tableElement.setAttribute('data-sortBy', target.textContent);
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+    let firstCol = row.querySelector(':scope > :is(td,th):first-child');
+    let colContent = firstCol.textContent;
+    firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
+  });
+}
 
-        // Sort the table
-        sortTable(target.textContent, sort);
+export const addTableEventListeners = (table) => {
 
-        Array.from(tableElement.querySelectorAll('tr[draggable]')).forEach((tableRow, index) => {
+  table.addEventListener('click', (event) => {
 
-          tableRow.removeAttribute('draggable');
-        });
-        break;
-      }
-    }
-  }, false);
+    if (event && event.target instanceof HTMLElement && event.target.closest('tr > :is(td,th):first-child button')){
 
-  // On page load check if the table should be pre-sorted, if so trigger a click
-  if(tableElement.getAttribute('data-sortBy')){
+      let firstCol = event.target.closest('tr > :is(td,th):first-child button');
+      let tableRow = firstCol.parentNode.closest('tr');
 
-    let sort = tableElement.getAttribute('data-sort') == "ascending" ? "descending" : "ascending";
+      if(tableRow.getAttribute('data-view') == "full")
+        tableRow.setAttribute('data-view','default');
+      else
+        tableRow.setAttribute('data-view','full');
 
-    Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
-      if(col.textContent == tableElement.getAttribute('data-sortBy')){
-        col.setAttribute('aria-sort',sort)
-        col.click();
-      }
-    });
-  }
+      firstCol.blur();
+    };
+  });
+}
 
-  // #endregion Sortable
+// Filters
+export const createSearchDataList = (table, form) => {
 
-  // #region Filters
-  const createFilterForm = function(count){
+  let searchInput = form.querySelector('[data-search]');
 
-    // Create wrapper div
-    const form = document.createElement("div");
-    form.classList.add('table__filters');
-    form.classList.add('row');
-    form.classList.add('pt-1');
-    form.classList.add('pb-3');
+  if(!searchInput)
+    return false;
 
-    // Create the filter options array
-    const filterColumns = Array.from(tableElement.querySelectorAll('th[data-filterable]'));
+  const searchID = searchInput.getAttribute('id');
+  const searchableColumns = searchInput.getAttribute('data-search').split(',');
+  let inputWrapper = searchInput.parentNode;
 
-    // Populate a list of searchable terms from the cells of the columns that could be used as a filter
-    let searchableTerms = {};
-    filterColumns.forEach((columnHeading, index) => {
-      Array.from(tableElement.querySelectorAll('td[data-label="'+columnHeading.textContent+'"]')).forEach((label, index) => {
+  let searchableTerms = {};
+  searchableColumns.forEach((columnHeading, index) => {
 
-        searchableTerms[label.textContent] = label.textContent;
-      });
+    Array.from(table.querySelectorAll('td[data-label="'+columnHeading.trim()+'"]')).forEach((td, index) => {
+
+      if(td.querySelector('.td__content'))
+        searchableTerms[td.querySelector('.td__content').textContent] = td.querySelector('.td__content').textContent;
+      else
+        searchableTerms[td.textContent] = td.textContent;
     });
+  });
+
+  searchInput.setAttribute('list',`${searchID}_list`);
+  searchInput.setAttribute('autocomplete','off');
+
+  if(!inputWrapper.querySelector('datalist'))
+    inputWrapper.innerHTML += `<datalist id="${searchID}_list"></datalist>`;
+  
+  inputWrapper.querySelector('datalist').innerHTML = `${Object.keys(searchableTerms).map(term => `<option value="${term}"></option>`).join("")}`;
+}
+
+export const addFilterEventListeners = (table, form, pagination, wrapper, savedTableBody) => {
 
-    // Create the form
-    const filterTitle = filterColumns.length == 1 ? "Filter by "+filterColumns[0].textContent : "Filter"; // Update title if only one filter is chosen
-    const checkboxClass = filterColumns.length == 1 ? "d-none" : "d-sm-flex"; // Hide controls when only one filter is chosen
-
-    form.innerHTML = `<div class="col-sm-6 col-md-4 pb-3">
-  <div class="form-control__wrapper form-control-inline mb-0">
-    <label for="${randID}_filter" class="form-label">${filterTitle}:</label>
-    <input type="search" name="${randID}_filter" id="${randID}_filter" class="form-control form-control-sm" placeholder="" list="${randID}_list" />
-  </div>
-  <datalist id="${randID}_list">
-    ${Object.keys(searchableTerms).map(term => `<option value="${term}"></option>`).join("")}
-  </datalist>
-</div>
-<div class="col-md-8 align-items-center pb-3 ${checkboxClass}">
-  ${`<span class="pe-3 text-nowrap h5 mb-0">Filter by: </span>` + filterColumns.map(column => `<div class="form-check pe-3 mt-0 mb-0"><input class="form-check-input" type="checkbox" id="${randID}_${column.textContent.replace(' ','_').toLowerCase()}" checked="checked" /><label class="form-check-label text-nowrap" for="${randID}_${column.textContent.replace(' ','_').toLowerCase()}">${column.textContent}</label></div>`).join("")}
-</div>`;
-
-    // Add before the actual table
-    tableElement.prepend(form)
+  var timer;
+
+  // Check what conditions are set on the table to see what the form actions are
+  let formSubmit = function(){
+      
+    if(form.hasAttribute('data-ajax'))
+      loadAjaxTable(table, form, pagination,wrapper);
+    else if(form.hasAttribute('data-submit'))
+      form.submit();
+    else {
+      filterTable(table, form, wrapper);
+      createPaginationButttons(wrapper,pagination);
+    }
   }
 
-  const filterTable = function(searchTerm){
+  form.addEventListener('keyup', (event) => {
 
-    // Create an array of rows that match the search term
-    let tableArr = [];
-    Array.from(storedData.querySelectorAll('tr')).forEach((tableRow, index) => {
+    clearTimeout(timer);
 
-      // We want one long search string per row including each filterable table cell
-      let rowSearchString = '';
-      Array.from(tableElement.querySelectorAll('[type="checkbox"]:checked + label')).forEach((label, index) => {
-        rowSearchString += tableRow.querySelector('td[data-label="'+label.textContent+'"]').textContent+' | ';
-      });
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
 
-      // Check if the table row search string contains the search term
-      if(rowSearchString.indexOf(searchTerm) >= 0){
+      timer = setTimeout(function(){
+        formSubmit();
+      }, 500);
+    };
+  });
 
-        const dataRow = { row: tableRow }
-        tableArr.push(dataRow);
-      }
-    });
+  form.addEventListener('change', (event) => {
 
-    // Create a string to return and populate the tbody
-    let strTbody = '';
-    tableArr.forEach((tableRow, index) => {
-      strTbody += tableRow.row.outerHTML;
-    });
-    tbody.innerHTML = strTbody;
+    clearTimeout(timer);
+    
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')){
+      
+      if(!form.hasAttribute('data-submit'))
+        sortTable(table, form, savedTableBody);
 
-    // Dispatch the filter event.
-    tableElement.dispatchEvent(filteredEvent);
-  }
+      formSubmit();
+    }
 
-  const createFilterList = function(){
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-search]')){
+        
+      formSubmit();
+    }
 
-    // Check which options are checked
-    let filterOptions = [];
-    Array.from(tableElement.querySelectorAll('[type="checkbox"]:checked + label')).forEach((label, index) => {
-      filterOptions.push(label.textContent);
-    });
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter]') && !event.target.closest('form dialog')){
+      
+      formSubmit();
+    }
 
-    // Build up the list of searchable terms
-    let searchableTerms = [];
-    filterOptions.forEach((option, index) => {
-      Array.from(tableElement.querySelectorAll('td[data-label="'+option+'"]')).forEach((label, index) => {
-        searchableTerms[label.textContent] = label.textContent;
-      });
-    });
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
+        
+      formSubmit();
+    }
+  });
 
-    // Rebuild the list
-    let dataList = tableElement.querySelector('datalist');
-    dataList.innerHTML = Object.keys(searchableTerms).map(term => `<option value="${term}"></option>`).join("");
-  }
 
-  // On page load check if filters are needed
-  if(Array.from(tableElement.querySelectorAll('[data-filterable]')).length){
+  form.addEventListener('click', (event) => {
 
-    // Create the filter options
-    createFilterForm(tableElement,Array.from(tableElement.querySelectorAll('[data-filterable]')).length);
+    clearTimeout(timer);
+    
+    if (event && event.target instanceof HTMLElement && event.target.closest('dialog button:not([type="button"])')){
+      
+      let button = event.target.closest('dialog button:not([type="button"])');
+      let modal = button.closest('dialog');
 
-    // Add event handlers for the filter options
-    tableElement.addEventListener('keyup', function(e){
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('input[type="search"]')) {
+      modal.close();
+    }
 
-          const searchTerm = target.value;
-          filterTable(searchTerm)
-        }
-      }
-    });
+    // Prevent the form from submitting
+    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__close')){
+      
+      event.preventDefault();
+      event.stopPropagation();
+    }
 
-    tableElement.addEventListener('change', function(e){
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('input[type="search"]')) {
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-clear]')){
+      
+      form.reset();
 
-          const searchTerm = target.value;
-          filterTable(searchTerm)
-        }
-      }
-    });
+      if(!form.hasAttribute('data-submit'))
+        sortTable(table, form, savedTableBody);
 
-    tableElement.addEventListener('change', function(e){
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('input[type="checkbox"]')) {
+      formSubmit();
+    }
+  });
 
-          const searchTerm = tableElement.querySelector('input[type="search"]').value;
-          filterTable(searchTerm)
-          createFilterList()
-        }
-      }
-    });
+  form.addEventListener('submit', (event) => {
+
+    clearTimeout(timer);
+
+    if(!form.hasAttribute('data-submit'))
+      event.preventDefault();
+
+    formSubmit();
+  });
+}
+
+export const sortTable = (table, form, savedTableBody) => {
+
+  if(form.getAttribute('data-ajax')){
+    return false;
+  }
+
+  let tbody = table.querySelector('tbody');
+  let select = form.querySelector('[data-sort]');
+  let selectedOption = select.querySelector(`option:nth-child(${select.selectedIndex + 1})`);
+
+  let sortBy = selectedOption.getAttribute('data-sort');
+  let order = selectedOption.getAttribute('data-order');
+  let format = selectedOption.getAttribute('data-format');
+
+  if(!sortBy){
+    
+    tbody.innerHTML = savedTableBody.innerHTML;
+    addDataAttributes(table);
+    return false;
+  }
+
+  let orderArray = [];
+  if(!['asc','desc','descending'].includes(order)){
+    orderArray = order.split(',');
   }
-  // #endregion Filters
 
-  // #region Pagination
-  const paginateRows = function(show, page){
+  // Create an array from the table rows, the index created is then used to sort the array
+  let tableArr = [];
+  Array.from(tbody.querySelectorAll('tr')).forEach((tableRow, index) => {
 
-    // Create some inline CSS to control what is viewed on the table, unline the filters we are just hiding the rable rows not removing them from the DOM.
-    let style = document.getElementById(randID+'_style');
+    let rowIndex = tableRow.querySelector('td[data-label="'+sortBy+'"], th[data-label="'+sortBy+'"]').textContent.trim();
 
-    if(style == null){
-      style = document.createElement("style");
-      style.setAttribute('id',randID+'_style')
+    // If a predefined order set replace the search term with an ordered numeric value so it can be sorted
+    if(orderArray.length && orderArray.includes(rowIndex)){
+      rowIndex = orderArray.indexOf(rowIndex);
     }
 
-    const startShowing = (show*(page-1))+1;
-    const stopShowing = show*(page);
+    if(isNumeric(rowIndex))
+      rowIndex = zeroPad(rowIndex,10)
+
+    // If the sort format is date then lets transform the index to a sortable date (this is never displayed)
+    if(format && format == "date")
+      rowIndex = new Date(rowIndex);
+    
+    const dataRow = {
+      index: rowIndex,
+      row: tableRow
+    }
+    tableArr.push(dataRow);
+  });
+
+  // Sort array alphabetically
+  tableArr.sort((a, b) => (a.index > b.index) ? 1 : -1)
+
+  // Reverse if descending
+  if(order == "descending" || order == "desc")
+    tableArr = tableArr.reverse();
+
+  // Create a string to return and populate the tbody
+  let strTbody = '';
+  tableArr.forEach((tableRow, index) => {
+    strTbody += tableRow.row.outerHTML;
+  });
+  tbody.innerHTML = strTbody;
+}
+
+export const filterTable = (table, form, wrapper) => {
 
-    style.innerHTML = `
-    #${randID} tbody tr {
-      display: none;
+  table.classList.remove('table--filtered');
+
+  let filters = [];
+  let searches = [];
+  let matched = 0;
+  let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
+  let showRows = form.querySelector('[data-show]') ? parseInt(form.querySelector('[data-show]').value) : 15;
+
+  // Filter
+  let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
+
+  filterInputs.forEach((filterInput, index) => {
+
+    // Ignore uncked radio inputs
+    if(filterInput.type == 'radio' && !filterInput.checked){
+      return;
     }
-    #${randID} tbody tr:nth-child(${startShowing}),
-    #${randID} tbody tr:nth-child(${startShowing}) ~ tr{
-      display: block;
+
+    if(filterInput.type == 'checkbox' && !filterInput.checked){
+      return;
     }
-    @media screen and (min-width: 36em) {
-      #${randID} tbody tr:nth-child(${startShowing}),
-      #${randID} tbody tr:nth-child(${startShowing}) ~ tr{
-        display: table-row;
+
+
+    if(filterInput.getAttribute('data-filter') == "multi"){
+
+      for (const [key, value] of Object.entries(JSON.parse(filterInput.value))) {
+        filters[filterInput.getAttribute('data-filter')].push(value);
       }
     }
-    #${randID} tbody tr:nth-child(${stopShowing}) ~ tr{
-      display: none;
+    else if (filterInput.value) {
+
+      if(!filters[filterInput.getAttribute('data-filter')])
+        filters[filterInput.getAttribute('data-filter')] = new Array();
+
+      filters[filterInput.getAttribute('data-filter')].push(filterInput.value);
     }
-    `;
 
-    tableElement.append(style);
+  });
+
+
+  // Add search columns too
+  if(form.querySelector('[data-search]')){
+    let searchInput = form.querySelector('[data-search]');
+    let searchColumns = form.querySelector('[data-search]').getAttribute('data-search').split(',');
+
+    searchColumns.forEach((column, index) => {
+
+      searches.push({'column':`${column.trim()}`,'value':`${searchInput.value}`});
+    });
   }
 
-  // On page load check if the table should be paginated
-  if(tableElement.getAttribute('data-show')){
+  //Display the filter count
+  Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
+    element.innerHTML = '';
+  });
+  if(filters.length) {
+      
+    Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
+      element.innerHTML += `(${filters.length})`;
+    });
+  }
 
-    const show = parseInt(tableElement.getAttribute('data-show'));
-    const page = parseInt(tableElement.getAttribute('data-page')) ? parseInt(tableElement.getAttribute('data-page')) : 1;
-    const totalRows = tableElement.querySelectorAll('tbody tr').length;
+  // Stop function if no filters identified
+  if(!searches.length && !filters.length)
+    return false;
+  
+  table.classList.add('table--filtered');
+
+  // Reset
+  Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+    row.classList.remove('filtered');
+    row.classList.remove('filtered--matched');
+    row.classList.remove('filtered--show');
+    
+    row.removeAttribute('data-filtered-by');
+  });
+
+  // Filter the table
+
+  for (const [key, filterValue] of Object.entries(filters)) {
+    
+    console.log(filterValue)
+    Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
+
+      let isMatched = false;
+      filterValue.forEach((filter, index) => {
+
+        let filterTd = row.querySelector(`[data-label="${key}"]`)
+
+        // Dynamic values
+        if(filter && filter == "$today")
+          filter = formatCell('date', new Date());
+        else if(filter && filter == "$yesterday"){
+
+          let yesterday = new Date();
+          yesterday.setDate(yesterday.getDate() - 1);
+          filter = formatCell('date', yesterday);
+        }
+        else if(filter && (filter == "$thisWeek" || filter == "$lastWeek")){
 
-    if(show < totalRows){
-      paginateRows(show,page);
-      createPaginationForm(randID,tableElement,show,page,totalRows);
-      createPaginationButttons(randID,tableElement,show,page,totalRows);
+          let today = new Date();
+          let mondayThisWeek = new Date(today.setDate(today.getDate() - (today.getDay()-1)));
+          let sundayThisWeek = new Date(today.setDate(today.getDate() - today.getDay() + 7));
+          let checkDate = new Date(filterTd.textContent.toLowerCase());
 
-      tableElement.addEventListener('change', function(e){
-        for (var target = e.target; target && target != this; target = target.parentNode) {
-          if (target.matches('.table__pagination input[type="number"]')) {
+          today.setHours(0, 0, 0, 0);
+          mondayThisWeek.setHours(0, 0, 0, 0);
+          sundayThisWeek.setHours(0, 0, 0, 0);
+          checkDate.setHours(0, 0, 0, 0);
 
-            paginateRows(target.value,page);
-            createPaginationButttons(randID,tableElement,target.value,page,totalRows);
-            tableElement.setAttribute('data-show',target.value)
+          if(filter == "$thisWeek"){
+            isMatched = (checkDate >= mondayThisWeek && checkDate <= sundayThisWeek);
           }
-        }
-      });
+          else {
+            let mondayLastWeek = new Date(mondayThisWeek.setDate(mondayThisWeek.getDate() - 7));
+            let sundayLastWeek = new Date(sundayThisWeek.setDate(sundayThisWeek.getDate() - 7));
 
-      tableElement.addEventListener('click', function(e){
-        for (var target = e.target; target && target != this; target = target.parentNode) {
-          if (target.matches('.page-item:not(.active):not(.disabled) .page-link')) {
+            mondayLastWeek.setHours(0, 0, 0, 0);
+            sundayLastWeek.setHours(0, 0, 0, 0);
 
-            paginateRows(tableElement.getAttribute('data-show'),target.getAttribute('data-page'));
-            createPaginationButttons(randID,tableElement,tableElement.getAttribute('data-show'),target.getAttribute('data-page'),totalRows);
+            isMatched = (checkDate >= mondayLastWeek && checkDate <= sundayLastWeek);
           }
         }
-      }, false);
+        else if(filter && filter == "$thisMonth"){
 
-      tableElement.addEventListener('change', function(e){
-        for (var target = e.target; target && target != this; target = target.parentNode) {
-          if (target.matches('.table__pagination select')) {
+          let today = new Date(), year = today.getFullYear(), month = today.getMonth();
 
-            paginateRows(tableElement.getAttribute('data-show'),target.value);
-            createPaginationButttons(randID,tableElement,tableElement.getAttribute('data-show'),target.value,totalRows);
-          }
+          var firstDayMonth = new Date(year, month, 1);
+          var lastDayMonth = new Date(year, month + 1, 0);
+          let checkDate = new Date(filterTd.textContent.toLowerCase());
+
+          firstDayMonth.setHours(0, 0, 0, 0);
+          lastDayMonth.setHours(0, 0, 0, 0);
+          checkDate.setHours(0, 0, 0, 0);
+
+          isMatched = (checkDate >= firstDayMonth && checkDate <= lastDayMonth);
         }
-      });
-    }
-  }
-  // #endregion Pagination
-
-  // #region Reorderable
-  // Set the row thats being dragged and copy the row
-  function setDraggedRow(e) {
-    e.dataTransfer.setData("text/plain", e.target.id);
-    draggedRow = e.target;
-    e.target.classList.add('tr--dragging');
-  }
+        else if(filter && filter == "$lastMonth"){
 
-  // Create the order column and event handler for rows
-  const setReorderRows = function(){
+          let today = new Date(), year = today.getFullYear(), month = today.getMonth();
 
-    Array.from(tbody.querySelectorAll('tr')).forEach((tableRow, index) => {
+          var firstDayLastMonth = new Date(year, month - 1, 1);
+          var lastDayLastMonth = new Date(year, month, 0);
+          let checkDate = new Date(filterTd.textContent.toLowerCase());
 
-      // Create column if not already created
-      if(tableRow.querySelector('[data-label="Order"]') == null){
+          firstDayLastMonth.setHours(0, 0, 0, 0);
+          lastDayLastMonth.setHours(0, 0, 0, 0);
+          checkDate.setHours(0, 0, 0, 0);
 
-        const orderColumn = document.createElement('th');
-        orderColumn.innerHTML = index + 1;
-        orderColumn.setAttribute('data-label','Order');
-        tableRow.prepend(orderColumn);
-      }
+          isMatched = (checkDate >= firstDayLastMonth && checkDate <= lastDayLastMonth);
+        }
+        
+        if(filterTd && filterTd.textContent.toLowerCase().includes(filter.toLowerCase())){
+          isMatched = true;
+        }
 
-      // Make draggable
-      tableRow.setAttribute('id',randID+'_row_'+(index+1));
-      tableRow.setAttribute('data-order',index+1);
-      tableRow.setAttribute('draggable','true');
-      tableRow.addEventListener("dragstart", setDraggedRow);
-    });
-  }
+      });
 
-  if(tableElement.getAttribute('data-reorder') && tableElement.getAttribute('data-reorder') != "false"){
+      if(!isMatched){
 
-    // Add column heading
-    const orderHeading = document.createElement('th');
-    orderHeading.innerHTML = 'Order';
-    orderHeading.title = 'Click here to enable re-ordering via drag and drop';
-    orderHeading.classList.add('table-order-reset');
-    thead.querySelector('tr').prepend(orderHeading);
+        row.classList.add('filtered');
+        row.setAttribute('data-filtered-by',key)
+      }
+    
+    });
+  }
+  // Search whats left of the table after filtering
+  Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
+    
+    let isSearched = searches.length > 0 && searches[0].value.length >= 3 ? false : true;
+      
+    searches.forEach((search, index) => {
 
-    setReorderRows();
+      let searchTd = row.querySelector(`[data-label="${search.column}"]`);
 
-    // Reset order button
-    tableElement.addEventListener('click', function(e){
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('.table-order-reset')) {
+      if(searchTd && search.value.length >= 3 && searchTd.textContent.toLowerCase().includes(search.value.toLowerCase())){
+        isSearched = true;
+      }
 
-          // unset sort attributes
-          Array.from(tableElement.querySelectorAll('[data-sortable]')).forEach((col, index) => {
-            col.setAttribute('aria-sort','none');
-          });
+    });
 
-          // Save the sort options on the table element so that it can be re-sorted later
-          tableElement.removeAttribute('data-sort');
-          tableElement.removeAttribute('data-sortBy');
+    if(!isSearched)
+      row.classList.add('filtered');
+  });
 
-          // Sort the table
-          sortTable('Order', 'ascending');
+  // Work out what to display after pagination
+  Array.from(table.querySelectorAll('tbody tr:not(.filtered')).forEach((row, index) => {
 
-          Array.from(tableElement.querySelectorAll('tbody tr')).forEach((tableRow, index) => {
+    matched++;
 
-            tableRow.setAttribute('draggable','true');
-          });
+    row.classList.add('filtered--matched');
+    // pagination bit 
+    if(Math.ceil(matched/showRows) == parseInt(page))
+      row.classList.add('filtered--show');
+  });
 
-          break;
-        }
-      }
-    }, false);
+  if(wrapper){
+    wrapper.setAttribute('data-page',page);
+    wrapper.setAttribute('data-pages',Math.ceil(matched/showRows));
+    wrapper.setAttribute('data-total',matched);
+    wrapper.setAttribute('data-show',showRows);
+  }
 
+  populateDataQueries(table,form);
+}
 
-    document.addEventListener("dragover", function( e ) {
-      // prevent default to allow drop
-      e.preventDefault();
-    }, false);
+export const populateDataQueries = (table,form) => {
 
-    document.addEventListener("dragenter", function( e ) {
-      // prevent default to allow drop
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
+  const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
 
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-reorder] tbody tr')) {
+  dataQueries.forEach((queryElement, index) => {
 
-          target.classList.add('tr--dropable')
-        }
-      }
-    }, false);
+    let query = queryElement.getAttribute('data-query');
+    let numberOfMatchedRows: 0;
 
-    document.addEventListener("dragleave", function( e ) {
-      // prevent default to allow drop
-      e.preventDefault();
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-reorder] tbody tr')) {
+    if(query == 'total'){
+      numberOfMatchedRows = table.classList.contains('table--filtered') ? table.querySelectorAll('tbody tr:not(.filtered)').length : table.querySelectorAll('tbody tr').length;
+    }
+    else if(!query.includes(' == ') && query.includes(' & ')){
 
-          target.classList.remove('tr--dropable')
-        }
-      }
-    }, false);
+      let queries = query.split(' & ');
+      let selector = '';
 
-    document.addEventListener("drop", function(e) {
+      queries.forEach(element => {
+        selector += `:not([data-filtered-by="${element}"])`;
+      });
 
-      e.preventDefault();
+      console.log(selector)
+      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr${selector}`)).length;
+    }
+    else if(!query.includes(' == ')){
 
-      for (var target = e.target; target && target != this; target = target.parentNode) {
-        if (target.matches('[data-reorder] tbody tr')) {
+      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not([data-filtered-by="${query}"])`)).length;
+    }
+    else if(query.includes(' && ')){
 
-          if(target.parentNode != null && draggedRow.parentNode != null && target != draggedRow){
+      let queries = query.split(' && ');
 
-            draggedRow.parentNode.removeChild( draggedRow );
+      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr:not(.filtered)`)).filter(function(row){
 
-            if(draggedRow.getAttribute('data-order') > target.getAttribute('data-order'))
-              target.parentNode.insertBefore(draggedRow, target);
-            else
-              target.parentNode.insertBefore(draggedRow, target.nextElementSibling);
+        let matched = true;
 
-            // Re label the rows
-            Array.from(tbody.querySelectorAll('tr')).forEach((tableRowOrder, index) => {
-              tableRowOrder.classList.remove('tr--dragging')
-              tableRowOrder.classList.remove('tr--dropable')
-              tableRowOrder.querySelector('th').innerHTML = index + 1;
-              tableRowOrder.setAttribute('data-order',index+1);
-            });
+        for (const [index, value] of Object.entries(queries)) {
+          
+          let queryParts = value.split(' == ');
 
-            tableElement.dispatchEvent(reorderedEvent);
-          }
-          break;
+          if(!row.querySelector(`td[data-label="${queryParts[0]}"]`) || row.querySelector(`td[data-label="${queryParts[0]}"]`).textContent != `${queryParts[1]}`)
+            matched = false;
         }
-      }
-    }, false);
 
-  }
-  // #endregion Reorderable
+        return matched;
+
+      }).length;
+    }
+    else {
 
-  // Watch for the filterable event and re-sort the tbody
-  tableElement.addEventListener('filtered', function (e) {
+      let queryParts = query.split(' == ');
+      console.log(queryParts[0]);
+      numberOfMatchedRows = Array.from(table.querySelectorAll(`tbody tr.filtered--matched td[data-label="${queryParts[0]}"], tbody tr[data-filtered-by="${queryParts[0]}"] td[data-label="${queryParts[0]}"]`)).filter(function(element){
+        return element.textContent === queryParts[1];
+      }).length;
+    }
 
-    if(tableElement.getAttribute('data-sortBy') && tableElement.getAttribute('data-sort'))
-      sortTable(tableElement.getAttribute('data-sortBy'), tableElement.getAttribute('data-sort'));
+    if(queryElement.hasAttribute('data-total'))
+      queryElement.setAttribute('data-total', numberOfMatchedRows);
+    else
+      queryElement.innerHTML = numberOfMatchedRows;
+  });
+}
 
-    if(tableElement.getAttribute('data-show')){
+// Pagination
+export const addPaginationEventListeners = function(table, form, pagination, wrapper){
 
-      const show = parseInt(tableElement.getAttribute('data-show'));
-      const totalRows = tableElement.querySelectorAll('tbody tr').length;
-      const tablePagination = tableElement.querySelector('.table__pagination');
+  pagination.addEventListener('click', (event) => {
 
-      if(tablePagination != null)
-        tablePagination.remove();
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-page]')){
+      
+      event.preventDefault();
 
-      if(show < totalRows){
+      let paginationInput = form.querySelector('[data-pagination]');
+      let newPage = event.target.closest('[data-page]').getAttribute('data-page');
+      paginationInput.value = newPage;
+      wrapper.setAttribute('data-page', newPage);
+      form.dispatchEvent(new Event("submit"));
 
-        paginateRows(show,1);
-        createPaginationForm(randID,tableElement,show,1,totalRows);
-        createPaginationButttons(randID,tableElement,show,1,totalRows);
-      }
+      const url = new URL(location);
+      url.searchParams.set("page", newPage);
+      history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
     }
 
-    if(tableElement.getAttribute('data-reorder')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){
 
-      setReorderRows();
+      event.preventDefault();
+      let showInput = form.querySelector('[data-show]');
+      let showRows = event.target.closest('[data-show]').getAttribute('data-show');
+      showInput.value = showRows;
+      wrapper.setAttribute('data-show', showRows);
+      form.dispatchEvent(new Event("submit"));
     }
-  }, false);
+  });
+}
 
-  tableElement.addEventListener('sorted', function (e) {
+// Export CSV Data
+export const addExportEventListeners = (button, table) => {
 
-    if(tableElement.getAttribute('data-reorder')){
+  if(!button)
+    return false;
 
-      setReorderRows();
-    }
-  }, false);
+  button.addEventListener('click', (event) => {
+    exportAsCSV(table);
+  });
+}
+
+export const exportAsCSV = function(table){
+
+  var csvData = [];
+  // Get each row data
+  var rows = table.getElementsByTagName('tr');
+  for (var i = 0; i < rows.length; i++) {
 
-  tableElement.addEventListener('populated', function (e) {
+    // Get each column data
+    var cols = rows[i].querySelectorAll('td,th');
 
-    var tableFilter = tableElement.querySelector('.table__filters')
-    tableFilter.remove();
+    // Stores each csv row data
+    var csvRow = [];
+    for (var j = 0; j < cols.length; j++) {
 
-    var tablePagination = tableElement.querySelector('.table__pagination')
-    tablePagination.remove();
+      // Get the text data of each cell of a row and push it to csvrow
+      csvRow.push(`"${cols[j].textContent}"`);
+    }
 
-    var newTable = tableElement.cloneNode(true);
-    tableElement.parentNode.replaceChild(newTable, tableElement);
+    // Combine each column value with comma
+    csvData.push(csvRow.join(","));
+  }
 
-    table(newTable);
-  }, false);
+  // Combine each row data with new line character
+  csvData = csvData.join('\n');
+  
+  // Create CSV file object and feed our csvData into it
+  let CSVFile = new Blob([csvData], {
+    type: "text/csv"
+  });
+
+  // Create to temporary link to initiate download process
+  var tempLink = document.createElement('a');
+  tempLink.download = "export.csv";
+  var url = window.URL.createObjectURL(CSVFile);
+  tempLink.href = url;
+
+  // This link should not be displayed
+  tempLink.style.display = "none";
+  document.body.appendChild(tempLink);
+
+  // Automatically click the link to trigger download
+  tempLink.click();
+  document.body.removeChild(tempLink);
 }
 
-export const createPaginationForm = function(randID,tableElement,show,page,totalRows){
-
-  const form = document.createElement("div");
-  form.classList.add('table__pagination');
-  form.classList.add('row');
-  form.classList.add('pt-3');
-  form.classList.add('pb-3');
-
-  // Create the form and create a container div to hold the pagination buttons
-  form.innerHTML = `<div class="col mw-fit-content mb-3">
-<div class="form-control__wrapper form-control-inline mb-0">
-  <label for="${randID}_showing" class="form-label">Showing:</label>
-  <input type="number" name="${randID}_showing" id="${randID}_showing" class="form-control form-control-sm showing-input-field" placeholder="" list="${randID}_pagination" value="${show}" min="1" max="${totalRows}" />
-</div>
-<datalist id="${randID}_pagination">
-<option value="5">5</option>
-${totalRows > 10 ? `<option value="10">10</option>` : ''}
-${totalRows > 20 ? `<option value="20">20</option>` : ''}
-<option value="${totalRows}">${totalRows}</option>
-</datalist>
-</div>
-<div class="col mw-fit-content me-auto d-flex align-items-center mb-3"><span class="label">per page</span></div>
-<div class="col mw-fit-content d-sm-flex justify-content-end align-items-center" id="${randID}_paginationBtns"></div>`;
-
-  // Add after the actual table
-  tableElement.append(form)
+// After table is loaded
+export const makeTableFunctional = function(table, form, pagination, wrapper){
+
+  createMobileButton(table);
+  addDataAttributes(table);
+  populateDataQueries(table, form);
+  
+  // Work out the largest width of the CTA's in the last column
+  if(wrapper && wrapper.classList.contains('table--cta')){
+
+    const largestWidth = getLargestLastColWidth(table);
+    wrapper.style.setProperty("--cta-width", `${largestWidth}rem`);
+  }
 }
 
-export const createPaginationButttons = function(randID,tableElement,show,page,totalRows){
+export const loadAjaxTable = function (table, form, pagination, wrapper){
 
-  const paginationButtonsWrapper = document.getElementById(randID+'_paginationBtns')
+  const resolvePath = (object, path, defaultValue) => path.split(/[\.\[\]\'\"]/).filter(p => p).reduce((o, p) => o ? o[p] : defaultValue, object);
 
-  if(paginationButtonsWrapper == null)
-    return false;
+  let queryString = new URLSearchParams(new FormData(form)).toString();
+  let columns = table.querySelectorAll('thead tr th');
+  let tbody = table.querySelector('tbody');
 
-  const numberPages = Math.ceil(totalRows / show)
+  fetch(form.getAttribute('data-ajax'), {
+    method: 'get',
+    credentials: 'same-origin',
+    headers: new Headers({
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      'X-Requested-With': 'XMLHttpRequest'
+    })
+  }).then((response) => response.json()).then((response) => {
 
-  if(numberPages == 1){ // Remore the buttons or dont display any if we dont need them
-    paginationButtonsWrapper.innerHTML = '';
-  }
-  else if(numberPages < 5){ // If less than 5 pages (which fits comfortably on mobile) we display buttons
+    if (response.data) {
 
-    let strButtons = '';
+      tbody.innerHTML = '';
 
-    for (let i = 1; i <= numberPages; i++) {
+      response.data.forEach((row, index) => {
 
-      if(i == page)
-        strButtons += `<li class="page-item active" aria-current="page"><span class="page-link">${i}</span></li>`;
-      else
-        strButtons += `<li class="page-item"><button class="page-link" data-page="${i}">${i}</button></li>`;
-    }
+        var table_row = document.createElement('tr');
 
-    paginationButtonsWrapper.innerHTML = `<span class="pe-2 mb-3">Page: </span><ul class="pagination mb-3">
-      ${page == 1 ? `<li class="page-item disabled"><span class="page-link">Previous</span></li>` : `<li class="page-item"><button class="page-link" data-page="${parseInt(page)-1}">Previous</button></li>`}
-      ${strButtons}
-      ${page == numberPages ? `<li class="page-item disabled"><span class="page-link">Next</span></li>` : `<li class="page-item"><button class="page-link" data-page="${parseInt(page)+1}">Next</button></li>`}
-    </ul>`;
+        columns.forEach((col, index) => {
 
-  }
-  else { // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
+          let cellOutput = '';
+          var table_cell  = document.createElement('td');
+          // Add some data to help with the mobile layout design
+          table_cell.setAttribute('data-label',col.innerText);
 
-    let strOptions = '';
+          if(col.getAttribute('data-output')){
+            var cellTemplate = col.getAttribute('data-output');
+            // Use a regex to replace {var} with actual values from the json data
+            cellOutput = cellTemplate.replace( new RegExp(/{(.*?)}/,"gm"), function(matched){ return resolvePath(row, matched.replace('{','').replace('}','')); });
+          }
 
-    for (let i = 1; i <= numberPages; i++) {
+          if(col.hasAttribute('data-format')){
+            cellOutput = formatCell(col.getAttribute('data-format'),cellOutput);
+          }
 
-      if(i == page)
-        strOptions += `<option value="${i}" selected>Page ${i}</option>`;
-      else
-        strOptions += `<option value="${i}">Page ${i}</option>`;
+          table_cell.innerHTML = cellOutput;
+          table_row.appendChild(table_cell)
+        });
+
+        tbody.appendChild(table_row)
+          
+      });
+
+      createSearchDataList(table, form)
+      // Add data to the pagination 
+      makeTableFunctional(table, form, pagination, wrapper);
+
+      wrapper.setAttribute('data-total', (response.meta.total ? response.meta.total : 1));
+      wrapper.setAttribute('data-page', (response.meta.current_page ? response.meta.current_page : 1));
+      wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
+
+      createPaginationButttons(wrapper, pagination);
+
+      if(response.data.length == 0){
+        tbody.innerHTML = '<tr><td colspan="100%"><span class="h4 m-0">No results found</span></td></tr>';
+      }
+      
+    }
+    else {
+      tbody.innerHTML = '<tr><td colspan="100%"><span class="h6 m-0">Error loading table</span></td></tr>';
     }
 
-    paginationButtonsWrapper.innerHTML = `
-<div class="form-control__wrapper page-number mb-2">
-<select class="form-select">
-${strOptions}
-</select>
-</div>
-    `;
-  }
+  });
 }
 
-export default table
+export const formatCell = (format, cellOutput) => {
+
+  switch (format) {
+    case 'date':
+      cellOutput = new Date(cellOutput).toLocaleDateString('en-gb', { year:"2-digit", month:"long", day: "numeric"});
+    break;
+    case 'capitalise':
+      cellOutput = ucfirst(cellOutput);
+    break;
+  }
+  
+  return cellOutput;
+}