🎹 Pagination: Create Overview demo page. (#28469)

Co-authored-by: Sergey Arzamasov <[email protected]>

apps/demos/Demos/Pagination/Overview/React/App.tsx

@@ -1,13 +1,31 @@
-import React from "react";
-import Pagination from "devextreme-react/pagination";
-import { customers } from "./data.ts";
+import React, { useState } from 'react';
+import Pagination from 'devextreme-react/pagination';
+import EmployeeGallery from './EmployeesGallery.tsx';
+import { employees } from './data.ts';
 
-const columns = ["CompanyName", "City", "State", "Phone", "Fax"];
+const PAGE_SIZES = [4, 6];
 
 const App = () => {
+  const [pageSize, setPageSize] = useState<number>(4);
+  const [pageIndex, setPageIndex] = useState<number>(1);
+
   return (
     <>
-      <Pagination />
+      <EmployeeGallery
+        employees={employees}
+        pageSize={pageSize}
+        pageIndex={pageIndex}
+      />
+      <Pagination
+        showInfo
+        showNavigationButtons
+        allowedPageSizes={PAGE_SIZES}
+        itemCount={employees.length}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        onPageIndexChange={setPageIndex}
+        onPageSizeChange={setPageSize}
+      />
     </>
   );
 };

apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface Employee {
+  ID: number;
+  FullName: string;
+  Title: string;
+  Employee_Picture: string;
+  Picture: string;
+  MobilePhone: string;
+}
+
+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;

apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import EmployeeCard from './EmployeeCard.tsx';
+
+interface Employee {
+  ID: number;
+  FullName: string;
+  Title: string;
+  Employee_Picture: string;
+  Picture: string;
+  MobilePhone: string;
+}
+
+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;