Le composant KendoReact Pager peut être utilisé pour créer des éléments de pagination intuitifs et personnalisables, contribuant ainsi à améliorer la convivialité et les performances.
Dans les applications Web modernes, gérer et afficher de grands ensembles de données de manière conviviale constitue un défi courant. La pagination est une solution largement adoptée qui divise le contenu en pages distinctes, améliorant ainsi la convivialité et les performances.
Le progrès KendoRéagir la bibliothèque offre une solution complète pour implémenter la pagination via KendoReact Téléavertisseur composant.
Le composant KendoReact Pager fait partie du riche ensemble de composants d’interface utilisateur fournis par KendoReact. Il est conçu pour offrir des fonctionnalités de pagination intuitives. Le composant est disponible via le @progress/kendo-react-data-tools package et peut être importé directement dans un projet React.
import { Pager } from '@progress/kendo-react-data-tools';
Après avoir importé le composant Pager, nous pouvons lancer un ensemble de données avec lequel travailler, simulant un scénario avec une liste de produits. Cette configuration est utile pour démontrer les fonctionnalités du composant Pager sans avoir besoin d’un grand ensemble de données réelles.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Pager } from "@progress/kendo-react-data-tools";
const products = new Array(200)
.fill()
.map((_, index) => ({ ProductId: index, ProductName: "Product " + index }));
Le composant Pager est livré avec plusieurs propriétés permettant une personnalisation détaillée. Pour commencer, initialisons notre état de pagination, en spécifiant le nombre d’éléments que nous souhaitons ignorer (skip), combien d’éléments afficher par page (take) et le nombre de boutons de pagination (buttonCount) :
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Pager } from "@progress/kendo-react-data-tools";
const products = new Array(200)
.fill()
.map((_, index) => ({ ProductId: index, ProductName: "Product " + index }));
const total = products.length;
const initialPageState = {
skip: 0,
take: 5,
buttonCount: 5,
};
Pour incorporer le composant Pager dans notre application, nous allons d’abord construire un composant React parent appelé App. Ce composant conservera l’état actuel de la page et restituera le composant Pager avec les propriétés configurées. Dans un premier temps, le composant Pager sera configuré pour afficher l’interface utilisateur de pagination sans pouvoir gérer les modifications de page :
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { Pager } from '@progress/kendo-react-data-tools';
const products = new Array(200)
.fill()
.map((_, index) => ({ ProductId: index, ProductName: 'Product ' + index }));
const total = products.length;
const initialPageState = {
skip: 0,
take: 5,
buttonCount: 5,
};
const App = () => {
const [pageState, setPageState] = React.useState(initialPageState);
const { skip, take, buttonCount } = pageState;
return (
<Pager
skip={skip}
take={take}
total={total}
buttonCount={buttonCount}
/>
);
};
const container = document.querySelector('#app');
const root = createRoot(container!);
root.render(<App />);
Avec ces changements, notre interface utilisateur de pagination apparaîtra comme suit :
Pour rendre notre pagination entièrement interactive, nous pouvons créer une fonction de gestionnaire handlePageChange() qui, une fois déclenché, mettra à jour l’état de la page en fonction des interactions de l’utilisateur, garantissant que le contenu affiché correspond aux paramètres de pagination actuels :
const App = () => {
const [pageState, setPageState] = React.useState(initialPageState);
const { skip, take, buttonCount } = pageState;
const handlePageChange = (event) => {
const { skip, take } = event;
setPageState({
...pageState,
skip: skip,
take: take,
});
};
return (
<Pager
skip={skip}
take={take}
total={total}
buttonCount={buttonCount}
onPageChange={handlePageChange}
/>
);
};
Avec ce changement, notre composant Pager est interactif et un utilisateur pourra naviguer entre les pages :
Comme mentionné précédemment, le composant Pager permet une personnalisation étendue. Par exemple, nous pouvons utiliser le type prop pour spécifier comment les utilisateurs naviguent entre les pages. Il accepte deux valeurs : numeric (par défaut) et input.
Réglage du type à input permet aux utilisateurs de naviguer en saisissant un numéro de page directement dans un champ de saisie, offrant une alternative à la navigation par bouton numérique par défaut. Cela peut être utile pour les applications nécessitant une navigation rapide vers une page spécifique.
const App = () => {
return (
<Pager
type="input"
/>
);
};
Avec le type mis à inputl’interface de pagination change pour inclure un champ de saisie, permettant aux utilisateurs de saisir directement le numéro de page vers lequel ils souhaitent accéder.
Le pageSizes La propriété permet aux utilisateurs de sélectionner le nombre d’éléments qu’ils souhaitent afficher par page. Cette fonctionnalité ajoute une liste déroulante au composant Pager, permettant aux utilisateurs de choisir leur nombre préféré d’éléments par page. C’est un excellent moyen de donner le contrôle à l’utilisateur, en améliorant la convivialité, en particulier dans les scénarios où la quantité de données peut être écrasante.
const App = () => {
return (
<Pager
pageSizes={[5, 10, 15]}
/>
);
};
Activation pageSizes fournit un menu déroulant dans l’interface utilisateur de pagination, permettant aux utilisateurs de choisir parmi des tailles de page prédéfinies. Cet ajout améliore considérablement l’expérience utilisateur en offrant une flexibilité dans la consommation de données.
Le composant Pager prend également en charge un size propriété, qui ajuste sa taille globale. Cela peut être particulièrement utile pour rendre le téléavertisseur plus accessible ou pour l’intégrer de manière plus harmonieuse dans différentes sections d’une interface utilisateur.
const App = () => {
return (
<Pager
size="large"
/>
);
};
Réglage du size accessoire à large augmente la taille du téléavertisseur, le rendant plus visible et plus facile à interagir, en particulier sur les appareils tactiles.
Le responsive prop permet au composant Pager d’ajuster sa disposition en fonction de la taille de l’écran, garantissant une utilisation optimale sur différents appareils.
const App = () => {
return (
<Pager
responsive
/>
);
};
En activant le responsive prop, le composant Pager adapte dynamiquement sa présentation pour une visualisation optimale, garantissant que les contrôles de pagination restent accessibles et visuellement cohérents sur divers appareils, des moniteurs de bureau aux écrans mobiles. Cette adaptabilité est cruciale pour maintenir une expérience utilisateur cohérente dans les applications Web réactives.
Pour obtenir la liste de toutes les propriétés de personnalisation acceptées par le composant Pager, reportez-vous au Documentation de l’API PagerProps.
Conclure
En conclusion, le composant KendoReact Pager fournit une solution puissante pour mettre en œuvre des stratégies de pagination efficaces dans les applications React. En tirant parti des différentes suites de propriétés offertes par le composant KendoReact Pager, les développeurs peuvent créer une expérience de pagination personnalisable qui améliore l’interaction des utilisateurs et la présentation des données au sein de leurs applications.
Pour plus de détails, assurez-vous de consulter le composant officiel Documentation!
Et n’oubliez pas : KendoReact est livré avec un essai gratuit de 30 jours si vous êtes prêt à l’essayer !
Source link