@iamproperty/components 7.2.0 → 7.2.1--beta1

package/assets/js/modules/table.js

@@ -7,8 +7,184 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { zeroPad, isNumeric, ucfirst, resolvePath } from './helpers.js';
-// Basic functionality needed
+import { zeroPad, isNumeric, ucfirst, resolvePath, uniqueID } from './helpers.js';
+// #region Helpers
+export const formatCell = (format, cellOutput) => {
+    switch (format) {
+        case 'datetime':
+            return (new Date(cellOutput).toLocaleDateString('en-gb', {
+                weekday: 'short',
+                year: '2-digit',
+                month: 'long',
+                day: 'numeric',
+            }) +
+                ' ' +
+                new Date(cellOutput).toLocaleTimeString('en-gb', { hour: '2-digit', minute: '2-digit' }));
+        case 'date':
+            return new Date(cellOutput).toLocaleDateString('en-gb', {
+                day: 'numeric',
+                month: 'long',
+                year: '2-digit',
+            });
+        case 'capitalise':
+            return (cellOutput = ucfirst(cellOutput));
+    }
+};
+const filterFilters = function (form) {
+    const filters = new Object();
+    // Filter
+    const filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
+    filterInputs.forEach((filterInput) => {
+        // Ignore uncked radio inputs
+        if (filterInput.type == 'radio' && !filterInput.checked) {
+            return;
+        }
+        if (filterInput.type == 'checkbox' && !filterInput.checked) {
+            return;
+        }
+        if (filterInput && filterInput.value) {
+            const dataFilter = filterInput.getAttribute('data-filter');
+            let filterValue = filterInput.value;
+            if (filterInput.hasAttribute('data-date-from'))
+                filterValue += '-date-from';
+            if (filterInput.hasAttribute('data-date-to'))
+                filterValue += '-date-to';
+            if (!filters[dataFilter])
+                filters[dataFilter] = [];
+            filters[dataFilter].push(filterValue);
+        }
+    });
+    return filters;
+};
+export const moveAttributesToComponents = (component) => {
+    let form = document.createElement('form');
+    if (component.hasAttribute('data-filterby')) {
+        form = document.querySelector(`#${component.getAttribute('data-filterby')}`);
+    }
+    else if (component.closest('form')) {
+        form = component.closest('form');
+    }
+    else {
+        table.parentNode.insertBefore(form, table.nextSibling);
+    }
+    if (form.hasAttribute('data-ajax'))
+        component.setAttribute('data-ajax', form.getAttribute('data-ajax'));
+    if (form.hasAttribute('data-schema'))
+        component.setAttribute('data-schema', form.getAttribute('data-schema'));
+};
+export const paginateTable = (component, table, form, pagination, callback) => {
+    if (!form.querySelector('[name=show]'))
+        form.insertAdjacentHTML('beforeend', `<input name="show" type="hidden" value="${component.getAttribute('data-show')}" />`);
+    if (!form.querySelector('[name=page]'))
+        form.insertAdjacentHTML('beforeend', `<input name="page" type="hidden" value="${component.getAttribute('data-page')}" />`);
+    pagination.addEventListener('update-show', (event) => {
+        if (form.querySelector('[name=show]').value != event.detail.show) {
+            form.querySelector('[name=show]').value = event.detail.show;
+            const updateEvent = new CustomEvent('update-show', { detail: { show: event.detail.show } });
+            component.dispatchEvent(updateEvent);
+            updateAttributes(component, pagination);
+            callback();
+        }
+    });
+    pagination.addEventListener('update-page', (event) => {
+        if (form.querySelector('[name=page]').value != event.detail.page) {
+            form.querySelector('[name=page]').value = event.detail.page;
+            const updateEvent = new CustomEvent('update-page', { detail: { page: event.detail.page } });
+            component.dispatchEvent(updateEvent);
+            updateAttributes(component, pagination);
+            callback();
+            // scroll back to the top of the table
+            if (!component.hasAttribute('data-no-scroll')) {
+                const yOffset = -250;
+                const y = table.getBoundingClientRect().top + window.pageYOffset + yOffset;
+                window.scrollTo({ top: y, behavior: 'smooth' });
+            }
+        }
+    });
+};
+export const findForm = (component, table) => {
+    let form = document.createElement('form');
+    if (component.hasAttribute('data-filterby')) {
+        form = document.querySelector(`#${component.getAttribute('data-filterby')}`);
+    }
+    else if (component.closest('form')) {
+        form = component.closest('form');
+    }
+    else {
+        table.parentNode.insertBefore(form, table.nextSibling);
+    }
+    return form;
+};
+// #endregion
+export const setupBasicTable = (component, table, form, pagination) => {
+    const tableWrapper = component.shadowRoot.querySelector('.table__wrapper');
+    if (!component.hasAttribute('data-total'))
+        component.setAttribute('data-total', component.querySelectorAll('tbody tr').length);
+    if (!component.hasAttribute('data-page'))
+        component.setAttribute('data-page', 1);
+    if (!component.hasAttribute('data-show'))
+        component.setAttribute('data-show', 5);
+    if (!component.hasAttribute('data-increment'))
+        component.setAttribute('data-increment', component.getAttribute('data-show'));
+    transferAttributes(component, pagination);
+    addDataAttributes(table);
+    createMobileButton(component, table);
+    // Max height
+    if (component.classList.contains('mh-sm'))
+        tableWrapper.classList.add('mh-sm');
+    if (component.classList.contains('mh-md'))
+        tableWrapper.classList.add('mh-md');
+    if (component.classList.contains('mh-lg'))
+        tableWrapper.classList.add('mh-lg');
+    if (component.classList.contains('table--cta')) {
+        getLargestLastColWidth(component, table);
+        getRowHeight(component, table);
+    }
+};
+// #region Basic table fnctions
+export const transferAttributes = (component, pagination) => {
+    if (component.hasAttribute('data-total'))
+        pagination.setAttribute('data-total', component.getAttribute('data-total'));
+    if (component.hasAttribute('data-page'))
+        pagination.setAttribute('data-page', component.getAttribute('data-page'));
+    if (component.hasAttribute('data-show'))
+        pagination.setAttribute('data-show', component.getAttribute('data-show'));
+    if (component.hasAttribute('data-increment'))
+        pagination.setAttribute('data-increment', component.getAttribute('data-show'));
+    if (component.hasAttribute('data-page-jump'))
+        pagination.setAttribute('data-page-jump', 'true');
+    if (component.hasAttribute('data-per-page'))
+        pagination.setAttribute('data-per-page', 'true');
+    if (component.hasAttribute('data-item-count'))
+        pagination.setAttribute('data-item-count', 'true');
+    if (component.hasAttribute('data-loading'))
+        pagination.setAttribute('data-loading', 'true');
+    if (component.classList.contains('table--fullwidth'))
+        pagination.setAttribute('data-minimal', 'true');
+};
+export const updateAttributes = (component, pagination) => {
+    component.setAttribute('data-total', pagination.getAttribute('data-total'));
+    component.setAttribute('data-page', pagination.getAttribute('data-page'));
+    component.setAttribute('data-show', pagination.getAttribute('data-show'));
+    component.setAttribute('data-increment', pagination.getAttribute('data-show'));
+};
+export const paginateRows = (component) => {
+    const total = component.getAttribute('data-total');
+    const page = component.getAttribute('data-page');
+    const show = component.getAttribute('data-show');
+    const increment = component.getAttribute('data-increment');
+    const table = component.querySelector('table');
+    const end = page * show;
+    const start = end - show;
+    Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+        if (index >= start && index < end) {
+            row.classList.add('show');
+        }
+        else {
+            row.classList.remove('show');
+        }
+    });
+};
 export const addDataAttributes = (table) => {
     const colHeadings = Array.from(table.querySelectorAll('thead th'));
     const colRows = Array.from(table.querySelectorAll('tbody tr'));
@@ -35,7 +211,8 @@ export const addDataAttributes = (table) => {
             'on track',
             'not started',
             'warning',
-            'error',
+            'successful',
+            'failed',
         ];
         cells.forEach((cell, cellIndex) => {
             const heading = colHeadings[cellIndex];
@@ -57,37 +234,21 @@ export const addDataAttributes = (table) => {
         });
     });
 };
