getnamingo-registry/cp/resources/views/partials/js-overview.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(){
    
    currency = "{{ currency }} ";

    table = new Tabulator("#overviewTable", {
        ajaxURL:"/api/records/payment_history?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:"date", dir:"desc"},
        ],
        placeholder: "{{ __('No Data') }}",
        columns:[
            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('Registrar') }}", field:"registrar_id.name", headerSort:true, responsive:0},
            {title:"{{ __('Date') }}", field:"date", headerSort:true, responsive:2},
            {title:"{{ __('Description') }}", field:"description", headerSort:true, responsive:2},
            {title:"{{ __('Amount') }}", field:"amount", headerSort:true, download:false, responsive:0, formatter:"money", formatterParams:{
                decimal:".",
                thousand:" ",
                symbol:currency,
                negativeSign:true,
            }},
        ]
    });
    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.date).toLowerCase().includes(term) ||
                    String(data.description).toLowerCase().includes(term) ||
                    String(data.amount).toString().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 Overview"});
    }
    
    function downloadPDF() {
        table.download("pdf", "data.pdf", {
            orientation:"portrait",
            title:"My Overview",
            jsPDF:{unit:"mm", format:"a4", orientation:"p"}
        });
    }
</script>