How to Implement a Fully Server-Side Webix Datatable with OData, Excel Filters, server-side sorting and Custom Pagination?

webix_B_123 · November 4, 2025, 10:54am

I’m using a Webix datatable. Below is my current configuration:

const grida = {
  view: "datatable",
  id: "grid",
  dragColumn: true,
  columns: [
    { id: "package", width: 200, header: "package" },
    {
      id: "section",
      header: [
        "Section",
        {
          content: "serverMultiComboFilter",
          options: "https://api.npoint.io/3cea888550ff54342f81"
        }
      ],
      width: 250
    },
    { id: "size", width: 80 },
    { id: "architecture", header: "PC", width: 60, sort: "text" }
  ],
  scroll: "y",
  url: "https://docs.webix.com/samples/15_datatable/16_dyn_loading/data/data_dyn.php",
  pager: "pagerB",
  on: {
    onBeforeLoad: function () {
      if (!this.showProgress) webix.extend(this, webix.ProgressBar);

      this.disable();
      this.showProgress({
        type: "icon",
        hide: true
      });
    },
    onAfterLoad: function () {
      this.enable();
    }
  }
};

webix.ready(function () {
  webix.ui({
    rows: [
      grida,
      {
        view: "pager",
        id: "pagerB",
        template:
          '{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}',
        size: 50,
        group: 5
      }
    ]
  });
});

What I need / questions

Can we change the url in the datatable to a custom OData endpoint?
In my case the URL is different and must support querystring or POST payload parameters for page, sort and filter.
Full remote server-side datatable:
- Server-side pagination (page number / page size).
- Server-side sorting.
- Server-side column filters (Excel-style).
  Each column’s Excel filter store should call an API that returns the unique values for that column across all pages (not just the current page).
- When a column’s Excel filter selection or sorting changes, the selected filter values for that column should be sent as $filter in the OData query string. The selected page should be sent in a separate query param (e.g. $skip / $top or page/pagesize).
Pager UI enhancements:
- Add a dropdown to the pager for page size (e.g., 10 / 25 / 50 / 100).
- Add an input box to jump to a specific page.

Summary

I want a completely remote datatable backed by an OData-style API:

requests include page, pageSize, sort, and $filter (for each column)
excel-filter controls call an API endpoint that returns unique values for that column across all data (so the filter store is server-driven)
pager supports page size dropdown and “go to page” input

If anyone has a sample implementation (Webix config + server request examples) or guidance on best practices for wiring Excel filters to server endpoints and integrating the enhanced pager UI, that would be very helpful. Thanks!

Natalia_Shilova · November 5, 2025, 3:58pm

Hello @webix_B_123 ,

to remove the Excel-style filters

Could you clarify which design do you want to apply?

Instead of Excel filter you can use serverMultiComboFilter/multiComboFilter filter. In case of serverMultiComboFilter it is better to load options separately so that the set of options does not depend on the data currently loaded into the table.

To show progress/loading indicator you can use ProgressBar api.

In my example I use serverMultiComboFilter but our demo server cannot handle such filtering requests at the moment in the right way. Please keep this in mind while checking the demo.

Please check the example: Code Snippet

webix_B_123 · November 11, 2025, 1:46pm

@Natalia_Shilova @Olga — thanks for the reply.

I’m using a Webix datatable. Below is my current configuration:

const grida = {
  view: "datatable",
  id: "grid",
  dragColumn: true,
  columns: [
    { id: "package", width: 200, header: "package" },
    {
      id: "section",
      header: [
        "Section",
        {
          content: "serverMultiComboFilter",
          options: "https://api.npoint.io/3cea888550ff54342f81"
        }
      ],
      width: 250
    },
    { id: "size", width: 80 },
    { id: "architecture", header: "PC", width: 60, sort: "text" }
  ],
  scroll: "y",
  url: "https://docs.webix.com/samples/15_datatable/16_dyn_loading/data/data_dyn.php",
  pager: "pagerB",
  on: {
    onBeforeLoad: function () {
      if (!this.showProgress) webix.extend(this, webix.ProgressBar);

      this.disable();
      this.showProgress({
        type: "icon",
        hide: true
      });
    },
    onAfterLoad: function () {
      this.enable();
    }
  }
};

webix.ready(function () {
  webix.ui({
    rows: [
      grida,
      {
        view: "pager",
        id: "pagerB",
        template:
          '{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}',
        size: 50,
        group: 5
      }
    ]
  });
});

What I need / questions

Can we change the url in the datatable to a custom OData endpoint?
In my case the URL is different and must support querystring or POST payload parameters for page, sort and filter.
Full remote server-side datatable:
- Server-side pagination (page number / page size).
- Server-side sorting.
- Server-side column filters (Excel-style).
  Each column’s Excel filter store should call an API that returns the unique values for that column across all pages (not just the current page).
- When a column’s Excel filter selection or sorting changes, the selected filter values for that column should be sent as $filter in the OData query string. The selected page should be sent in a separate query param (e.g. $skip / $top or page/pagesize).
Pager UI enhancements:
- Add a dropdown to the pager for page size (e.g., 10 / 25 / 50 / 100).
- Add an input box to jump to a specific page.

Summary

I want a completely remote datatable backed by an OData-style API:

requests include page, pageSize, sort, and $filter (for each column)
excel-filter controls call an API endpoint that returns unique values for that column across all data (so the filter store is server-driven)
pager supports page size dropdown and “go to page” input

If anyone has a sample implementation (Webix config + server request examples) or guidance on best practices for wiring Excel filters to server endpoints and integrating the enhanced pager UI, that would be very helpful. Thanks!

webix_B_123 · November 14, 2025, 1:03pm

@Natalia_Shilova I’ve seen serverExcelFilter and server-side sorting, may I know how to implement these with ODATA api urls?

serverExcelFilter

Listopad · November 28, 2025, 6:43pm

Hi @webix_B_123 ,

In webix, any “server-” filter and the server-side sorting will trigger data reloading with the certain parameters.
To control request and response in any scenario, you can use a proxy objects. The library includes a few ready-made proxy objects, and a possibility to define custom ones.

Here’s a generalized example of a custom proxy for data loading and saving: Code Snippet

In this example, please try to use the filter and sorting in the “Title” column and observe the parameters in the console log (line 7). This is the default structure that you can transform as you need (for example, request params into the OData format) and include in the request body (the code utilizes fetch API, but it is not mandatory).
Please note that capabilities of our demo backend are limited, so no real filtering and sorting are implemented there - this is only a template that could be expanded with the desired features.

webix_B_123 · December 18, 2025, 12:01pm

Sorry, I’m not clear with your answer. Could you please go through the question again?
What I need is a paginated grid where:

The grid data is loaded using OData APIs

Pagination is handled via OData (server-side)

Filters also use OData APIs, not a local filter store

No client-side filtering; everything should be server-side via OData

webix_B_123 · February 19, 2026, 11:09am

@Listopad @Natalia_Shilova can anyone help here?

Natalia_Shilova · March 2, 2026, 11:41am

Hi @webix_B_123 ,

I should mention that external OData services (like services.odata.org) are third-party resources and fall outside the scope of webix support. While we’re not typically able to provide working examples based on external APIs that we don’t control, we can suggest an implementation that demonstrates the general approach: Code Snippet

You can use this snippet as a starting point and adapt it to your specific backend/API requirements.
Nonetheless, if a question or an issue is related to Webix API or features, we will be glad to help.