-export const getLargestLastColWidth = (table) => {
-    let largestWidth = 0;
-    Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {
-        const htmlStyles = window.getComputedStyle(document.querySelector('html'));
-        const lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
-        if (lastColChild) {
-            lastColChild.classList.add('text-nowrap');
-            let responsiveWidth = lastColChild.offsetWidth / parseFloat(htmlStyles.fontSize);
-            responsiveWidth += 1.7;
-            largestWidth = largestWidth > responsiveWidth ? largestWidth : responsiveWidth;
-        }
-    });
-    return largestWidth;
-};
-export const createMobileButton = (table, wrapper) => {
-    if (wrapper.classList.contains('table--fullwidth') && !wrapper.hasAttribute('data-expandable'))
+export const createMobileButton = (component, table) => {
+    if (component.classList.contains('table--fullwidth') && !component.hasAttribute('data-expandable'))
         return false;
-    if (table.querySelectorAll('thead tr th').length < 4 && !wrapper.hasAttribute('data-expandable'))
+    if (table.querySelectorAll('thead tr th').length < 4 && !component.hasAttribute('data-expandable'))
         return false;
     //If the expand column already exists we don't need to add a new one.
     Array.from(table.querySelectorAll('thead tr')).forEach((row) => {
         if (!table.querySelectorAll('thead tr th.expand-button-heading').length) {
-            row.insertAdjacentHTML('afterbegin', `<th class="th--fixed expand-button-heading"></th>`);
+            row.insertAdjacentHTML('afterbegin', `<th class="${component.hasAttribute('data-expandable') ? 'th--fixed ' : ''}expand-button-heading"></th>`);
         }
     });
-    Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {
+    Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
         const preExpanded = row.getAttribute('data-view') === 'full' ? 'aria-expanded' : '';
-        row.insertAdjacentHTML('afterbegin', `<td class="td--fixed td--expand"><button class="btn btn-compact btn-secondary" data-expand-button ${preExpanded}>Expand</button></td>`);
+        row.insertAdjacentHTML('afterbegin', `<td class="${component.hasAttribute('data-expandable') ? 'td--fixed ' : ''}td--expand"><button class="btn btn-compact btn-secondary btn-sm" data-expand-button ${preExpanded} data-index="${index}">Expand</button></td>`);
     });
-};
-export const addTableEventListeners = (table, wrapper) => {
     table.addEventListener('click', (event) => {
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-expand-button]')) {
             const button = event.target.closest('[data-expand-button]');
@@ -98,8 +259,164 @@ export const addTableEventListeners = (table, wrapper) => {
             else
                 tableRow.setAttribute('data-view', 'full');
             button.blur();
+            component.dispatchEvent(new CustomEvent('row-expanded', { detail: { row: button.getAttribute('data-index') } }));
         }
-        else if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')) {
+    });
+};
+export const getLargestLastColWidth = (component, table) => {
+    let largestWidth = 0;
+    Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {
+        const htmlStyles = window.getComputedStyle(document.querySelector('html'));
+        const lastColChild = row.querySelector(':scope > *:last-child > *:first-child');
+        if (lastColChild) {
+            lastColChild.classList.add('text-nowrap');
+            let responsiveWidth = lastColChild.offsetWidth / parseFloat(htmlStyles.fontSize);
+            responsiveWidth += 1.8;
+            largestWidth = largestWidth > responsiveWidth ? largestWidth : responsiveWidth;
+        }
+    });
+    component.style.setProperty('--cta-width', `${largestWidth}rem`);
+};
+export const getRowHeight = (component, table) => {
+    function outputsize() {
+        Array.from(table.querySelectorAll('tr')).forEach((row) => {
+            const rowHeight = row.offsetHeight;
+            row.style.setProperty('--row-height', `${rowHeight}px`);
+        });
+    }
+    new ResizeObserver(outputsize).observe(table);
+};
+// #endregion
+export const setupAdvancedTable = (component, table) => {
+    if (component.querySelector('iam-actionbar[data-selectall]') ||
+        document.querySelector(`iam-actionbar[data-for='${component.getAttribute('id')}']`)) {
+        const actionbar = component.querySelector('iam-actionbar[data-selectall]')
+            ? component.querySelector('iam-actionbar[data-selectall]')
+            : document.querySelector(`iam-actionbar[data-for='${component.getAttribute('id')}']`);
+        addSelectboxes(component, table, actionbar);
+    }
+    component.querySelectorAll('.dialog__wrapper .btn-compact').forEach((btn) => {
+        btn.classList.add('btn-sm');
+        btn.classList.add('m-0');
+        const tr = btn.closest('tr');
+        const td = btn.closest('td');
+        const trChildren = Array.prototype.slice.call(tr.children);
+        const cellIndex = trChildren.indexOf(td);
+        td.classList.add('td--fixed');
+        table.querySelector(`thead tr th:nth-child(${cellIndex + 1})`).classList.add('th--fixed');
+    });
+};
+// #region Advanced table functions
+export const addSelectboxes = (component, table, actionbar) => {
+    Array.from(table.querySelectorAll('thead tr')).forEach((row) => {
+        if (row.querySelector('.expand-button-heading'))
+            row.querySelector('.expand-button-heading').insertAdjacentHTML('afterend', `<th class="th--fixed"></th>`);
+        else
+            row.insertAdjacentHTML('afterbegin', `<th class="th--fixed"></th>`);
+    });
+    Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
+        row.setAttribute('data-index', index + 1);
+        if (!row.querySelector('.selectrow')) {
+            const rowID = `row${uniqueID(index)}`;
+            if (row.querySelector('.td--expand'))
+                row
+                    .querySelector('.td--expand')
+                    .insertAdjacentHTML('afterend', `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`);
+            else
+                row.insertAdjacentHTML('afterbegin', `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`);
+        }
+    });
+    table.addEventListener('change', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('.selectrow input')) {
+            const input = event.target.closest('.selectrow input');
+            const row = event.target.closest('tr');
+            const count = table.querySelectorAll('.selectrow input[type="checkbox"]').length;
+            const countChecked = table.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;
+            actionbar.setAttribute('data-selected', count == countChecked ? 'all' : countChecked);
+            const dispatchedEvent = new CustomEvent('row-selected', {
+                detail: {
+                    rowIndex: row.getAttribute('data-index'),
+                    checked: input.checked ? true : false,
+                },
+            });
+            component.dispatchEvent(dispatchedEvent);
+        }
+    });
+    actionbar.addEventListener('selected', (event) => {
+        if (event.detail.selected == '0') {
+            Array.from(table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
+                input.checked = false;
+            });
+            const dispatchedEvent = new CustomEvent('all-rows-unselected');
+            component.dispatchEvent(dispatchedEvent);
+        }
+        else if (event.detail.selected == 'all') {
+            Array.from(table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
+                input.checked = true;
+            });
+            const dispatchedEvent = new CustomEvent('all-rows-selected');
+            component.dispatchEvent(dispatchedEvent);
+        }
+    });
+};
+// Export CSV Data
+export const addExportEventListeners = (button, table) => {
+    if (!button) {
+        return false;
+    }
+    button.addEventListener('click', () => {
+        exportAsCSV(table);
+    });
+};
+export const exportAsCSV = function (table) {
+    let csvData = [];
+    // Get each row data
+    const rows = table.getElementsByTagName('tr');
+    for (let i = 0; i < rows.length; i++) {
+        // Get each column data
+        const cols = rows[i].querySelectorAll('td,th');
+        // Stores each csv row data
+        const csvRow = [];
+        for (let j = 0; j < cols.length; j++) {
+            // Get the text data of each cell of a row and push it to csvrow
+            csvRow.push(`"${cols[j].textContent}"`);
+        }
+        // Combine each column value with comma
+        csvData.push(csvRow.join(','));
+    }
+    // Combine each row data with new line character
+    csvData = csvData.join('\n');
+    // Create CSV file object and feed our csvData into it
+    const CSVFile = new Blob([csvData], {
+        type: 'text/csv',
+    });
+    // Create to temporary link to initiate download process
+    const tempLink = document.createElement('a');
+    tempLink.download = 'export.csv';
+    const 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);
+};
+// #endregion
+export const setupNoSubmitTable = (component, table, form, pagination, savedTableBody) => {
+    sortViaHeaders(component, table);
+    createSearchDataList(component, table);
+    form.addEventListener('change', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')) {
+            sortTable(table, form, savedTableBody);
+        }
+    });
+    addFilterEventListeners(component, table, form, pagination, savedTableBody);
+};
+// #region No submit table functions
+export const sortViaHeaders = (component, table) => {
+    table.addEventListener('click', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')) {
             const heading = event.target.closest('[data-sort]');
             heading.setAttribute('data-sort', 'true');
             // Turn other headings off
@@ -126,32 +443,32 @@ export const addTableEventListeners = (table, wrapper) => {
                     ref: heading.getAttribute('data-ref'),
                 },
             });
