Server-Side Row Model

Summary

Adaptable fully supports AG Grid's Server-Side Row Model (SSRM)
It provides functions to help the bespoke filtering and sorting which needs to be handed on the server

AG Grid provides a Server-Side Row Model option, designed for very large data requirements.

The stated purpose of the Server-Side Row Model is to:

allow applications to work with very large datasets by delegating grid operations such as grouping, sorting and pivoting to the server. The data is then lazy loaded from the server in blocks as the user browses through the data.

The Server-Side Row Model is incredibly powerful, enabling huge amounts of data to be viewed in the Grid without overwehelming browser memory and other resources.

Limitations

However the Server-Side Row Model does come with some important limitations which require a large amount of extra, bespoke, development.

The key limitations are that AG Grid (and AdapTable) will not automatically perform these Grid actions:

filtering
row grouping
sorting
pivoting

Instead it will hand off those tasks to the developer to perform on the server.

In many advanced use cases these limitations are unavoidable, and the SSRM remains the appropriate choice.

But we encounter many users who used the Server-Side Row Model when it was not needed, and the additional complexity of the solution outweighed any benefits.

Caution

Only use the Server-Side Row Module if you have more than 200,000 records and absolutely require it
Many of our clients tell us they ended up regretting the decision to use the Server-Side Row Model

Modern browsers are very powerful and AG Grid has excellent virtualisation; equally AdapTable is fast and performant and provides a huge range of out of the box features.

Hint

AdapTable offers DataSets (via the DataSet Module) for this very reason
It allows you still to provide very large data while continuing to enjoy the benefits of the Client Side Row Model

AG Grid Implementation

The key to configuring the Server Side Row Model in AG Grid is to provide a bespoke DataSource that implements the IServerSideDatasource interface.

This contains a function called getRows which is invoked by AG Grid each time that data needs to be retrieved.

In other words, any time the Grid is filtered, sorted, grouped, pivoted etc.

Deep Dive

Avoiding Repeated getRows calls in Server-Side Row Model

The function receives a params object of type IServerSideGetRowsParams, which contains a number of properties of which the 2 most important are:

request (of type IServerSideGetRowsRequest) – containing details of the current grouping, sorting, filtering and pivoting in the Grid
success - the callback used when data is successfully retrieved from the server, passing it on to the grid

AdapTable Implementation

The AG Grid implementation described above is fully supported in AdapTable, and most of the code in a getRows implementation is unchanged when using AdapTable.

For example, the row grouping, aggregation and pivoting properties in the IServerSideGetRowsRequest object sent by AG Grid can be left unchanged and passed in to any bespoke server implementation.

However there are 2 areas where AdapTable users will likely want to supplement the data provided by AG Grid:

filtering - the filterModel prop in IServerSideGetRowsRequest does not take account of AdapTable's Column Filters (which use Predicates) and Grid Filter (which leverages Expressions)
sorting - the the sortModel prop in IServerSideGetRowsRequest might need to be supplemented by any AdapTable Custom Sorts

Hint

AdapTable supports this via 2 functions provided in the State API section of Adaptable API
getAdaptableFilterState and getAdaptableSortState return details of AdapTable's current filtering and sorting

Examples

The example below (and all other examples in this section) shows AdapTable with an AG Grid instance that is using the Server-Side Row Model.

All the examples share similar code which:

implements the IServerSideDatasource interface with a getRows function that adds filtering and custom sorting (leveraging the 2 functions described above)
contains a rough and ready mock server implementation (using SQL – source code here) which mimics what is required on the server
uses the same data which AG Grid uses for its nodejs documentation

Caution

The code used in these examles is for reference purposes only - please note that it is not production ready!

Find Out More

See the standalone version of this demo (with full source code) which provides more detailed notes

Server-Side Row Model

Fork Fork

