An alpine datatable

app.js

//  Alpine JS datatable
window.datatable = function (data) {
    return {
        source: data,
        data: data,

        //  Pagination
        current_page: 0,
        items_per_page_value: 5,

        get items_per_page() {
            return this.items_per_page_value;
        },

        set items_per_page(value) {
            this.items_per_page_value = parseInt(value);
        },

        items() {
            let start = this.current_page * this.items_per_page,
                end = this.data.length;

            if (this.current_page * this.items_per_page < this.data.length - this.items_per_page) {
                end = this.current_page * this.items_per_page + this.items_per_page;
            }

            return this.data.slice(start, end);
        },

        atStart() {
            return this.current_page === 0;
        },

        atEnd() {
            return this.current_page >= Math.floor((this.data.length - 1) / this.items_per_page);
        },

        first() {
            if (!this.atStart()) {
                this.current_page = 0;
            }
        },

        previous() {
            if (!this.atStart()) {
                this.current_page--;
            }
        },

        next() {
            if (!this.atEnd()) {
                this.current_page++;
            }
        },

        last() {
            if (!this.atEnd()) {
                this.current_page = Math.floor((this.data.length - 1) / this.items_per_page);
            }
        },

        //  Sorting
        columns_sorted: [],

        sort(column) {
            if (this.columns_sorted[column] == undefined) {
                this.columns_sorted[column] = true;
            }

            if (this.columns_sorted[column]) {
                this.data.sort((a, b) => (a[column] > b[column]) ? 1 : -1);
            } else {
                this.data.sort((a, b) => (a[column] > b[column]) ? -1 : 1);
            }

            this.columns_sorted[column] = !this.columns_sorted[column];
        },

        //  Search
        search(search, values) {
            this.first();
            results = [];
            for (i in this.source) {
                for (x in values) {
                    let value = this.source[i][values[x]];
                    if (value.toUpperCase().indexOf(search.toUpperCase()) > -1) {
                        results.push(this.source[i]);
                        break;
                    }
                }
            }
            this.data = results;
        }
    }
}