# ag-grid-odata

> Implementation Odata ServerSideDatasource for ag-grid

Latest version **1.0.43** (published 2026-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ag-grid-odata
pnpm add ag-grid-odata
yarn add ag-grid-odata
bun add ag-grid-odata
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.0.43 |
| Published | 2026-05-26 |
| First published | 2020-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 135.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Semen Muradkhanov |
| Maintainers | senyamur |
| Keywords | ag-grid, odata |

## Links

- npm: https://www.npmjs.com/package/ag-grid-odata
- Repository: https://github.com/SenyaMur/ag-grid-odata
- Homepage: https://github.com/SenyaMur/ag-grid-odata#readme
- Issues: https://github.com/SenyaMur/ag-grid-odata/issues
- npm.io page: https://npm.io/package/ag-grid-odata

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.43 (latest) — 2026-05-26
- 1.0.42 — 2025-01-28
- 1.0.41 — 2025-01-28
- 1.0.40 — 2024-10-22
- 1.0.39 — 2024-10-22
- 1.0.38 — 2024-10-18
- 1.0.37 — 2024-10-04
- 1.0.36 — 2024-09-13
- 1.0.35 — 2024-08-15
- 1.0.34 — 2024-08-14
- 1.0.33 — 2024-03-29
- 1.0.32 — 2022-09-07
- 1.0.31 — 2022-09-06
- 1.0.30 — 2022-06-17
- 1.0.29 — 2022-01-19
- … 28 more at https://npm.io/package/ag-grid-odata/versions

## README

<h1 align="center">Welcome to ag-grid-odata 👋</h1>
<p align="center">
  <img src="https://img.shields.io/npm/v/ag-grid-odata.svg?orange=blue" />
  <a href="https://www.npmjs.com/package/ag-grid-odata">
    <img alt="downloads" src="https://img.shields.io/npm/dm/ag-grid-odata.svg?color=blue" target="_blank" />
  </a>
  <a href="https://github.com/senyamur/ag-grid-odata/blob/master/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/license-MIT-yellow.svg" target="_blank" />
  </a>
</p>

Odata provider for ag-grid

Ag-Grid Server Side Row Model [demo](https://codesandbox.io/s/ag-grid-server-side-row-model-sample-zqujt?fontsize=14&hidenavigation=1&theme=dark)

## Installation

`npm install ag-grid-odata`

## Usage

### Client mode

Features in client mode:

- Fetch records
- Sorting
- Filter

<details>
  <summary>Code example</summary>

```js
import OdataProvider from 'ag-grid-odata'
import { AgGridReact, AgGridColumn } from "@ag-grid-community/react"
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css";

const onGridReady = (params) => {
    const gridApi = params.api;
    gridApi.setDatasource(
      new OdataProvider({
            callApi: (options) =>fetch(`yourOdataUrlService/EntitySet${options}`)
            .then(resp=>resp.json())
            .then(resp => { return resp.data });
        })
    )
  }

function(props) MyGrid(){
return (
    <AgGridReact
      rowModelType='infinite'
      // fetch 100 rows per at a time
      cacheBlockSize={100}
      onGridReady={onGridReady}
      rowGroupPanelShow='onlyWhenGrouping'
      suppressDragLeaveHidesColumns
      suppressMakeColumnVisibleAfterUnGroup
      autoGroupColumnDef={{
        pinned: 'left'
      }}
      defaultColDef={{
        sortable: true,
        resizable: true,
        filterParams: {
          newRowsAction: 'keep',
          browserDatePicker: true
        }
      }}
    >
      <AgGridColumn
        field="#"
        sortable={false}
        resizable={false}
        width={60}
        valueGetter='node.rowIndex + 1'
      />
      <AgGridColumn
        field="Order_ID"
        headerName="Order ID"
      />
      <AgGridColumn
        field="Order_Invoice_Number"
        headerName="Invoice Number"
      />
      <AgGridColumn
        enableRowGroup
        field="Order_Date"
        headerName="Date"
      />
      <AgGridColumn
        enableValue
        field="Order_Shipping_Amount"
        headerName="Shipping Amount"
      />
      <AgGridColumn
        enableValue
        field="Order_Total_Amount"
        headerName="Total Amount"
      />
    </AgGridReact>
  )
}
```

</details>

### Server mode

Features in client mode:

- Fetch records
- Sorting
- Filter
- Grouping
- Aggregation
- Pivot

<details>
  <summary>Code example</summary>

```js
import OdataProvider from 'ag-grid-odata'
import { AgGridReact, AgGridColumn } from "@ag-grid-community/react"
import { AllModules } from "@ag-grid-enterprise/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css";

const onGridReady = (params) => {
    const gridApi = params.api;
    gridApi.setServerSideDatasource(
      new OdataProvider({
            callApi: (options) =>fetch(`yourOdataUrlService/EntitySet${options}`)
            .then(resp=>resp.json())
            .then(resp => { return resp.data });
        })
    )
  }

function(props) MyGrid(){
return (
    <AgGridReact
      modules={AllModules}
      //Enable server mode DataSource
      rowModelType='serverSide'
      // fetch 100 rows per at a time
      cacheBlockSize={100}
      onGridReady={onGridReady}
      rowGroupPanelShow='onlyWhenGrouping'
      pivotPanelShow='always'
      suppressDragLeaveHidesColumns
      suppressMakeColumnVisibleAfterUnGroup
      autoGroupColumnDef={{
        pinned: 'left'
      }}
      //Get Group count
      getChildCount={(data) => {
        return data && data.childCount;
      }}
      defaultColDef={{
        sortable: true,
        resizable: true,
        enablePivot: true,
        allowedAggFuncs: ['sum', 'min', 'max', 'avg', 'count'],
        filterParams: {
        newRowsAction: 'keep',
        browserDatePicker: true
        }
      }}
    >
      <AgGridColumn
        field="#"
        sortable={false}
        resizable={false}
        width={60}
        valueGetter='node.rowIndex + 1'
      />
      <AgGridColumn
        field="Order_ID"
        headerName="Order ID"
      />
      <AgGridColumn
        field="Order_Invoice_Number"
        headerName="Invoice Number"
      />
      <AgGridColumn
        enableRowGroup
        field="Order_Date"
        headerName="Date"
      />
      <AgGridColumn
        enableValue
        field="Order_Shipping_Amount"
        headerName="Shipping Amount"
      />
      <AgGridColumn
        enableValue
        field="Order_Total_Amount"
        headerName="Total Amount"
      />
    </AgGridReact>
  )
}
```

</details>

---
_Source: https://npm.io/package/ag-grid-odata · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._