The example shows AdapTable using the Server-Side Row Model (based off this example)
It contains a number of server-related features, which are explained in more detail in other pages in this section, including:
- Filtering
- Evaluating Expressions
- Exporting
- Pivoting
- Sorting
- Formatting and Styling
- Row Grouping
Note: Each time we retrieve data, apply a filter or sort the Grid, we output the SQl as a System Status Message

Try It Out

Apply a Filter (e.g. type in 4 into the Gold Column Filter Bar) and see how the data is refetched
Open the System Status Popup (via Configure button) to see all the messages that have been sent - click the ellipsis to see the full SQL sent

import {
  AdaptableOptions,
  BooleanFunctionName,
  CustomInFilterValuesContext,
  DefaultPredicateFilterContext,
  ModuleExpressionFunctionsContext,
} from '@adaptabletools/adaptable';

const API_BASE: string = 'https://serverside-demo.adaptabletools.com/.netlify/functions/athletes'!;

const supportedQueryBooleanOperators: BooleanFunctionName[] = [
  'EQ',
  'NEQ',
  'GT',
  'LT',
  'GTE',
  'LTE',
  'AND',
  'OR',
  'NOT',
  'BETWEEN',
  'IN',
  'CONTAINS',
  'STARTS_WITH',
  'ENDS_WITH',
];

export const getDistinctColumnValues = async (columnId: string) => {
  const jsonResponse = await fetch(
    `${API_BASE}/permitted-values?columnId=${columnId}`
  );
  return jsonResponse.json();
};

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'Server-Side Row Model',
  predicateOptions: {
    customPredicateDefs: [
      // The custom predicate is handled on the server :  return `gold > 3 OR (gold + silver + bronze) > 3`;
      {
        id: 'superstar',
        label: 'Superstar',
        columnScope: {ColumnIds: ['athlete']},
        moduleScope: ['columnFilter'],
        handler: () => true,
      },
    ],
  },
  expressionOptions: {
    moduleExpressionFunctions: (context: ModuleExpressionFunctionsContext) => {
      if (context.module === 'GridFilter') {
        return {
          systemBooleanFunctions: supportedQueryBooleanOperators,
          systemScalarFunctions: ['COL', 'IS_BLANK'],
          customBooleanFunctions: {
            FROM_EUROPE: {
              // handled on the server
              handler: () => null,
              returnType: 'boolean',
              description: 'Returns true if the athlete is from Europe',
              signatures: ['FROM_EUROPE'],
            },
          },
          systemAggregatedBooleanFunctions: ['COL'],
          systemAggregatedScalarFunctions: ['COL'],
          systemObservableFunctions: ['COL'],
        };
      }
      return;
    },
  },
  filterOptions: {
    customInFilterValues: async (context: CustomInFilterValuesContext) => {
      const columnId = context.column.columnId;
      const allColumnValues = await getDistinctColumnValues(columnId);

      const inFilterValues = allColumnValues.map((item: any) => ({
        label: item.value,
        value: item.value,
      }));
      return {
        values: inFilterValues,
      };
    },
    columnFilterOptions: {
      manuallyApplyColumnFilter: true,
      defaultTextColumnFilter: (context: DefaultPredicateFilterContext) => {
        return context.column.columnId == 'athlete' ? 'In' : 'Contains';
      },
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Main',
          Toolbars: ['GridFilter', 'SystemStatus'],
        },
      ],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'SSRM Layout',
      Layouts: [
        {
          Name: 'SSRM Layout',
          TableColumns: [
            'athlete',
            'gold',
            'silver',
            'bronze',
            'country',
            'sport',
            'year',
          ],
          ColumnSizing: {
            athlete: {Width: 175},
            bronze: {Width: 100},
            country: {Width: 125},
            gold: {Width: 100},
            silver: {Width: 100},
            sport: {Width: 175},
            year: {Width: 115},
          },
        },
      ],
    },

    NamedQuery: {
      NamedQueries: [
        {
          Name: 'US Golds',
          BooleanExpression: '[country]="United States" AND [gold] > 1',
        },
      ],
    },
  },
};

PreviousTechnical Reference NextFiltering

Framework: