React Pagination

DevExpress Pagination component allows users to navigate between pages and adjust page size at runtime. In this demo, users can browse through individual employee cards using the Pagination component.

To set up our Pagination component, specify the following options:

itemCount: the total number of elements in the target control.
pageSize: the number of items per page.
allowedPageSizes: available page size choices.
pageIndex: page displayed first.
showNavigationButtons: navigation button visibility.
showInfo: information pane visibility.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the Pagination features used.

TS JS

Backend API

import React, { useState } from 'react'; import Pagination from 'devextreme-react/pagination'; import EmployeeGallery from './EmployeesGallery.tsx'; import { employees } from './data.ts'; const PAGE_SIZES = [4, 6]; const App = () => { const [pageSize, setPageSize] = useState(4); const [pageIndex, setPageIndex] = useState(1); return ( <> <EmployeeGallery employees={employees} pageSize={pageSize} pageIndex={pageIndex} /> <Pagination showInfo showNavigationButtons allowedPageSizes={PAGE_SIZES} itemCount={employees.length} pageIndex={pageIndex} pageSize={pageSize} onPageIndexChange={setPageIndex} onPageSizeChange={setPageSize} /> </> ); }; export default App;

import React, { useState } from 'react'; import Pagination from 'devextreme-react/pagination'; import EmployeeGallery from './EmployeesGallery.js'; import { employees } from './data.js'; const PAGE_SIZES = [4, 6]; const App = () => { const [pageSize, setPageSize] = useState(4); const [pageIndex, setPageIndex] = useState(1); return ( <React.Fragment> <EmployeeGallery employees={employees} pageSize={pageSize} pageIndex={pageIndex} /> <Pagination showInfo showNavigationButtons allowedPageSizes={PAGE_SIZES} itemCount={employees.length} pageIndex={pageIndex} pageSize={pageSize} onPageIndexChange={setPageIndex} onPageSizeChange={setPageSize} /> </React.Fragment> ); }; export default App;

import React from 'react'; import { Employee } from './data'; interface EmployeeCardProps { employee: Employee; } const EmployeeCard = ({ employee }: EmployeeCardProps) => { return ( <div className="employees__card"> <div className="employees__img-wrapper"> <img className="employees__img" src={employee.Picture} alt={employee.FullName} /> </div> <div className="employees__info"> <div className="employees__info-row"> <span className="employees__info-label">Full Name:</span> <span className="employees__info-value">{employee.FullName}</span> </div> <div className="employees__info-row"> <span className="employees__info-label">Position:</span> <span className="employees__info-value">{employee.Title}</span> </div> <div className="employees__info-row"> <span className="employees__info-label">Phone:</span> <span className="employees__info-value">{employee.MobilePhone}</span> </div> </div> </div> ); }; export default EmployeeCard;

