---
title: "SSRM Datasource"
enterprise: true
framework: vue
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/vue-data-grid/row-models/#client-side) is the default Row Model. To use the SSRM instead, set the `rowModelType` as follows:
```ts
this.rowModelType = 'serverSide';
```
## 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:
```ts
this.serverSideDatasource = myDatasource;
```
Alternatively, the datasource can be registered via the grid API:
```ts
this.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
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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();
}
ModuleRegistry.registerModules([
ColumnsToolPanelModule,
ColumnMenuModule,
ContextMenuModule,
ServerSideRowModelModule,
]);
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,
};
},
};
}
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ field: "athlete", minWidth: 220 },
{ field: "country", minWidth: 200 },
{ field: "year" },
{ field: "sport", minWidth: 200 },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = ref({
flex: 1,
minWidth: 100,
sortable: false,
});
const rowModelType = ref("serverSide");
const rowData = ref(null);
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (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
params.api!.setGridOption("serverSideDatasource", datasource);
};
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
rowModelType,
rowData,
onGridReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Simple Server-Side Datasource](https://www.ag-grid.com/examples/server-side-model-datasource/simple/vue3)