Creating Filterable Row Styles

Feedback

This Blog post, and accompanying demo, was inspired by an AdapTable Help Ticket
If you have an AdapTable or AG Grid use case that you are struggling to meet, please contact us

Our User's Question

We were recently contacted by an AdapTable user with an interesting request.

She asked how she could achieve the following 2-step process in AG Grid:

enable run-time users to create full-row styles (using a custom Rule)
help these users easily to filter the Grid using the created styles

Our Solution and Demo

Use Named Queries to Filter by Styles (v21)

In response, we provide a demo illustrating how this is possible using these AdapTable functions:

Named Queries (wrapping AdapTableQL Expressions)
Grid Filter
Conditional Styles
Custom Column Menu and Context Menu Items
Custom Toolbar displaying Adaptable Buttons
Adaptable API

Important

Our demo uses only existing AdapTable functionality, UI components and API methods

Use Named Queries to Filter by Styles

Fork Fork

The Grid contains 3 full row Conditional Styles
Clicking a Dashboard button (or selecting a custom Column or Context Menu Item) will filter the Grid by that Style

import {
  AdaptableOptions,
  CustomColumnMenuContext,
  CustomContextMenuContext,
  NamedQuery,
  UserColumnMenuItem,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Filter By Style',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'filter_buttons',
        title: 'Filter Buttons',
      },
    ],
  },
  columnMenuOptions: {
    customColumnMenu: (context: CustomColumnMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      const queries = adaptableApi.namedQueryApi.getNamedQueries();
      const submMenuItems: UserColumnMenuItem[] = [];
      queries.forEach((query: NamedQuery) => {
        const subMenuItem: UserColumnMenuItem = {
          menuType: 'User',
          label: query.Name,
          onClick: () =>
            adaptableApi.filterApi.gridFilterApi.setGridFilterExpressionUsingNamedQuery(
              query
            ),
        };
        submMenuItems.push(subMenuItem);
      });

      const filterByStyleMenuItem: UserColumnMenuItem = {
        menuType: 'User',
        label: 'Filter By',
        icon: {
          name: 'filter',
        },
        subMenuItems: submMenuItems,
      };

      return [
        filterByStyleMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        adaptableApi,
      } = context;

      let framework: string = context.rowNode.data['name'];
      const foundQuery = adaptableApi.namedQueryApi
        .getNamedQueries()
        .find((nq: NamedQuery) => nq.BooleanExpression.includes(framework));

      if (!foundQuery) {
        return adaptableApi.contextMenuApi.createDefaultMenuStructure(context);
      }

      const filterByStyleMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label: 'Filter By ' + foundQuery?.Name,
        icon: {
          name: 'filter',
        },
        onClick: () =>
          adaptableApi.filterApi.gridFilterApi.setGridFilterExpressionUsingNamedQuery(
            foundQuery
          ),
      };

      return [
        filterByStyleMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Dashboard: {
      PinnedToolbars: ['filter_buttons'],
      ModuleButtons: ['NamedQuery', 'FormatColumn', 'SettingsPanel'],
    },
    NamedQuery: {
      NamedQueries: [
        {
          Name: 'Frequently Used',
          BooleanExpression:
            '[name] IN ("react", "angular", "vue", "preact", "aurelia", "next.js", "stencil", "solid")',
        },
        {
          Name: 'Occasional Usage',
          BooleanExpression:
            '[name] IN ( "meteor", "ember.js",  "alpine", "jquery", "redwood", "riot")',
        },
        {
          Name: 'Rarely Used',
          BooleanExpression:
            '[name] IN ("svelte", "lit",  "mithril.js", "stimulus", "cyclejs", "polymer","quasar", "nuxt.js")',
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'style-frequently-used',
          Scope: {All: true},
          Rule: {
            BooleanExpression: 'QUERY("Frequently Used")',
          },
          Style: {
            ForeColor: 'Black',
            BackColor: 'rgb(196, 242,196)',
          },
        },
        {
          Name: 'style-occasional-usage',
          Scope: {All: true},
          Rule: {
            BooleanExpression: 'QUERY("Occasional Usage")',
          },
          Style: {
            ForeColor: 'Black',
            BackColor: 'rgb(245, 214,158)',
          },
        },
        {
          Name: 'style-rarely-used',
          Scope: {All: true},
          Rule: {
            BooleanExpression: 'QUERY("Rarely Used")',
          },
          Style: {
            ForeColor: 'White',
            BackColor: 'rgb(240, 79,20)',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'week_issue_change',
            'github_watchers',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
          ],
          ColumnSorts: [
            {
              ColumnId: 'name',
              SortOrder: 'Asc',
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Named Queries

The key is to leverage Named Queries, a powerful, and often under-used, AdapTable feature.

As the name imples, Named Queries are simply named AdapTableQL Boolean Expressions.

Note

By giving the Query a Name, it can easily be shared and re-used in multiple modules (see below)

In our example we create 3 Named Queries, each of which groups a set of Frameworks.

Hint

The Named Queries Expressions use the AdapTableQL IN Expression Function

Three Named Queries: 'Frequently Used', 'Occasional Usage' and 'Rarely Used'

We then re-use each Named Query in a number of ways.

Conditional Styles

We configure a separate full-row Conditional Style for each Named Query.

Each Conditional Style Rule wraps a different Named Query and provides a distinct style.

Hint

The Conditional Style expressions themselves are very straightforward
They simply leverage the AdaptableQL QUERY expression function which wraps a Named Query

Rule: {
    BooleanExpression: 'QUERY("Frequently Used")',
},

We create 3 Conditional Styles, one for each Named Query

UI Components

Next we leverage 3 of the UI components provided by AdapTable.

We provide a Custom Column Menu Item in each Column Menu.

The Menu Item lists all the Named Queries, as sub menu items, and then filters the Grid using the value selected.

The 'Filter By' Custom Column Menu Item filters the Grid by Named Query

We also provide a Custom Context Menu Item in each Grid Cell.

The Context Menu Item works out which Named Query is associated with that Grid Cell's row.

When the menu item is selected, it filters the Grid by that Named Query.

The 'Filter By xxx' Custom Context Menu Item filters the Grid by Named Query for that row

Dashhboard Toolbars and Buttons

Finally, we create a Custom Toolbar to display in the Dashboard.

We dynamically render an Adaptable Button for each Named Query.

When the Button is clicked, we filter the Grid by that Named Query.

We also provide a Clear Filter Button to remove any filtering.

Important

Because we want to create the Buttons dynamically we don't configure them in Dashboard Options
Instead we create them on the fly by subscribing to 2 of the most frequently used Adaptable Events:
- Adaptable Ready - to create the buttons when AdapTable initialises for the first time
- Adaptable State Changed - to recreate if Format Columns or Named Queries change in State

Grid Filter

The last element in our demo is the Grid Filter - a powerful, cross-column filtering module.

Note

The Grid Filter runs in parallel with Column Filters, enabling the richest DataGrid functionality available

At its heart, the Grid Filter is an intuitive wrapper around an AdapTableQL Boolean Expression.

This makes it trivial to filter the Grid using our Named Queries.

Each time the user selects a custom Menu Option, or clicks a Dashboard Button, the onClick functions simply create, and set, a new Grid Filter Expression dynamically.

Hint

We leverage the useful setGridFilterExpressionUsingNamedQuery function in Grid Filter Api:

gridFilterApi.setGridFilterExpressionUsingNamedQuery(query);

We add Grid Filter Toolbar to Dashboard to show the Grid Filter Expression dynamically created

Extensibility

As noted above, we create, and display the Dashboard Buttons dynamically.

This provides our demo with one big advantage: each time we create a new Format Column which wraps a Named Query, a new Dashboard button will automatically appear.

Note

In our demo we deliberately leave 3 Frameworks without a Name: backbone, gatsby & knockout
Below we create a new Named Query, and associated Style, and a new Button dynamically appears

Creating Filterable Row Styles

Feedback

Our User's Question

Our Solution and Demo

Important

Named Queries

Note

Hint

Conditional Styles

Hint

UI Components

Column Menu

Context Menu

Dashhboard Toolbars and Buttons

Important

Grid Filter

Note

Hint

Extensibility

Note

AdapTable Resources