Backend API
import React, { useCallback, useState } from 'react';
import DataGrid, { Scrolling, Pager, Paging } from 'devextreme-react/data-grid';
import type { DataGridTypes } from 'devextreme-react/data-grid';
import type { PagerPageSize } from 'devextreme-react/common/grids';
import type { DisplayMode } from 'devextreme-react/common';
import SelectBox from 'devextreme-react/select-box';
import CheckBox from 'devextreme-react/check-box';
import { generateData, displayModeLabel } from './data.ts';
const displayModes = [{ text: 'Display Mode \'full\'', value: 'full' }, { text: 'Display Mode \'compact\'', value: 'compact' }];
const allowedPageSizes: (PagerPageSize | number)[] = [5, 10, 'all'];
const data = generateData(100000);
const customizeColumns = (columns: DataGridTypes.Column[]) => { columns[0].width = 70; };
const App = () => {
const [displayMode, setDisplayMode] = useState<DisplayMode>('full');
const [showPageSizeSelector, setShowPageSizeSelector] = useState(true);
const [showInfo, setShowInfo] = useState(true);
const [showNavButtons, setShowNavButtons] = useState(true);
const displayModeChange = useCallback((value) => {
setDisplayMode(value);
}, []);
const showPageSizeSelectorChange = useCallback((value) => {
setShowPageSizeSelector(value);
}, []);
const showInfoChange = useCallback((value) => {
setShowInfo(value);
}, []);
const showNavButtonsChange = useCallback((value) => {
setShowNavButtons(value);
}, []);
const isCompactMode = useCallback(() => displayMode === 'compact', [displayMode]);
return (
<div>
<DataGrid
id='gridContainer'
dataSource={data}
keyExpr="id"
showBorders={true}
customizeColumns={customizeColumns}
>
<Scrolling rowRenderingMode='virtual'></Scrolling>
<Paging defaultPageSize={10} />
<Pager
visible={true}
allowedPageSizes={allowedPageSizes}
displayMode={displayMode}
showPageSizeSelector={showPageSizeSelector}
showInfo={showInfo}
showNavigationButtons={showNavButtons} />
</DataGrid>
<div className='options'>
<div className='caption'>Options</div>
<div className='option-container'>
<div className='option'>
<SelectBox
id='displayModes'
items={displayModes}
displayExpr='text'
inputAttr={displayModeLabel}
valueExpr='value'
value={displayMode}
onValueChange={displayModeChange} />
</div>
<div className='option'>
<CheckBox
id='showPageSizes'
text='Show Page Size Selector'
value={showPageSizeSelector}
onValueChange={showPageSizeSelectorChange} />
</div>
<div className='option'>
<CheckBox
id='showInfo'
text='Show Info Text'
value={showInfo}
onValueChange={showInfoChange} />
</div>
<div className='option'>
<CheckBox
id='showNavButtons'
text='Show Navigation Buttons'
value={showNavButtons}
onValueChange={showNavButtonsChange}
disabled={isCompactMode()} />
</div>
</div>
</div>
</div>
);
};
export default App;
import React, { useCallback, useState } from 'react';
import DataGrid, { Scrolling, Pager, Paging } from 'devextreme-react/data-grid';
import SelectBox from 'devextreme-react/select-box';
import CheckBox from 'devextreme-react/check-box';
import { generateData, displayModeLabel } from './data.js';
const displayModes = [
{ text: "Display Mode 'full'", value: 'full' },
{ text: "Display Mode 'compact'", value: 'compact' },
];
const allowedPageSizes = [5, 10, 'all'];
const data = generateData(100000);
const customizeColumns = (columns) => {
columns[0].width = 70;
};
const App = () => {
const [displayMode, setDisplayMode] = useState('full');
const [showPageSizeSelector, setShowPageSizeSelector] = useState(true);
const [showInfo, setShowInfo] = useState(true);
const [showNavButtons, setShowNavButtons] = useState(true);
const displayModeChange = useCallback((value) => {
setDisplayMode(value);
}, []);
const showPageSizeSelectorChange = useCallback((value) => {
setShowPageSizeSelector(value);
}, []);
const showInfoChange = useCallback((value) => {
setShowInfo(value);
}, []);
const showNavButtonsChange = useCallback((value) => {
setShowNavButtons(value);
}, []);
const isCompactMode = useCallback(() => displayMode === 'compact', [displayMode]);
return (
<div>
<DataGrid
id="gridContainer"
dataSource={data}
keyExpr="id"
showBorders={true}
customizeColumns={customizeColumns}
>
<Scrolling rowRenderingMode="virtual"></Scrolling>
<Paging defaultPageSize={10} />
<Pager
visible={true}
allowedPageSizes={allowedPageSizes}
displayMode={displayMode}
showPageSizeSelector={showPageSizeSelector}
showInfo={showInfo}
showNavigationButtons={showNavButtons}
/>
</DataGrid>
<div className="options">
<div className="caption">Options</div>
<div className="option-container">
<div className="option">
<SelectBox
id="displayModes"
items={displayModes}
displayExpr="text"
inputAttr={displayModeLabel}
valueExpr="value"
value={displayMode}
onValueChange={displayModeChange}
/>
</div>
<div className="option">
<CheckBox
id="showPageSizes"
text="Show Page Size Selector"
value={showPageSizeSelector}
onValueChange={showPageSizeSelectorChange}
/>
</div>
<div className="option">
<CheckBox
id="showInfo"
text="Show Info Text"
value={showInfo}
onValueChange={showInfoChange}
/>
</div>
<div className="option">
<CheckBox
id="showNavButtons"
text="Show Navigation Buttons"
value={showNavButtons}
onValueChange={showNavButtonsChange}
disabled={isCompactMode()}
/>
</div>
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
let s = 123456789;
function random() {
s = (1103515245 * s + 12345) % 2147483647;
return s % (10 - 1);
}
export function generateData(count: number) {
let i;
const surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter'];
const names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty'];
const gender = ['Male', 'Female'];
const items: ({ id: number; firstName: string; lastName: string; gender: string; birthDate: Date; })[] = [];
const startBirthDate = Date.parse('1/1/1975');
const endBirthDate = Date.parse('1/1/1992');
for (i = 0; i < count; i += 1) {
const birthDate = new Date(startBirthDate + Math.floor(
(random() * (endBirthDate - startBirthDate)) / 10,
));
birthDate.setHours(12);
const nameIndex = random();
const item = {
id: i + 1,
firstName: names[nameIndex],
lastName: surnames[random()],
gender: gender[Math.floor(nameIndex / 5)],
birthDate,
};
items.push(item);
}
return items;
}
export const displayModeLabel = { 'aria-label': 'Refresh Mode' };
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
'anti-forgery:': '../../../../shared/anti-forgery/',
},
defaultExtension: 'js',
map: {
'anti-forgery': 'anti-forgery:fetch-override.js',
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.8/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.25/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.67/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
window.process = {
env: {
NODE_ENV: 'production',
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
let s = 123456789;
function random() {
s = (1103515245 * s + 12345) % 2147483647;
return s % (10 - 1);
}
export function generateData(count) {
let i;
const surnames = [
'Smith',
'Johnson',
'Brown',
'Taylor',
'Anderson',
'Harris',
'Clark',
'Allen',
'Scott',
'Carter',
];
const names = [
'James',
'John',
'Robert',
'Christopher',
'George',
'Mary',
'Nancy',
'Sandra',
'Michelle',
'Betty',
];
const gender = ['Male', 'Female'];
const items = [];
const startBirthDate = Date.parse('1/1/1975');
const endBirthDate = Date.parse('1/1/1992');
for (i = 0; i < count; i += 1) {
const birthDate = new Date(
startBirthDate + Math.floor((random() * (endBirthDate - startBirthDate)) / 10),
);
birthDate.setHours(12);
const nameIndex = random();
const item = {
id: i + 1,
firstName: names[nameIndex],
lastName: surnames[random()],
gender: gender[Math.floor(nameIndex / 5)],
birthDate,
};
items.push(item);
}
return items;
}
export const displayModeLabel = { 'aria-label': 'Refresh Mode' };
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#gridContainer {
max-height: 800px;
}
.options {
margin-top: 20px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: relative;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option-container {
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.option {
margin-top: 10px;
display: flex;
align-items: center;
}
.option-caption {
white-space: nowrap;
margin: 0 8px;
}
The built-in pager contains the following elements:
-
Page navigator
Enables page navigation. -
Page size selector
Changes the page size. To display this element, enable the showPageSizeSelector property. You can also define allowed page sizes and specify the initial page size. -
Page information
Displays the current page number and total record count. To display page information, enable the showInfo property. You can customize this information text as needed.
The built-in pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager uses less screen space. In adaptive mode, the DataGrid automatically chooses between full and compact modes based on the component width.
The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone Pagination component to navigate the DataGrid. For additional information, refer to the following example: DevExtreme DataGrid - Display a Pager Above the Grid.