AG Grid Pagination

Summary

AG Grid's Pagination works fully in AdapTable

AG Grid Pagination is a very popular option for heavily populated Grids.

It allows users to click between 'pages', rather than needing to scroll.

Pagination is also fully supported by AdapTable and works fully as expected.

Feedback

AdapTable does not provide any pagination-related features or options
If you would like to do something pagination-related in AG Grid but which is not possible, please contact us

Using AG Grid Pagination

Fork Fork

This demo shows Pagination with 10 rows per page
We have added a Column Filter on Language column so that initially there are 2 pages

Try It Out

Clear the filter on the Language column and note that there are now 3 pages
Switch to the Grouped Layout and note that only 1 page is required

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Pagination',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout', 'Export', 'ColumnFilter']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'Export'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language', 'license'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'license',
            'description',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          ColumnFilters: [
            {
              ColumnId: 'language',
              Predicates: [
                {
                  PredicateId: 'Is',
                  Inputs: ['JavaScript'],
                },
              ],
            },
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousAG Grid Cell Rendering NextDeveloper Tutorials

Framework: