@ag-grid-enterprise/server-side-row-model

What is @ag-grid-enterprise/server-side-row-model?

@ag-grid-enterprise/server-side-row-model is a package that provides advanced data management capabilities for AG Grid, specifically designed for handling large datasets with server-side operations. It allows for efficient data loading, filtering, sorting, and pagination directly from the server, making it ideal for enterprise-level applications.

What are @ag-grid-enterprise/server-side-row-model's main functionalities?

Server-Side Data Loading

This feature allows the grid to load data from a server in chunks, which is useful for handling large datasets. The `getRows` method is called whenever the grid needs more rows, and it fetches data from a server endpoint.

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideDatasource: {
    getRows: (params) => {
      fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(params.request),
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response => response.json())
      .then(data => params.successCallback(data.rows, data.lastRow))
      .catch(error => params.failCallback());
    }
  }
};

Server-Side Filtering

This feature allows the grid to apply filters on the server side. The `filterModel` is sent to the server, which then returns the filtered data.

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideDatasource: {
    getRows: (params) => {
      const request = {
        ...params.request,
        filterModel: params.request.filterModel
      };
      fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(request),
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response => response.json())
      .then(data => params.successCallback(data.rows, data.lastRow))
      .catch(error => params.failCallback());
    }
  }
};

Server-Side Sorting

This feature allows the grid to sort data on the server side. The `sortModel` is sent to the server, which then returns the sorted data.

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideDatasource: {
    getRows: (params) => {
      const request = {
        ...params.request,
        sortModel: params.request.sortModel
      };
      fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(request),
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response => response.json())
      .then(data => params.successCallback(data.rows, data.lastRow))
      .catch(error => params.failCallback());
    }
  }
};

Server-Side Pagination

This feature allows the grid to handle pagination on the server side. The `startRow` and `endRow` parameters are sent to the server, which then returns the appropriate subset of data.

const gridOptions = {
  rowModelType: 'serverSide',
  serverSideDatasource: {
    getRows: (params) => {
      const request = {
        ...params.request,
        startRow: params.request.startRow,
        endRow: params.request.endRow
      };
      fetch('/api/data', {
        method: 'POST',
        body: JSON.stringify(request),
        headers: { 'Content-Type': 'application/json' }
      })
      .then(response => response.json())
      .then(data => params.successCallback(data.rows, data.lastRow))
      .catch(error => params.failCallback());
    }
  }
};

Other packages similar to @ag-grid-enterprise/server-side-row-model

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It provides hooks for managing data, sorting, filtering, and pagination. Unlike @ag-grid-enterprise/server-side-row-model, react-table is more focused on client-side operations and does not provide built-in server-side row model capabilities.

handsontable

handsontable is a JavaScript/HTML5 data grid component with Excel-like features. It supports large datasets, filtering, sorting, and pagination. While it offers some server-side capabilities, it is not as specialized in server-side row models as @ag-grid-enterprise/server-side-row-model.

devextreme-react

devextreme-react is a set of high-performance data grid components for React. It supports server-side data operations, including sorting, filtering, and pagination. However, it is part of a larger suite of UI components and may not be as focused on server-side row models as @ag-grid-enterprise/server-side-row-model.

README

AG Grid Enterprise

This project contains AG Grid Enterprise features.

See www.ag-grid.com for an overview and full documentation.

Frameworks Supported

Framework specific Getting Started guides:

Angular | Javascript | React | TypeScript | VueJS

This is not free software, this software is covered by copyright and to use you need a commercial license.

Please see files: LICENSE.md SUPPORT_AND_MAINTENANCE.md

Issue Reporting

If you are an Enterprise customer (or are evaluating AG Grid Enterprise) and wish to report a Bug or raise a new Feature Request please do so on our Support Portal.

To Sign Up: Send an email to [e-mail] with your license key