list.js apply defaut filter to table

Question

Hello I need some help with list.js

Im trying to create a ticket system and need a table where I can select between open and closed tickets.

The problem is when the page loads it does not apply the filter and shows all open and closed tickets. If I select closed tickets in the dropdown it works and starts applyng the filter if switch between open and closed tickets.

Here is the code for the list which is included on my dashboard page: https://codeshare.io/dwmAqB

And on the dashboard I've tried adding something like this:

    <script>
document.addEventListener('DOMContentLoaded', function () {
    // Get the List.js instance for your list
    var ticketList = new List('dashboard-tickets-list', {
        valueNames: ['TicketTitle', 'ticketContent', 'ticketOwner', 'ticketStatus'],
        page: 5,
        pagination: true,
        filter: { key: 'ticketStatus' }
    });

    // Desired default filter
    ticketList.filter('ticketStatus', 'open');
});
</script>

But it dont look like it's even registering the js script.. Nothing happens when i change the "page" number.

I have the data-list on the line 2, contains much of the same code as the js script.. Is that what is blocking js script?

Can someone tell me why this is not working?