import React from 'react'; import EmployeeCard from './EmployeeCard.tsx'; import { Employee } from './data'; interface EmployeeGalleryProps { employees: Employee[]; pageSize: number; pageIndex: number; } const EmployeeGallery = ({ employees, pageSize, pageIndex }: EmployeeGalleryProps) => { const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six'; const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); return ( <div className={`employees ${cardsNumber}`}> {pageEmployees.map((employee) => ( <EmployeeCard key={employee.ID} employee={employee} /> ))} </div> ); }; export default EmployeeGallery;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.querySelector('.container'), );

export interface Employee { ID: number; FullName: string; Title: string; Employee_Picture: string; Picture: string; MobilePhone: string; } export const employees: Employee[] = [ { ID: 1, FullName: 'John Heart', Title: 'CEO', Employee_Picture: '01.png', Picture: '../../../../images/employees/01.png', MobilePhone: '2135559392', }, { ID: 2, FullName: 'Samantha Bright', Title: 'COO', Employee_Picture: '30.png', Picture: '../../../../images/employees/30.png', MobilePhone: '2135552858', }, { ID: 3, FullName: 'Arthur Miller', Title: 'CTO', Employee_Picture: '10.png', Picture: '../../../../images/employees/10.png', MobilePhone: '3105558583', }, { ID: 4, FullName: 'Robert Reagan', Title: 'CMO', Employee_Picture: '03.png', Picture: '../../../../images/employees/03.png', MobilePhone: '8185552387', }, { ID: 5, FullName: 'Greta Sims', Title: 'HR Manager', Employee_Picture: '04.png', Picture: '../../../../images/employees/04.png', MobilePhone: '8185556546', }, { ID: 6, FullName: 'Brett Wade', Title: 'IT Manager', Employee_Picture: '05.png', Picture: '../../../../images/employees/05.png', MobilePhone: '6265550358', }, { ID: 7, FullName: 'Sandra Johnson', Title: 'Controller', Employee_Picture: '06.png', Picture: '../../../../images/employees/06.png', MobilePhone: '5625552082', }, { ID: 8, FullName: 'Ed Holmes', Title: 'Sales Manager', Employee_Picture: '11.png', Picture: '../../../../images/employees/11.png', MobilePhone: '3105551288', }, { ID: 9, FullName: 'Barb Banks', Title: 'Support Manager', Employee_Picture: '20.png', Picture: '../../../../images/employees/20.png', MobilePhone: '3105553355', }, { ID: 10, FullName: 'Kevin Carter', Title: 'Shipping Manager', Employee_Picture: '07.png', Picture: '../../../../images/employees/07.png', MobilePhone: '2135552840', }, { ID: 11, FullName: 'Cindy Stanwick', Title: 'HR Assistant', Employee_Picture: '08.png', Picture: '../../../../images/employees/08.png', MobilePhone: '8185556655', }, { ID: 12, FullName: 'Sammy Hill', Title: 'Sales Assistant', Employee_Picture: '12.png', Picture: '../../../../images/employees/12.png', MobilePhone: '6265557292', }, { ID: 13, FullName: 'Davey Jones', Title: 'Shipping Assistant', Employee_Picture: '13.png', Picture: '../../../../images/employees/13.png', MobilePhone: '6265550281', }, { ID: 14, FullName: 'Victor Norris', Title: 'Shipping Assistant', Employee_Picture: '14.png', Picture: '../../../../images/employees/14.png', MobilePhone: '2135559278', }, { ID: 15, FullName: 'Mary Stern', Title: 'Shipping Assistant', Employee_Picture: '15.png', Picture: '../../../../images/employees/15.png', MobilePhone: '8185557857', }, { ID: 16, FullName: 'Robin Cosworth', Title: 'Shipping Assistant', Employee_Picture: '16.png', Picture: '../../../../images/employees/16.png', MobilePhone: '8185550942', }, { ID: 17, FullName: 'Kelly Rodriguez', Title: 'Support Assistant', Employee_Picture: '17.png', Picture: '../../../../images/employees/17.png', MobilePhone: '8185559248', }, { ID: 18, FullName: 'James Anderson', Title: 'Support Assistant', Employee_Picture: '18.png', Picture: '../../../../images/employees/18.png', MobilePhone: '3235554702', }, { ID: 19, FullName: 'Antony Remmen', Title: 'Support Assistant', Employee_Picture: '19.png', Picture: '../../../../images/employees/19.png', MobilePhone: '3105556625', }, { ID: 20, FullName: 'Olivia Peyton', Title: 'Sales Assistant', Employee_Picture: '09.png', Picture: '../../../../images/employees/09.png', MobilePhone: '3105552728', }, { ID: 21, FullName: 'Taylor Riley', Title: 'Network Admin', Employee_Picture: '21.png', Picture: '../../../../images/employees/21.png', MobilePhone: '3105557276', }, { ID: 22, FullName: 'Amelia Harper', Title: 'Network Admin', Employee_Picture: '22.png', Picture: '../../../../images/employees/22.png', MobilePhone: '2135554276', }, { ID: 23, FullName: 'Wally Hobbs', Title: 'Programmer', Employee_Picture: '23.png', Picture: '../../../../images/employees/23.png', MobilePhone: '8185558872', }, { ID: 24, FullName: 'Brad Jameson', Title: 'Programmer', Employee_Picture: '24.png', Picture: '../../../../images/employees/24.png', MobilePhone: '8185554646', }, { ID: 25, FullName: 'Karen Goodson', Title: 'Programmer', Employee_Picture: '25.png', Picture: '../../../../images/employees/25.png', MobilePhone: '6265550908', }, { ID: 26, FullName: 'Marcus Orbison', Title: 'Travel Coordinator', Employee_Picture: '26.png', Picture: '../../../../images/employees/26.png', MobilePhone: '2135557098', }, { ID: 27, FullName: 'Sandy Bright', Title: 'Benefits Coordinator', Employee_Picture: '27.png', Picture: '../../../../images/employees/27.png', MobilePhone: '8185550524', }, { ID: 28, FullName: 'Morgan Kennedy', Title: 'Graphic Designer', Employee_Picture: '28.png', Picture: '../../../../images/employees/28.png', MobilePhone: '8185558238', }, { ID: 29, FullName: 'Violet Bailey', Title: 'Jr Graphic Designer', Employee_Picture: '29.png', Picture: '../../../../images/employees/29.png', MobilePhone: '8185552478', }, { ID: 30, FullName: 'Ken Samuelson', Title: 'Ombudsman', Employee_Picture: '02.png', Picture: '../../../../images/employees/02.png', MobilePhone: '5625559282', }, { ID: 31, FullName: 'Nat Maguiree', Title: 'Trainer', Employee_Picture: '31.png', Picture: '../../../../images/employees/31.png', MobilePhone: '5625558377', }, { ID: 32, FullName: 'Bart Arnaz', Title: 'Director of Engineering', Employee_Picture: '32.png', Picture: '../../../../images/employees/32.png', MobilePhone: '7145552000', }, { ID: 33, FullName: 'Leah Simpson', Title: 'Test Coordinator', Employee_Picture: '33.png', Picture: '../../../../images/employees/33.png', MobilePhone: '5625595830', }, { ID: 34, FullName: 'Arnie Schwartz', Title: 'Engineer', Employee_Picture: '34.png', Picture: '../../../../images/employees/34.png', MobilePhone: '7145558882', }, { ID: 35, FullName: 'Billy Zimmer', Title: 'Engineer', Employee_Picture: '51.png', Picture: '../../../../images/employees/51.png', MobilePhone: '9095556939', }, { ID: 36, FullName: 'Samantha Piper', Title: 'Engineer', Employee_Picture: '35.png', Picture: '../../../../images/employees/35.png', MobilePhone: '3235554512', }, { ID: 37, FullName: 'Maggie Boxter', Title: 'Engineer', Employee_Picture: '36.png', Picture: '../../../../images/employees/36.png', MobilePhone: '7145557239', }, { ID: 38, FullName: 'Terry Bradley', Title: 'QA Engineer', Employee_Picture: '37.png', Picture: '../../../../images/employees/37.png', MobilePhone: '8055552788', }, { ID: 39, FullName: 'Gabe Jones', Title: 'Retail Coordinator', Employee_Picture: '38.png', Picture: '../../../../images/employees/38.png', MobilePhone: '3105555395', }, { ID: 40, FullName: 'Lucy Ball', Title: 'Sales Assistant', Employee_Picture: '39.png', Picture: '../../../../images/employees/39.png', MobilePhone: '3105553357', }, { ID: 41, FullName: 'Jim Packard', Title: 'Retail Sales Manager', Employee_Picture: '40.png', Picture: '../../../../images/employees/40.png', MobilePhone: '6615558224', }, { ID: 42, FullName: 'Hannah Brookly', Title: 'Online Sales Manager', Employee_Picture: '41.png', Picture: '../../../../images/employees/41.png', MobilePhone: '8055553627', }, { ID: 43, FullName: 'Harv Mudd', Title: 'Retail Sales Manager', Employee_Picture: '42.png', Picture: '../../../../images/employees/42.png', MobilePhone: '8315553895', }, { ID: 44, FullName: 'Clark Morgan', Title: 'Retail Sales Manager', Employee_Picture: '43.png', Picture: '../../../../images/employees/43.png', MobilePhone: '9255552525', }, { ID: 45, FullName: 'Todd Hoffman', Title: 'Retail Sales Manager', Employee_Picture: '44.png', Picture: '../../../../images/employees/44.png', MobilePhone: '9255553579', }, { ID: 46, FullName: 'Jackie Garmin', Title: 'Support Assistant', Employee_Picture: '45.png', Picture: '../../../../images/employees/45.png', MobilePhone: '2135551824', }, { ID: 47, FullName: 'Lincoln Bartlett', Title: 'Sales Assistant', Employee_Picture: '46.png', Picture: '../../../../images/employees/46.png', MobilePhone: '2135558272', }, { ID: 48, FullName: 'Brad Farkus', Title: 'Engineer', Employee_Picture: '47.png', Picture: '../../../../images/employees/47.png', MobilePhone: '2135553626', }, { ID: 49, FullName: 'Jenny Hobbs', Title: 'Shipping Assistant', Employee_Picture: '48.png', Picture: '../../../../images/employees/48.png', MobilePhone: '3105552668', }, { ID: 50, FullName: 'Dallas Lou', Title: 'Shipping Assistant', Employee_Picture: '49.png', Picture: '../../../../images/employees/49.png', MobilePhone: '2135558357', }, { ID: 51, FullName: 'Stu Pizaro', Title: 'Engineer', Employee_Picture: '50.png', Picture: '../../../../images/employees/50.png', MobilePhone: '2135552552', }, ];

import React from 'react'; const EmployeeCard = ({ employee }) => ( <div className="employees__card"> <div className="employees__img-wrapper"> <img className="employees__img" src={employee.Picture} alt={employee.FullName} /> </div> <div className="employees__info"> <div className="employees__info-row"> <span className="employees__info-label">Full Name:</span> <span className="employees__info-value">{employee.FullName}</span> </div> <div className="employees__info-row"> <span className="employees__info-label">Position:</span> <span className="employees__info-value">{employee.Title}</span> </div> <div className="employees__info-row"> <span className="employees__info-label">Phone:</span> <span className="employees__info-value">{employee.MobilePhone}</span> </div> </div> </div> ); export default EmployeeCard;

import React from 'react'; import EmployeeCard from './EmployeeCard.js'; const EmployeeGallery = ({ employees, pageSize, pageIndex }) => { const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six'; const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); return ( <div className={`employees ${cardsNumber}`}> {pageEmployees.map((employee) => ( <EmployeeCard key={employee.ID} employee={employee} /> ))} </div> ); }; export default EmployeeGallery;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.querySelector('.container'));

export const employees = [ { ID: 1, FullName: 'John Heart', Title: 'CEO', Employee_Picture: '01.png', Picture: '../../../../images/employees/01.png', MobilePhone: '2135559392', }, { ID: 2, FullName: 'Samantha Bright', Title: 'COO', Employee_Picture: '30.png', Picture: '../../../../images/employees/30.png', MobilePhone: '2135552858', }, { ID: 3, FullName: 'Arthur Miller', Title: 'CTO', Employee_Picture: '10.png', Picture: '../../../../images/employees/10.png', MobilePhone: '3105558583', }, { ID: 4, FullName: 'Robert Reagan', Title: 'CMO', Employee_Picture: '03.png', Picture: '../../../../images/employees/03.png', MobilePhone: '8185552387', }, { ID: 5, FullName: 'Greta Sims', Title: 'HR Manager', Employee_Picture: '04.png', Picture: '../../../../images/employees/04.png', MobilePhone: '8185556546', }, { ID: 6, FullName: 'Brett Wade', Title: 'IT Manager', Employee_Picture: '05.png', Picture: '../../../../images/employees/05.png', MobilePhone: '6265550358', }, { ID: 7, FullName: 'Sandra Johnson', Title: 'Controller', Employee_Picture: '06.png', Picture: '../../../../images/employees/06.png', MobilePhone: '5625552082', }, { ID: 8, FullName: 'Ed Holmes', Title: 'Sales Manager', Employee_Picture: '11.png', Picture: '../../../../images/employees/11.png', MobilePhone: '3105551288', }, { ID: 9, FullName: 'Barb Banks', Title: 'Support Manager', Employee_Picture: '20.png', Picture: '../../../../images/employees/20.png', MobilePhone: '3105553355', }, { ID: 10, FullName: 'Kevin Carter', Title: 'Shipping Manager', Employee_Picture: '07.png', Picture: '../../../../images/employees/07.png', MobilePhone: '2135552840', }, { ID: 11, FullName: 'Cindy Stanwick', Title: 'HR Assistant', Employee_Picture: '08.png', Picture: '../../../../images/employees/08.png', MobilePhone: '8185556655', }, { ID: 12, FullName: 'Sammy Hill', Title: 'Sales Assistant', Employee_Picture: '12.png', Picture: '../../../../images/employees/12.png', MobilePhone: '6265557292', }, { ID: 13, FullName: 'Davey Jones', Title: 'Shipping Assistant', Employee_Picture: '13.png', Picture: '../../../../images/employees/13.png', MobilePhone: '6265550281', }, { ID: 14, FullName: 'Victor Norris', Title: 'Shipping Assistant', Employee_Picture: '14.png', Picture: '../../../../images/employees/14.png', MobilePhone: '2135559278', }, { ID: 15, FullName: 'Mary Stern', Title: 'Shipping Assistant', Employee_Picture: '15.png', Picture: '../../../../images/employees/15.png', MobilePhone: '8185557857', }, { ID: 16, FullName: 'Robin Cosworth', Title: 'Shipping Assistant', Employee_Picture: '16.png', Picture: '../../../../images/employees/16.png', MobilePhone: '8185550942', }, { ID: 17, FullName: 'Kelly Rodriguez', Title: 'Support Assistant', Employee_Picture: '17.png', Picture: '../../../../images/employees/17.png', MobilePhone: '8185559248', }, { ID: 18, FullName: 'James Anderson', Title: 'Support Assistant', Employee_Picture: '18.png', Picture: '../../../../images/employees/18.png', MobilePhone: '3235554702', }, { ID: 19, FullName: 'Antony Remmen', Title: 'Support Assistant', Employee_Picture: '19.png', Picture: '../../../../images/employees/19.png', MobilePhone: '3105556625', }, { ID: 20, FullName: 'Olivia Peyton', Title: 'Sales Assistant', Employee_Picture: '09.png', Picture: '../../../../images/employees/09.png', MobilePhone: '3105552728', }, { ID: 21, FullName: 'Taylor Riley', Title: 'Network Admin', Employee_Picture: '21.png', Picture: '../../../../images/employees/21.png', MobilePhone: '3105557276', }, { ID: 22, FullName: 'Amelia Harper', Title: 'Network Admin', Employee_Picture: '22.png', Picture: '../../../../images/employees/22.png', MobilePhone: '2135554276', }, { ID: 23, FullName: 'Wally Hobbs', Title: 'Programmer', Employee_Picture: '23.png', Picture: '../../../../images/employees/23.png', MobilePhone: '8185558872', }, { ID: 24, FullName: 'Brad Jameson', Title: 'Programmer', Employee_Picture: '24.png', Picture: '../../../../images/employees/24.png', MobilePhone: '8185554646', }, { ID: 25, FullName: 'Karen Goodson', Title: 'Programmer', Employee_Picture: '25.png', Picture: '../../../../images/employees/25.png', MobilePhone: '6265550908', }, { ID: 26, FullName: 'Marcus Orbison', Title: 'Travel Coordinator', Employee_Picture: '26.png', Picture: '../../../../images/employees/26.png', MobilePhone: '2135557098', }, { ID: 27, FullName: 'Sandy Bright', Title: 'Benefits Coordinator', Employee_Picture: '27.png', Picture: '../../../../images/employees/27.png', MobilePhone: '8185550524', }, { ID: 28, FullName: 'Morgan Kennedy', Title: 'Graphic Designer', Employee_Picture: '28.png', Picture: '../../../../images/employees/28.png', MobilePhone: '8185558238', }, { ID: 29, FullName: 'Violet Bailey', Title: 'Jr Graphic Designer', Employee_Picture: '29.png', Picture: '../../../../images/employees/29.png', MobilePhone: '8185552478', }, { ID: 30, FullName: 'Ken Samuelson', Title: 'Ombudsman', Employee_Picture: '02.png', Picture: '../../../../images/employees/02.png', MobilePhone: '5625559282', }, { ID: 31, FullName: 'Nat Maguiree', Title: 'Trainer', Employee_Picture: '31.png', Picture: '../../../../images/employees/31.png', MobilePhone: '5625558377', }, { ID: 32, FullName: 'Bart Arnaz', Title: 'Director of Engineering', Employee_Picture: '32.png', Picture: '../../../../images/employees/32.png', MobilePhone: '7145552000', }, { ID: 33, FullName: 'Leah Simpson', Title: 'Test Coordinator', Employee_Picture: '33.png', Picture: '../../../../images/employees/33.png', MobilePhone: '5625595830', }, { ID: 34, FullName: 'Arnie Schwartz', Title: 'Engineer', Employee_Picture: '34.png', Picture: '../../../../images/employees/34.png', MobilePhone: '7145558882', }, { ID: 35, FullName: 'Billy Zimmer', Title: 'Engineer', Employee_Picture: '51.png', Picture: '../../../../images/employees/51.png', MobilePhone: '9095556939', }, { ID: 36, FullName: 'Samantha Piper', Title: 'Engineer', Employee_Picture: '35.png', Picture: '../../../../images/employees/35.png', MobilePhone: '3235554512', }, { ID: 37, FullName: 'Maggie Boxter', Title: 'Engineer', Employee_Picture: '36.png', Picture: '../../../../images/employees/36.png', MobilePhone: '7145557239', }, { ID: 38, FullName: 'Terry Bradley', Title: 'QA Engineer', Employee_Picture: '37.png', Picture: '../../../../images/employees/37.png', MobilePhone: '8055552788', }, { ID: 39, FullName: 'Gabe Jones', Title: 'Retail Coordinator', Employee_Picture: '38.png', Picture: '../../../../images/employees/38.png', MobilePhone: '3105555395', }, { ID: 40, FullName: 'Lucy Ball', Title: 'Sales Assistant', Employee_Picture: '39.png', Picture: '../../../../images/employees/39.png', MobilePhone: '3105553357', }, { ID: 41, FullName: 'Jim Packard', Title: 'Retail Sales Manager', Employee_Picture: '40.png', Picture: '../../../../images/employees/40.png', MobilePhone: '6615558224', }, { ID: 42, FullName: 'Hannah Brookly', Title: 'Online Sales Manager', Employee_Picture: '41.png', Picture: '../../../../images/employees/41.png', MobilePhone: '8055553627', }, { ID: 43, FullName: 'Harv Mudd', Title: 'Retail Sales Manager', Employee_Picture: '42.png', Picture: '../../../../images/employees/42.png', MobilePhone: '8315553895', }, { ID: 44, FullName: 'Clark Morgan', Title: 'Retail Sales Manager', Employee_Picture: '43.png', Picture: '../../../../images/employees/43.png', MobilePhone: '9255552525', }, { ID: 45, FullName: 'Todd Hoffman', Title: 'Retail Sales Manager', Employee_Picture: '44.png', Picture: '../../../../images/employees/44.png', MobilePhone: '9255553579', }, { ID: 46, FullName: 'Jackie Garmin', Title: 'Support Assistant', Employee_Picture: '45.png', Picture: '../../../../images/employees/45.png', MobilePhone: '2135551824', }, { ID: 47, FullName: 'Lincoln Bartlett', Title: 'Sales Assistant', Employee_Picture: '46.png', Picture: '../../../../images/employees/46.png', MobilePhone: '2135558272', }, { ID: 48, FullName: 'Brad Farkus', Title: 'Engineer', Employee_Picture: '47.png', Picture: '../../../../images/employees/47.png', MobilePhone: '2135553626', }, { ID: 49, FullName: 'Jenny Hobbs', Title: 'Shipping Assistant', Employee_Picture: '48.png', Picture: '../../../../images/employees/48.png', MobilePhone: '3105552668', }, { ID: 50, FullName: 'Dallas Lou', Title: 'Shipping Assistant', Employee_Picture: '49.png', Picture: '../../../../images/employees/49.png', MobilePhone: '2135558357', }, { ID: 51, FullName: 'Stu Pizaro', Title: 'Engineer', Employee_Picture: '50.png', Picture: '../../../../images/employees/50.png', MobilePhone: '2135552552', }, ];

<!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.1.7/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 class="container"></div> </div> </body> </html>

body { overflow-x: hidden; } .demo-container { display: flex; flex-direction: column; align-items: center; } .container { min-width: 720px; width: 100%; } .employees { display: flex; flex-wrap: wrap; gap: 16px; min-height: 644px; padding-bottom: 24px; } .employees__card { width: 100%; max-height: 312px; align-self: stretch; overflow: hidden; border: var(--dx-border-width) solid var(--dx-color-border); border-radius: var(--dx-border-radius); background-color: var(--dx-component-color-bg); } .employees.employees--forth .employees__card { min-width: 250px; width: 390px; flex-basis: calc(50% - 10px); } .employees.employees--six .employees__card { flex-basis: calc(33.3% - 12.5px); } .employees__img-wrapper { height: 180px; position: relative; overflow: hidden; border-bottom: var(--dx-border-width) solid var(--dx-color-border); background-color: #fff; } .employees__img { display: block; height: 220px; position: absolute; content: ""; left: 50%; top: 0; transform: translateX(-50%); } .employees__info { padding: 24px; } .employees__info-row { margin-bottom: 8px; text-wrap: nowrap; } .employees__info-label { display: inline-block; font-weight: 600; vertical-align: middle; } .employees.employees--forth .employees__info-label { width: 160px; } .employees.employees--six .employees__info-label { width: 80px; } .employees__info-value { display: inline-block; text-wrap: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; white-space:nowrap } .employees.employees--forth .employees__info-value { max-width: 180px; } .employees.employees--six .employees__info-value { max-width: 120px; }