AdapTable Performance

Summary

AdapTable is designed to work in even the most demanding data environments
This page demonstrates some ways of ensure AdapTable maintains good peformance even when using 'Big Data'

Big Data

AdapTable is designed to work seamlessly with very large data sets.

Hint

For grids with fewer than 100,000 rows we recommend using the Client-Side Row Model
For larger grids the Server-Side Row Model is required - also supported by AdapTable.

Displaying Big Data

Fork Fork

This demo loads 100,000 rows (and 20 columns)
We have deliberately added very few styles or formats to allow you to add your own objects and test performance

Performance Tips

We leverage the excellent visualisation provided by AG Grid to ensure that styles are only applied to currently visible cells and rows.

Here a few tips to improve the performance of AdapTable:

Use Quick Search as Filter very sparingly; but if used then look at leveraging AG Grid's Quick Filter Cache
Avoid using Badge Styles in cells which are updating regularly, and particularly if using Flashing

AdapTable Performance

Fork Fork

This demo also loads 100,000 rows (and 20 columns)
The Price and Amount columns are updated 400 times per second
We have added a number of style-related elements to the Grid:
- Custom Flashing Cells to the ticking Price and Amount columns
- A Conditional Style to the Total Value column (when > 80) - note that Total Value is a Calculated Column and also updates in real time
- A Row-based Conditional Style (Bold & Italic and Purple) where the Product Name is "Car" or "Bike"
- A Date Display Format for the Order Date and Due Date columns
- A Percent Bar Style to the Price Change column
- A Badge Style to Product Name column (with different style based on cell value)

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Performance',
  initialState: {
    Dashboard: {
      ModuleButtons: ['CalculatedColumn', 'SettingsPanel'],
    },
    Layout: {
      CurrentLayout: 'Table Layout',
      Layouts: [
        {
          Name: 'Table Layout',
          TableColumns: [
            'prodName',
            'company',
            'price',
            'priceChange',
            'amount',
            'total_value',
            'orderDate',
            'dueDate',
            'lastName',
            'firstName',
            'origin',
            'toAddress',
            'invoiceNum',
            'accountNum',
            'department',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-total_value',
          Scope: {
            ColumnIds: ['total_value'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'GreaterThan',
                Inputs: ['80'],
              },
            ],
          },
          RowScope: {
            ExcludeSummaryRows: true,
          },
          Style: {
            BackColor: '#99ffff',
          },
        },
        {
          Name: 'style-all',
          Style: {
            FontWeight: 'Bold',
            FontStyle: 'Italic',
            ForeColor: 'Purple',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: '[prodName] = "Car" OR [prodName] = "Bike"  ',
          },
        },
        {
          Name: 'formatColumn-orderDate',
          Scope: {
            ColumnIds: ['orderDate', 'dueDate'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'MMM do yyyy',
            },
          },
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'priceChange',
          PercentBarStyle: {
            RangeValueType: 'Number',
            CellRanges: [
              {
                Min: 0,
                Max: 30,
                Color: '#ff0000',
              },
              {
                Min: 30,
                Max: 50,
                Color: '#ffa500',
              },
              {
                Min: 50,
                Max: 200,
                Color: '#008000',
              },
            ],
          },
        },
        {
          ColumnId: 'prodName',
          BadgeStyle: {
            Badges: [
              {
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Car', 'Bike'],
                },
                Style: {
                  BackColor: 'DarkBlue',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Hat', 'Shoes', 'Gloves', 'Shirt', 'Pants'],
                },
                Style: {
                  BackColor: 'Brown',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
              {
                Style: {
                  BackColor: 'Purple',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Fish', 'Tuna'],
                },
              },
              {
                Style: {
                  BackColor: 'Green',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Computer', 'Mouse', 'Keyboard'],
                },
              },
              {
                Style: {
                  BackColor: 'Red',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
                Predicate: {
                  PredicateId: 'In',
                  Inputs: ['Pizza', 'Salad', 'Cheese', 'Sausages'],
                },
              },

              {
                Style: {
                  BackColor: 'Gray',
                  ForeColor: 'white',
                  BorderRadius: 6,
                },
              },
            ],
          },
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flashingCell-amount-anyChange',
          Scope: {
            ColumnIds: ['price', 'amount'],
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          DownChangeStyle: {
            BackColor: '#ff7591',
          },
          UpChangeStyle: {
            BackColor: '#32cd32',
          },
          NeutralChangeStyle: {
            BackColor: '#d3d3d3',
          },
          FlashDuration: 300,
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'total_value',
          Query: {
            ScalarExpression: '[price] * [amount]',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
          },
          FriendlyName: 'Total Value',
        },
      ],
    },
  },
};

PreviousMonitoring NextIntegrated Examples