Search results

Customize Pager DropDown

To customize default values of pager dropdown, you need to define pageSizes as array of strings.

Source
Preview
App.tsx
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Page, PageSettingsModel } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import './App.css';
import { data } from './datasource';

export default class App extends React.Component<{}, {}> {
  public pageOptions: PageSettingsModel = {pageSizes: ["5", "10", "All"]};
  public render() {
    return <GridComponent dataSource={data} allowPaging={true} pageSettings={this.pageOptions} height={273}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
        <ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
        <ColumnDirective field='Freight' headerText='Freight' width='120' format="C2" textAlign="Right"/>
        <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
      </ColumnsDirective>
      <Inject services={[Page]} />
    </GridComponent>
  }
};