---
title: "SSRM Datasource"
enterprise: true
framework: javascript
version: "36.1.0"
---

# SSRM Datasource

This section describes the Server-Side Datasource and demonstrates how it is used to load data from a server.

The Server-Side Row Model requires a datasource to fetch rows for the grid. When users scroll or perform grid operations such as sorting or grouping, more data will be requested via the datasource.

> **Note**
>
> Most of the Server-Side Row Model examples include a fake server that generates SQL to imitate how a real server might use the requests sent from the grid. These examples use [AlaSQL](http://alasql.org/) which is a JavaScript SQL database that works in browsers.
>
> However, note that the Server-Side Row Model does not impose any restrictions on the server-side technologies used.

## Enabling Server-Side Row Model

The [Client-Side Row Model](https://www.ag-grid.com/javascript-data-grid/row-models/#client-side) is the default Row Model. To use the SSRM instead, set the `rowModelType` as follows:

```js
const gridOptions = {
    rowModelType: 'serverSide',

    // other grid options ...
}
```

## Implementing the Server-Side Datasource

A datasource is used by the SSRM to fetch rows for the grid.

Properties available on the `IServerSideDatasource<TData = any>` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getRows` | `Function` |  |  | Grid calls `getRows` when it requires more rows as specified in the params. Params object contains callbacks for responding to the request. |
| `destroy` | `Function` |  |  | Optional method, if your datasource has state it needs to clean up. |

The following snippet shows a simple datasource implementation:

```js
const createDatasource = server => {
    return {
        // called by the grid when more rows are required
        getRows: params => {

            // get data for request from server
            const response = server.getData(params.request);

            if (response.success) {
                // supply rows for requested block to grid
                params.success({
                    rowData: response.rows
                });
            } else {
                // inform grid request failed
                params.fail();
            }
        }
    };
}
```

Notice that the datasource contains a single method `getRows(params)` which is called by the grid when more rows are required. A request is supplied in the `params` object which contains all the information required by the server to fetch data from the server.

Rows fetched from the server are supplied to the grid via `params.success({ rowData: rows })`.

## Registering the Datasource

The datasource is registered with the grid via either a) the grid property `serverSideDatasource` or b) the grid API.

Registering the datasource via grid options is done as follows:

```js
const gridOptions = {
    serverSideDatasource: myDatasource,

    // other grid options ...
}
```

Alternatively, the datasource can be registered via the grid API:

```js
api.setGridOption('serverSideDatasource', myDatasource);
```

The example below demonstrates loading rows using a simple SSRM Datasource. Note the following:

- The Server-Side Row Model is selected using the grid options property: `rowModelType = 'serverSide'`.
- The datasource is registered with the grid using: `api.setGridOption('serverSideDatasource', datasource)`.
- The `getRows(params)` defines the request parameters, with `params` containing a `startRow` and `endRow` that determines the range of rows to return. For example, if the `getRows` function is called with `startRow: 0` and `endRow: 100`, then the grid will expect a result with 100 rows (rows 0 to 99).
- When scrolling down there is a delay as more rows are fetched from the server.
- See the console below the example to view the request data sent by the grid for rows.

#### Simple Server-Side Datasource

```ts
import {
  GridApi,
  GridOptions,
  IServerSideDatasource,
  IServerSideGetRowsRequest,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  ServerSideRowModelModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", minWidth: 220 },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ],

  defaultColDef: {
    flex: 1,
    minWidth: 100,
    sortable: false,
  },

  // use the server-side row model instead of the default 'client-side'
  rowModelType: "serverSide",
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then(function (data) {
    // setup the fake server with entire dataset
    const fakeServer = createFakeServer(data);

    // create datasource with a reference to the fake server
    const datasource = createServerSideDatasource(fakeServer);

    // register the datasource with the grid
    gridApi!.setGridOption("serverSideDatasource", datasource);
  });

function createServerSideDatasource(server: any): IServerSideDatasource {
  return {
    getRows: (params) => {
      console.log("[Datasource] - rows requested by grid: ", params.request);

      // get data for request from our fake server
      const response = server.getData(params.request);

      // simulating real server call with a 500ms delay
      setTimeout(() => {
        if (response.success) {
          // supply rows for requested block to grid
          params.success({ rowData: response.rows });
        } else {
          params.fail();
        }
      }, 500);
    },
  };
}

function createFakeServer(allData: any[]) {
  return {
    getData: (request: IServerSideGetRowsRequest) => {
      // in this simplified fake server all rows are contained in an array
      const requestedRows = allData.slice(request.startRow, request.endRow);

      return {
        success: true,
        rows: requestedRows,
      };
    },
  };
}
```

[Live example: Simple Server-Side Datasource](https://www.ag-grid.com/examples/server-side-model-datasource/simple/typescript)