---
title: "SSRM Datasource"
enterprise: true
framework: react
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/react-data-grid/row-models/#client-side) is the default Row Model. To use the SSRM instead, set the `rowModelType` as follows:

```jsx
const rowModelType = 'serverSide';

<AgGridReact rowModelType={rowModelType} />
```

## Implementing the Server-Side Datasource

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

Properties available on the `IServerSideDatasource&lt;TData = any&gt;` 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:

```jsx
const serverSideDatasource = myDatasource;

<AgGridReact serverSideDatasource={serverSideDatasource} />
```

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

```jsx
gridApi.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

```tsx
("use client");

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IServerSideDatasource,
  IServerSideGetRowsRequest,
  ModuleRegistry,
  RowModelType,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  ServerSideRowModelModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  ServerSideRowModelModule,
];

const createServerSideDatasource: (server: any) => IServerSideDatasource = (
  server: any,
) => {
  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,
      };
    },
  };
}

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 220 },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
      sortable: false,
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: IOlympicData[]) => {
        // 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
        params.api!.setGridOption("serverSideDatasource", datasource);
      });
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            rowModelType={"serverSide"}
            onGridReady={onGridReady}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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