Vue/Vuetify Data Table OData Support

Question

I have some odata-enabled endpoints that I'm looking to wire up to data tables in vue and have them automatically support server-side sorting, filtering and paging. The grid in Telerik's Kendo UI supports odata to the point where you tell the component that the data source type is odata and it automatically "just works" (https://demos.telerik.com/kendo-ui/grid/remote-data-binding) because odata is a well-defined standard.

I'm wondering if there is support for odata in other common vue-specific UI frameworks like vuetify. I've looked at vuetify specifically and it does seem to support server-side operations, but it's not clear to me how much custom logic I'm going to need to write in order to use odata since I haven't been able to find any specific examples.

Here is the source from the example linked above that shows how clean it is to wire up declaritively without any additional boilerplate logic:

        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 550,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                        field:"OrderID",
                        filterable: false
                    },
                    "Freight",
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                    }, {
                        field: "ShipName",
                        title: "Ship Name"
                    }, {
                        field: "ShipCity",
                        title: "Ship City"
                    }
                ]
            });
        });

This may or may not be helpful, but Kendo UI does have a Kendi UI for Vue. I don't think Vuetify has odata support yet. — user11809641
Yeah, sorry... I should have noted in the original post, but I'm going to be adding functionality to an existing vue application that currently uses vuetify. I'd like to avoid adding in a whole new UI framework like Kendo UI just to use a single component of it. We also want to have visual cohesiveness with the other tables (which call REST APIs that don't support odata and do all sorting, filtering, paging client-side) and they use vuetify data-tables. — Dewey Vozel
I get it. I added an answer below with my suggestion on libraries to use to make this as simple as possible. — user11809641

user11809641 user11809641 · Accepted Answer · 2020-09-25T20:17:59

Vuetify doesn't seem to support odata yet, so your best bet is probably to write a client-side js solution.

Probably using one of these libraries.

O.js seems to be rather simple.

Vue/Vuetify Data Table OData Support

1 Answers