getnamingo-registry/cp/resources/views/partials/js-poll.twig

<script src="/assets/js/tabulator.min.js" defer></script>
<script src="/assets/js/tabler.min.js" defer></script>
<script src="/assets/js/xlsx.full.min.js" defer></script>
<script src="/assets/js/jspdf.umd.min.js" defer></script>
<script src="/assets/js/jspdf.plugin.autotable.min.js" defer></script>
<script>
    var table;

    document.addEventListener("DOMContentLoaded", function(){
    table = new Tabulator("#pollTable", {
        ajaxURL:"/api/records/poll?join=registrar", // Set the URL for your JSON data
        ajaxConfig:"GET",
        pagination:"local",
        paginationSize:10,
        ajaxResponse:function(url, params, response){
            return response.records;
        },
        layout:"fitDataFill",
        responsiveLayout: "collapse",
        responsiveLayoutCollapseStartOpen:false,
        resizableColumns:false,
        initialSort:[
            {column:"id", dir:"desc"}, // sorting by the "id" field in descending order
        ],
        placeholder: "{{ __('No Data') }}",
        columns:[
            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('ID') }}", field:"id", headerSort:true, responsive:2},
            {title:"{{ __('Registrar') }}", field:"registrar_id.name", headerSort:true, responsive:2},
            {title:"{{ __('Date') }}", field:"qdate", headerSort:true, responsive:0},
            {title:"{{ __('Message') }}", field:"msg", headerSort:true, responsive:0},
            {title:"{{ __('Message Type') }}", field:"msg_type", headerSort:true, responsive:0},
            {title:"{{ __('Object') }}", field:"obj_name_or_id", headerSort:true, responsive:2},
        ]
    });
    var searchInput = document.getElementById("search-input");
    searchInput.addEventListener("input", function () {
        var term = searchInput.value.toLowerCase();

        if (term) { // Only apply the filter when there's a term to search for
            table.setFilter(function (data) {
                // Check if any of the fields contain the search term
                return (
                    String(data.registrar_id.name).toLowerCase().includes(term) ||
                    String(data.qdate).toLowerCase().includes(term) ||
                    String(data.msg).toLowerCase().includes(term) ||
                    String(data.msg_type).toLowerCase().includes(term) ||
                    String(data.obj_name_or_id).toLowerCase().includes(term)
                );
            });
        } else {
            table.clearFilter(); // Clear the filter when the search box is emptied
        }
    });
    });
   
    function downloadCSV() {
        table.download("csv", "data.csv");
    }

    function downloadJSON() {
        table.download("json", "data.json");
    }

    function downloadXLSX() {
        table.download("xlsx", "data.xlsx", {sheetName:"My Contacts"});
    }
    
    function downloadPDF() {
        table.download("pdf", "data.pdf", {
            orientation:"portrait",
            title:"My Contacts",
            jsPDF:{unit:"mm", format:"a4", orientation:"p"}
        });
    }
</script>