Tabulator
#all-payments-table -> Any Html Div with the ID

var table = new Tabulator("#all-payments-table", {
        ajaxURL: "all",
        paginationSize: 20,
        layout: "fitColumns",
        pagination: "remote",
        selectable: true,
        printAsHtml: true,
        ajaxLoaderLoading: $('#logo_spinner').html(),
        columns: [
            {
                title: "Member ID",
                field: "membership_id",
                sorter: "string",
            },
            {
                title: "Account Manager",
                field: "name.some_id",
                sorter: "string",
            },
            {
                title: "Item Type",
                field: "payable_type",
                sorter: "string",
            },
            {
                title: "Amount Paid",
                field: "payment_amount",
                sorter: "string",
            }
        ]
    });







    ==== Laravel Code ====



    public function allPayments(Request $request)
    {

        ...

        $all_member_payments = $all_member_payments->orderBy('member_payment_history.created_at', 'DESC');

        $all_member_payments = $all_member_payments->select([
            "members.id",
            "members.membership_id",
            "members.email",
            "members.primary_phone",
            "member_payment_history.payable_type",
            "member_payment_history.payment_amount",
            "member_payment_history.payment_mode",
            "member_payment_history.created_at",
            "members.membership_class_id",
            "payment_items.name",
            "members.title",
            "members.surname",
            "members.other_names",
            "members.primary_phone"
        ])->paginate($request->size);

        return response()->json($all_member_payments);
    }