-            const component = heading.closest('iam-table');
             component.dispatchEvent(dispatchedEvent);
             const sortBy = heading.textContent.trim();
             const order = heading.getAttribute('data-order-by');
-            if (!wrapper.hasAttribute('data-submit')) {
+            if (!component.hasAttribute('data-submit')) {
+                // TODO
                 sortTableByValues(table, sortBy, order);
             }
         }
     });
 };
-// Filters
-export const createSearchDataList = (table, form) => {
-    const searchInput = form.querySelector('input[data-search]');
+export const createSearchDataList = (component, table) => {
+    var _a;
+    const actionbar = component.querySelector('iam-actionbar');
+    if (!actionbar)
+        return false;
+    const searchInput = (_a = actionbar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input#search');
     if (!searchInput)
         return false;
     const searchID = searchInput.getAttribute('id');
-    const searchableColumns = searchInput.getAttribute('data-search').split(',');
     const inputWrapper = searchInput.parentNode;
     const searchableTerms = {};
-    searchableColumns.forEach((columnHeading) => {
-        Array.from(table.querySelectorAll('td[data-label="' + columnHeading.trim() + '"]')).forEach((td) => {
-            if (td.querySelector('.td__content'))
-                searchableTerms[td.querySelector('.td__content').textContent] = td.querySelector('.td__content').textContent;
-            else
-                searchableTerms[td.textContent] = td.textContent;
-        });
+    table.querySelectorAll('tbody td:not(.td--fixed)').forEach((td) => {
+        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');
@@ -161,13 +478,75 @@ export const createSearchDataList = (table, form) => {
         .map((term) => `<option value="${term}"></option>`)
         .join('')}`;
 };
-export const addFilterEventListeners = (table, form, pagination, wrapper, savedTableBody) => {
+export const sortTable = (table, form, savedTableBody) => {
+    if (form.getAttribute('data-ajax')) {
+        return false;
+    }
+    const tbody = table.querySelector('tbody');
+    let selectedOption = form.querySelector(`input[type="radio"][data-sort]:checked`);
+    if (form.querySelector('select[data-sort]')) {
+        const select = form.querySelector('select[data-sort]');
+        selectedOption = form.querySelector(`select[data-sort] option:nth-child(${select.selectedIndex + 1})`);
+    }
+    const sortBy = selectedOption.getAttribute('data-sort');
+    const order = selectedOption.getAttribute('data-order');
+    const format = selectedOption.getAttribute('data-format');
+    if (!sortBy) {
+        tbody.innerHTML = savedTableBody.innerHTML;
+        addDataAttributes(table);
+        return false;
+    }
+    sortTableByValues(table, sortBy, order, format);
+};
+export const sortTableByValues = (table, sortBy, order, format = '') => {
+    const tbody = table.querySelector('tbody');
+    let orderArray = [];
+    if (!['asc', 'desc', 'descending'].includes(order)) {
+        orderArray = order.split(',');
+    }
+    // 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) => {
+        let rowIndex = tableRow
+            .querySelector('td[data-label="' + sortBy + '"], th[data-label="' + sortBy + '"]')
+            .textContent.trim();
+        if (tableRow.querySelector('[data-label="' + sortBy + '"] .td__content')) {
+            rowIndex = tableRow.querySelector('[data-label="' + sortBy + '"] .td__content').textContent.trim();
+        }
+        // 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);
+        }
+        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) => {
+        strTbody += tableRow.row.outerHTML;
+    });
+    tbody.innerHTML = strTbody;
+};
+export const addFilterEventListeners = (component, table, form, pagination, savedTableBody) => {
     let timer;
     // Check what conditions are set on the table to see what the form actions are
     const formSubmit = function (event, paginate = false) {
-        if (wrapper.hasAttribute('data-no-submit')) {
-            return false;
-        }
         if (form.classList.contains('processing'))
             return false;
         Array.from(form.querySelectorAll('iam-applied-filters')).forEach((element) => {
@@ -193,43 +572,44 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
             });
             form.classList.remove('processing');
         }
-        if (form.hasAttribute('data-ajax')) {
-            // Default back to page 1
-            if (!paginate) {
-                const paginationInput = form.querySelector('[data-pagination]');
-                paginationInput.value = 1;
-                wrapper.setAttribute('data-page', 1);
-            }
-            loadAjaxTable(table, form, pagination, wrapper);
-        }
-        else if (form.hasAttribute('data-submit')) {
-            form.submit();
-        }
-        else {
-            filterTable(table, form, wrapper);
-            populateDataQueries(table, form);
-        }
+        filterTable(component, table, form, pagination);
+        populateDataQueries(component, table, form);
+        /*
         // Pass post data back to the page
         if (form.hasAttribute('data-ajax-post')) {
-            const formData = new FormData(form);
-            const queryString = new URLSearchParams(formData).toString();
-            const http = new XMLHttpRequest();
-            http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
-            http.send();
+          const formData = new FormData(form);
+          const queryString = new URLSearchParams(formData).toString();
+          const http = new XMLHttpRequest();
+          http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
+          http.send();
         }
+          */
     };
-    if (form.querySelector('iam-actionbar[data-search]')) {
-        form.querySelector('iam-actionbar[data-search]').addEventListener('search-submit', (event) => {
+    if (component.querySelector('iam-actionbar[data-search]')) {
+        component.querySelector('iam-actionbar[data-search]').addEventListener('search-submit', (event) => {
             if (form.querySelector('input[data-search]')) {
                 form.querySelector('input[data-search]').value = event.detail.search;
             }
             else {
-                form.insertAdjacentHTML('beforeend', `<input type="hidden" name="search" data-search="${form.querySelector('iam-actionbar[data-search]').getAttribute('data-search')}" value="${event.detail.search}"/>`);
+                form.insertAdjacentHTML('beforeend', `<input type="hidden" name="search" data-search="${component.querySelector('iam-actionbar[data-search]').getAttribute('data-search')}" value="${event.detail.search}"/>`);
             }
+            const submitEvent = new CustomEvent('search-submit', {
+                detail: event.details,
+            });
+            component.dispatchEvent(submitEvent);
             clearTimeout(timer);
             formSubmit(event);
         });
     }
+    if (component.querySelector('iam-actionbar') && !component.querySelector('iam-actionbar').closest('form')) {
+        component.querySelector('iam-actionbar').addEventListener('change', (event) => {
+            if (!form.querySelector('.duplicate-actionbar')) {
+                form.insertAdjacentHTML('beforeend', `<div class="duplicate-actionbar" style="visibility: hidden; pointer-events: none; position: absolute;"></div>`);
+            }
+            form.querySelector('.duplicate-actionbar').innerHTML = component.querySelector('iam-actionbar').innerHTML;
+            filterTable(component, table, form, pagination);
+        });
+    }
     form.addEventListener('keyup', (event) => {
         clearTimeout(timer);
         if (event && event.target instanceof HTMLElement && event.target.closest('input[data-search]')) {
@@ -240,18 +620,12 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
     });
     form.addEventListener('change', (event) => {
         clearTimeout(timer);
-        if (event && event.target instanceof HTMLElement && event.target.closest('[data-sort]')) {
-            if (!form.hasAttribute('data-submit')) {
-                sortTable(table, form, savedTableBody);
-            }
-            formSubmit(event);
-        }
         if (event && event.target instanceof HTMLElement && event.target.closest('input[data-search]')) {
             formSubmit(event);
         }
         if (event && event.target instanceof HTMLElement && event.target.closest('[data-filter][data-no-ajax]')) {
             // Allow for input fields to filter the current results without a new ajax call
-            filterTable(table, form, wrapper);
+            filterTable(component, table, form, pagination);
             populateDataQueries(table, form);
         }
         else if (event &&
@@ -402,72 +776,7 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
         });
     });
 };
-export const sortTable = (table, form, savedTableBody) => {
-    if (form.getAttribute('data-ajax')) {
-        return false;
-    }
-    const tbody = table.querySelector('tbody');
-    let selectedOption = form.querySelector(`input[type="radio"][data-sort]:checked`);
-    if (form.querySelector('select[data-sort]')) {
-        const select = form.querySelector('select[data-sort]');
-        selectedOption = form.querySelector(`select[data-sort] option:nth-child(${select.selectedIndex + 1})`);
-    }
-    const sortBy = selectedOption.getAttribute('data-sort');
-    const order = selectedOption.getAttribute('data-order');
-    const format = selectedOption.getAttribute('data-format');
-    if (!sortBy) {
-        tbody.innerHTML = savedTableBody.innerHTML;
-        addDataAttributes(table);
-        return false;
-    }
-    sortTableByValues(table, sortBy, order, format);
-};
-export const sortTableByValues = (table, sortBy, order, format = '') => {
-    const tbody = table.querySelector('tbody');
-    let orderArray = [];
-    if (!['asc', 'desc', 'descending'].includes(order)) {
-        orderArray = order.split(',');
-    }
-    // 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) => {
-        let rowIndex = tableRow
-            .querySelector('td[data-label="' + sortBy + '"], th[data-label="' + sortBy + '"]')
-            .textContent.trim();
-        if (tableRow.querySelector('[data-label="' + sortBy + '"] .td__content')) {
-            rowIndex = tableRow.querySelector('[data-label="' + sortBy + '"] .td__content').textContent.trim();
-        }
-        // 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);
-        }
-        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) => {
-        strTbody += tableRow.row.outerHTML;
-    });
-    tbody.innerHTML = strTbody;
-};
-export const filterTable = (table, form, wrapper) => {
+export const filterTable = (component, table, form, pagination) => {
     table.classList.remove('table--filtered');
     const filters = filterFilters(form);
     const searches = [];
@@ -484,9 +793,9 @@ export const filterTable = (table, form, wrapper) => {
     // Add search columns too
     if (form.querySelector('input[data-search]')) {
         const searchInput = form.querySelector('input[data-search]');
-        const searchColumns = form.querySelector('input[data-search]').getAttribute('data-search').split(',');
-        searchColumns.forEach((column) => {
-            searches.push({ column: `${column.trim()}`, value: `${searchInput.value}` });
+        //const searchColumns = form.querySelector('input[data-search],[part="search-input"]').getAttribute('data-search').split(',');
+        table.querySelectorAll('thead tr th').forEach((column) => {
+            searches.push({ column: `${column.textContent.trim()}`, value: `${searchInput.value}` });
         });
     }
     //Display the filter count
@@ -628,20 +937,20 @@ export const filterTable = (table, form, wrapper) => {
             row.classList.add('filtered--show');
         }
     });
-    if (wrapper) {
-        wrapper.setAttribute('data-total', matched);
-        wrapper.setAttribute('data-show', showRows);
-        wrapper.setAttribute('data-page', page);
+    if (pagination) {
+        pagination.setAttribute('data-total', matched);
+        pagination.setAttribute('data-show', showRows);
+        pagination.setAttribute('data-page', page);
     }
 };
-export const populateDataQueries = (table, form, wrapper) => {
+export const populateDataQueries = (component, table, form) => {
     const dataQueries = Array.from(form.querySelectorAll('[data-query]'));
     dataQueries.forEach((queryElement) => {
         const query = queryElement.getAttribute('data-query');
         let numberOfMatchedRows = 0;
         if (query == 'total') {
-            if (wrapper.hasAttribute('data-total'))
-                numberOfMatchedRows = wrapper.getAttribute('data-total');
+            if (component.hasAttribute('data-total'))
+                numberOfMatchedRows = component.getAttribute('data-total');
             else
                 numberOfMatchedRows = table.classList.contains('table--filtered')
                     ? table.querySelectorAll('tbody tr').length
@@ -685,134 +994,54 @@ export const populateDataQueries = (table, form, wrapper) => {
         }
     });
 };
-// Pagination
-export const addPaginationEventListeners = function (table, form, pagination, wrapper) {
-    if (wrapper.hasAttribute('data-no-submit')) {
-        return false;
-    }
-    pagination.addEventListener('update-page', (event) => {
-        const paginationInput = form.querySelector('[data-pagination]');
-        const newPage = event.detail.page;
-        // Set the filter value
-        paginationInput.value = newPage;
-        form.dispatchEvent(new Event('paginate'));
-        // Reset the data attribute
-        wrapper.setAttribute('data-page', newPage);
-        if (table.hasAttribute('data-show-history')) {
-            const url = new URL(location);
-            url.searchParams.set('page', newPage);
-            history.pushState({ type: 'pagination', form: form.getAttribute('id'), page: newPage }, '', url);
-        }
-        // scroll back to the top of the table
-        if (!wrapper.hasAttribute('data-no-scroll')) {
-            const yOffset = -250;
-            const y = table.getBoundingClientRect().top + window.pageYOffset + yOffset;
-            window.scrollTo({ top: y, behavior: 'smooth' });
-        }
-    });
-    pagination.addEventListener('update-show', (event) => {
-        const showInput = form.querySelector('[data-show]');
-        const showRows = event.detail.show;
-        showInput.value = showRows;
-        wrapper.setAttribute('data-show', showRows);
-        form.dispatchEvent(new Event('submit'));
-    });
-};
-// Export CSV Data
-export const addExportEventListeners = (button, table) => {
-    if (!button) {
-        return false;
+// #endregion
+export const setupSubmitTable = (component, table, form, pagination) => {
+    form.setAttribute('method', 'get');
+    const actionbar = component.querySelector('iam-actionbar');
+    if (actionbar) {
+        actionbar.addEventListener('change', (event) => {
+            form.submit();
+        });
     }
-    button.addEventListener('click', () => {
-        exportAsCSV(table);
-    });
 };
-export const exportAsCSV = function (table) {
-    let csvData = [];
-    // Get each row data
-    const rows = table.getElementsByTagName('tr');
-    for (let i = 0; i < rows.length; i++) {
-        // Get each column data
-        const cols = rows[i].querySelectorAll('td,th');
-        // Stores each csv row data
-        const csvRow = [];
-        for (let j = 0; j < cols.length; j++) {
-            // Get the text data of each cell of a row and push it to csvrow
-            csvRow.push(`"${cols[j].textContent}"`);
-        }
-        // Combine each column value with comma
-        csvData.push(csvRow.join(','));
-    }
-    // Combine each row data with new line character
-    csvData = csvData.join('\n');
-    // Create CSV file object and feed our csvData into it
-    const CSVFile = new Blob([csvData], {
-        type: 'text/csv',
+// #region submit tables functions
+// #endregion
+export const setupAjaxTable = (component, table, form, pagination) => {
+    loadAjaxTable(component, table, form, pagination);
+    const actionbar = component.querySelector('iam-actionbar');
+    form.addEventListener('submit', (event) => {
+        loadAjaxTable(component, table, form, pagination);
+        event.preventDefault();
     });
-    // Create to temporary link to initiate download process
-    const tempLink = document.createElement('a');
-    tempLink.download = 'export.csv';
-    const 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);
-};
-// After table is loaded
-export const makeTableFunctional = function (table, form, pagination, wrapper) {
-    addDataAttributes(table);
-    createMobileButton(table, wrapper);
-    populateDataQueries(table, form, wrapper);
-    // 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`);
-        function outputsize() {
-            Array.from(table.querySelectorAll('tr')).forEach((row) => {
-                const rowHeight = row.offsetHeight;
-                row.style.setProperty('--row-height', `${rowHeight}px`);
-            });
-        }
-        new ResizeObserver(outputsize).observe(table);
+    if (actionbar) {
+        actionbar.addEventListener('change', (event) => {
+            loadAjaxTable(component, table, form, pagination);
+        });
     }
 };
-const filterFilters = function (form) {
-    const filters = new Object();
-    // Filter
-    const filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
-    filterInputs.forEach((filterInput) => {
-        // Ignore uncked radio inputs
-        if (filterInput.type == 'radio' && !filterInput.checked) {
-            return;
-        }
-        if (filterInput.type == 'checkbox' && !filterInput.checked) {
-            return;
-        }
-        if (filterInput && filterInput.value) {
-            const dataFilter = filterInput.getAttribute('data-filter');
-            let filterValue = filterInput.value;
-            if (filterInput.hasAttribute('data-date-from'))
-                filterValue += '-date-from';
-            if (filterInput.hasAttribute('data-date-to'))
-                filterValue += '-date-to';
-            if (!filters[dataFilter])
-                filters[dataFilter] = [];
-            filters[dataFilter].push(filterValue);
-        }
-    });
-    return filters;
-};
-export const loadAjaxTable = function (table, form, pagination, wrapper) {
+// #region ajax tables functions
+export const loadAjaxTable = function (component, table, form, pagination) {
     return __awaiter(this, void 0, void 0, function* () {
+        // Add actionbar inputs into form
+        if (component.querySelector('iam-actionbar') && !component.querySelector('iam-actionbar').closest('form')) {
+            if (!form.querySelector('.duplicate-actionbar'))
+                form.insertAdjacentHTML('beforeend', `<div class="duplicate-actionbar" style="visibility: hidden; pointer-events: none; position: absolute;"></div>`);
+            form.querySelector('.duplicate-actionbar').innerHTML = component.querySelector('iam-actionbar').innerHTML;
+        }
+        // Add pagination inputs into form
+        if (!form.querySelector('input[name=show]'))
+            form.insertAdjacentHTML('beforeend', `<input name="show" type="hidden" value="${component.getAttribute('data-show')}" />`);
+        if (!form.querySelector('input[name=page]'))
+            form.insertAdjacentHTML('beforeend', `<input name="page" type="hidden" value="${component.getAttribute('data-page')}" />`);
+        form.querySelector('input[name=page]').value = component.getAttribute('data-page');
+        form.querySelector('input[name=show]').value = component.getAttribute('data-show');
+        // Construct form data to send to api
         const formData = new FormData(form);
         const queryString = new URLSearchParams(formData).toString();
         const columns = table.querySelectorAll('thead tr th:not(.expand-button-heading)');
         const tbody = table.querySelector('tbody');
         const ajaxURL = form.getAttribute('data-ajax');
-        wrapper.classList.add('table--loading');
+        component.classList.add('table--loading');
         // Display the filter count
         const filters = filterFilters(form);
         Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element) => {
@@ -867,8 +1096,8 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                 const totalNumber = resolvePath(response, totalNumberSchema, 15);
                 const currentPage = resolvePath(response, currentPageSchema, 1);
                 const data = resolvePath(response, schema);
-                const emptyMsg = wrapper.hasAttribute('data-empty-msg')
-                    ? wrapper.getAttribute('data-empty-msg')
+                const emptyMsg = component.hasAttribute('data-empty-msg')
+                    ? component.getAttribute('data-empty-msg')
                     : 'No results found';
                 if (data) {
                     tbody.innerHTML = '';
@@ -919,11 +1148,10 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                         });
                         tbody.appendChild(table_row);
                     });
-                    createSearchDataList(table, form);
-                    // Add data to the pagination
-                    wrapper.setAttribute('data-total', parseInt(totalNumber));
-                    wrapper.setAttribute('data-page', parseInt(currentPage));
-                    makeTableFunctional(table, form, pagination, wrapper);
+                    component.setAttribute('data-total', parseInt(totalNumber));
+                    component.setAttribute('data-page', parseInt(currentPage));
+                    pagination.setAttribute('data-total', totalNumber);
+                    pagination.setAttribute('data-page', currentPage);
                     Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement) => {
                         const totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');
                         if (queryElement.hasAttribute('data-total'))
@@ -934,13 +1162,15 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
                     if (parseInt(totalNumber) == 0) {
                         tbody.innerHTML = `<tr><td colspan="100%"><span>${emptyMsg}</span></td></tr>`;
                     }
-                    wrapper.classList.remove('table--loading');
+                    component.classList.remove('table--loading');
                     window.dataLayer = window.dataLayer || [];
                     window.dataLayer.push({
                         event: 'Ajax table loaded',
                         url: ajaxURL,
                         formData: queryString,
                     });
+                    setupBasicTable(component, table, form, pagination);
+                    setupAdvancedTable(component, table, form, pagination);
                 }
                 else {
                     tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
@@ -955,24 +1185,43 @@ export const loadAjaxTable = function (table, form, pagination, wrapper) {
         }
     });
 };
-export const formatCell = (format, cellOutput) => {
-    switch (format) {
-        case 'datetime':
-            return (new Date(cellOutput).toLocaleDateString('en-gb', {
-                weekday: 'short',
-                year: '2-digit',
-                month: 'long',
-                day: 'numeric',
-            }) +
-                ' ' +
-                new Date(cellOutput).toLocaleTimeString('en-gb', { hour: '2-digit', minute: '2-digit' }));
-        case 'date':
-            return new Date(cellOutput).toLocaleDateString('en-gb', {
-                day: 'numeric',
-                month: 'long',
-                year: '2-digit',
-            });
-        case 'capitalise':
-            return (cellOutput = ucfirst(cellOutput));
+// #endregion
+/*
+// Pagination - still needed?
+export const addPaginationEventListeners = function (component, table, form, pagination): void | boolean {
+
+  
+  pagination.addEventListener('update-page', (event) => {
+    const paginationInput = form.querySelector('[data-pagination]');
+    const newPage = event.detail.page;
+
+    // Set the filter value
+    paginationInput.value = newPage;
+    form.dispatchEvent(new Event('paginate'));
+
+    // Reset the data attribute
+    component.setAttribute('data-page', newPage);
+
+    if (table.hasAttribute('data-show-history')) {
+      const url = new URL(location);
+      url.searchParams.set('page', newPage);
+      history.pushState({ type: 'pagination', form: form.getAttribute('id'), page: newPage }, '', url);
+    }
+
+    // scroll back to the top of the table
+    if (!component.hasAttribute('data-no-scroll')) {
+      const yOffset = -250;
+      const y = table.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: 'smooth' });
     }
+  });
+
+  pagination.addEventListener('update-show', (event) => {
+    const showInput = form.querySelector('[data-show]');
+    const showRows = event.detail.show;
+    showInput.value = showRows;
+    component.setAttribute('data-show', showRows);
+    form.dispatchEvent(new Event('submit'));
+  });
 };
+*/