AdapTable Version:

Framework:

Server-Side Row Model - Filtering

Summary

Both Column Filters and the Grid Filter need to be evaluated remotely when using Server-Side Row Model
AdapTable provides functions that helps developers retrieve latest Filter state (to pass in to server)
It also provides functions which can manage the complexity of both Predicates and Expressions

When using the Server-Side Row Model, AG Grid will not perform any filtering.

Note

Quick Search works fully in Server-Side Row Model, both for data already in the Grid and new data as it is fetched
However Quick Search as Filter will not work (unless you implement it yourself)

Instead AG Grid hands off those tasks to developer to perform on the server.

Caution

When using the Server-Side Row Model, it is the developer's responsibility to perform the actual filtering on the server

In practice this requires developers to provide server equivalents of 2 AdapTable filtering mechanisms:

The Predicate-evaluation for Column Filters
An equivalent of AdapTableQL to evaluate the Grid Filter

Find Out More

AdaptableQL Server Evaluation provides instructions for managing complexity and scope of Predicates & Expressions

Getting Filter State

When using the Server-Side Row Model, you need to fetch the current filter (and sort) state from AdapTable inside the getRows function.

Note

The Grid Filter Applied and Column Filter Applied Events still fire, but are rarely subscribed to when using the SSRM

This is most easily done through the getAdaptableFilterState function in the State API section of Adaptable API.

It returns an AdaptableFilterState object defined as follows:

Property	Description
columnFilterDefs	Column Filter definitions for currently applied Column Filters
columnFilters	Currently applied Column Filters
gridFilter	Current Grid Filter
gridFilterAST	AST for Current Grid Filter

Columns Filters

Column Filters can still be applied when using the Server-Side Row Model, but instead of the Predicates being automatically evaluated by AdapTable, they are evaluated by developers on the server.

Hint

This can also include Custom Filters, which will also be evaluated remotely in a bespoke implementation

In Filter Values

AdapTable provides an In Filter, which allows users to select from a list of values for the Column.

By default, AdapTable simply lists all distinct values currently visible in the Grid's data source for the Column.

This is fine when using the Client-Side Row Model - as all data has been loaded - but can be unsatisfactory for the Server-Side Row Model, since it can result in a unnecessarily reduced list of values.

For this reason it is common when using the SSRM to implement the customInFilterValues property in Filter Options in order to provide a fuller list of values.

Hint

This is often coupled with Suppressing Search in the In Filter so that the search can be evaluated on the Server
Another common practice is turning on Manually Applying Filters so just server invocation is made with all selected options

Find Out More

See Guide to Using the In Filter for full details (and multiple demos)

Limiting Predicates

By default AdapTable will provide every relevant System Predicate in each column.

This means a bespoke server implementation will need to translate every predicate into something meaningful.

Accordingly, AdapTable allows developer to limit which System Predicates are available in order to make the server implementation more manageable.

SSRM - Column Filtering

Fork Fork

The example shows how AdapTable Column Filters can still be used while using Server-Side Row Model:
We get the current AdapTable Filter State and pass that to our mock server to evaluate
We add a Custom Filter Predicate called Superstar with Scope of Athlete column - and which also gets evaluated on the mock server (using rule: gold > 2 OR (gold + silver + bronze) > 3)
We also provide an implementation for customInFilterValues to control which values are displayed in the In Filter - this is also handled on our mock server
We turn on Manually Applying Filters so that only one call to the server made with all selections

Try It Out

Run a Filter (e.g 3 in Gold column) and note how new data is fetched from the server that matches the Filter
Run the Superstar Custom Filter on the Athlete column and note how our mock server evaluates it and returns the correct data
Run the In Filter on the Athlete column and note how the server returns details of all athletes on the server (not just those already loaded)

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

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

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

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'SSRM - Column Filtering',
  predicateOptions: {
    customPredicateDefs: [
      // The custom predicate is handled on the server
      // It returns `gold > 2 OR (gold + silver + bronze) > 3`;
      {
        id: 'superstar',
        label: 'Superstar',
        columnScope: {ColumnIds: ['athlete']},
        moduleScope: ['columnFilter'],
        handler: () => true,
      },
    ],
  },
  filterOptions: {
    customInFilterValues: async (context: CustomInFilterValuesContext) => {
      const columnId = context.column.columnId;
      const allColumnValues = await getDistinctColumnValues(columnId);

      const inFilterValues = allColumnValues.map(item => ({
        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: ['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},
          },
        },
      ],
    },
  },
};

Grid Filter

The Grid Filter can still be applied when using the Server-Side Row Model, but instead of AdapTableQL evaluating the Expression, it will be perfomed by developers on the server.

Hint

The Grid Filter can also include Custom Expression Functions provided by developers
These will also then need to be evaluated remotely in a bespoke implementation

Limiting Expression Complexity

By default AdapTable will provide every AdapTableQL Expression Functions in the Expression Editor.

This means bespoke server implementations will need to translate every Expression into something meaningful.

Accordingly, AdapTable allows developers to reduce Expression complexity in 2 ways in order to make the server implementation more manageable:

Limiting which Expressions are available (on a per Module basis if required)
Limiting which Columns can be included in a Query / Expression

SSRM - Grid Filter

Fork Fork

The example shows how the AdapTable Grid Filter can still be used while using Server-Side Row Model
We include 2 Named Queries which are evaluated on our mock server (and accessible from dropdown at end of toolbar):
- US Golds - returns rows where USA has > 1 gold
- European Athletes - returns rows where country is in Europe (and uses a Custom Boolean Expression Function, FROM_EUROPE, that is also evaluated on our mock server)
We have provided a reduced set of AdapTableQL Expression Functions (for Grid Filter only) to make translating Expressions on the Server easier:
- We pass a small, reduced, set of systemBooleanFunctions to Expression Options
- For all the other types of Expression Functions we only allow COL (which references a column) to be used

import {
  AdaptableOptions,
  BooleanFunctionName,
  CustomInFilterValuesContext,
  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: 'SSRM - Grid Filtering',
  expressionOptions: {
    moduleExpressionFunctions: (context: ModuleExpressionFunctionsContext) => {
      if (context.module === 'GridFilter') {
        return {
          systemBooleanFunctions: supportedQueryBooleanOperators,
          systemScalarFunctions: ['COL', 'IS_BLANK'],
          customBooleanFunctions: {
            FROM_EUROPE: {
              // handled on the server
              handler: () => true,
              category: 'Custom',
              isPredicate: true,
              returnType: 'boolean',
              description: 'Returns true if the country is from Europe',
              signatures: ['FROM_EUROPE([country]'],
            },
          },
          systemAggregatedBooleanFunctions: ['COL'],
          systemAggregatedScalarFunctions: ['COL'],
          systemObservableFunctions: ['COL'],
        };
      }
      return;
    },
  },
  filterOptions: {
    customInFilterValues: (context: CustomInFilterValuesContext) => {
      const columnId = context.column.columnId;
      return getDistinctColumnValues(columnId);
    },
  },
  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',
        },
        {
          Name: 'European Athletes',
          BooleanExpression: 'FROM_EUROPE([country])',
        },
      ],
    },
  },
};

Quick Search - to move

Deep Dive

How Does Quick Search Work?

PreviousServer-Side Row Model NextExporting

Framework: