Personnalisation de la grille de données KendoReact : options de style et de thème

Découvrez quelques-unes des nombreuses options de style et de thème disponibles pour personnaliser votre grille de données React.

La grille de données KendoReact est un composant puissant qui permet aux développeurs d’afficher et de gérer efficacement de grands ensembles de données. Bien que son apparence prête à l’emploi soit professionnelle et épurée, il existe de nombreuses façons de personnaliser son apparence pour répondre aux exigences de conception d’une application. Dans cet article, nous explorerons diverses options de style et de thème disponibles lors de l’utilisation de cette grille de données React.

Grille de données KendoReact

Le Grille de données KendoReact Le composant est livré avec une prise en charge intégrée de diverses fonctionnalités, telles que le tri, le filtrage, le regroupement et la pagination. Chacune de ces fonctionnalités peut être stylisée pour créer un aspect cohérent qui correspond au système de conception d’une application.

Commençons par un exemple de base de grille de données KendoReact :

import * as React from "react";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import { ProgressBar } from "@progress/kendo-react-progressbars";
 
const ProgressCell = (props) => {
  const progress = props.dataItem[props.field];
 
  if (props.rowType === "groupHeader") {
    return;
  }
 
  return (
    <td {...props.tdProps}>
      <ProgressBar
        style={{
          width: "150px",
          height: "10px",
          marginRight: "20px",
        }}
        value={progress}
        labelVisible={false}
      />
      {progress} %<span> </span>
    </td>
  );
};
 
const App = () => {
  const data = [
    {
      ProductID: 1,
      ProductName: "Chai Tea",
      UnitPrice: 4.0,
      UnitsInStock: 85,
    },
    {
      ProductID: 2,
      ProductName: "Peppermint Tea",
      UnitPrice: 6.0,
      UnitsInStock: 27,
    },
    {
      ProductID: 3,
      ProductName: "Mint Tea",
      UnitPrice: 5.5,
      UnitsInStock: 52,
    },
  ];
 
  return (
    <Grid data={data}>
      <GridColumn field="ProductID" title="ID" width="40px" />
      <GridColumn field="ProductName" title="Product Name" />
      <GridColumn field="UnitPrice" title="Price" format="{0:c2}" />
      <GridColumn
        field="UnitsInStock"
        title="Stock Level"
        cell={ProgressCell}
      />
    </Grid>
  );
};
export default App;

Dans l’exemple de code ci-dessus, nous avons créé un tableau de base avec un rendu de cellule personnalisé pour la colonne de niveau de stock à l’aide d’un composant de barre de progression pour représenter visuellement les données.

Personnalisation du thème

L’un des moyens les plus simples de personnaliser l’apparence de la grille consiste à utiliser les thèmes intégrés de KendoReact. La grille de données prend en charge ces thèmes principaux dès le départ :

Nous pouvons basculer entre les thèmes en modifiant simplement la feuille de style importée dans notre application. Par exemple, le thème Bootstrap a été utilisé dans l’exemple ci-dessus. Si nous voulions plutôt utiliser le thème par défaut, nous remplacerions l’importation CSS du thème Bootstrap dans le fichier index.html fichier de notre application avec :

<link
  rel="stylesheet"
  href=" https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css"
/>

Cela donnerait à la grille une apparence plus neutre et classique avec le style KendoReact Default.

Alternativement, si nous voulions utiliser le thème Material, nous utiliserions :

<link
  rel="stylesheet"
  href="https://kendo.cdn.telerik.com/themes/10.0.1/material/material-main.css"
/>

Cela donnerait à la grille un Conception matérielle aspect, avec des surfaces planes caractéristiques et des arêtes vives.

Et, si nous devions plutôt utiliser le thème Fluent, nous remplacerions l’import CSS par :

<link
  rel="stylesheet"
  href="https://kendo.cdn.telerik.com/themes/ 10.0.1/fluent/fluent-main.css"
/>

Avec cela, nous nous retrouverons avec un moderne, Interface utilisateur fluide– un design inspiré, caractérisé par des ombres subtiles, des coins arrondis et un espacement cohérent, étroitement aligné sur le langage de conception de Microsoft.

Options de style supplémentaires

Au-delà de la sélection de thèmes, la React Data Grid propose d’autres moyens de personnaliser son apparence via des ajustements de taille, des cellules personnalisées, des en-têtes personnalisés et un style au niveau des lignes.

Taille de la grille

La grille KendoReact nous permet d’ajuster sa densité pour optimiser la visibilité sur différentes tailles d’écran et cas d’utilisation. En utilisant le accessoire de taillenous pouvons contrôler la densité et la compacité globale de la grille. Ceci est particulièrement utile lorsque nous devons afficher de grands ensembles de données dans un espace limité ou ajuster l’apparence de la grille pour différents appareils.

Voici un exemple de définition de la taille de notre grille sur small:

const App = () => {
  const data = [
    
  ];
 
  return (
    <Grid data={data} size="small">
      {}
    </Grid>
  );
};

Notre grille d’affichage sera ainsi présentée dans un format plus compact avec un remplissage et un espacement réduits, ce qui la rendra plus adaptée à la présentation de données denses ou à des tailles d’écran plus petites.

Cellules personnalisées

Les cellules personnalisées nous permettent de contrôler complètement l’apparence et le contenu des cellules individuelles. Ceci est particulièrement utile lorsque nous devons ajouter une mise en forme conditionnelle ou inclure des éléments supplémentaires dans les cellules.

Voici un exemple de mise en forme conditionnelle pour les niveaux de stock, où les cellules sont surlignées en rouge lorsque le stock est faible :

import * as React from "react";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
 
const CustomCell = (props) => {
  const value = props.dataItem[props.field];
  const isLowStock = value < 60;
  return (
    <td
      style={{
        backgroundColor: isLowStock ? "rgba(243, 23, 0, 0.32)" : "inherit",
        fontWeight: isLowStock ? "bold" : "normal",
      }}
    >
      {value}
    </td>
  );
};
 
const App = () => {
  const data = [
    
  ];
 
  return (
    <Grid data={data} size="small">
      {}
      <GridColumn field="UnitsInStock" title="Stock Level" cell={CustomCell} />
    </Grid>
  );
};
 
export default App;

Avec ce changement, tout produit dont les niveaux de stock sont inférieurs à 60 unités sera surligné en rouge.

Les cellules d’en-tête peuvent également être personnalisées pour inclure des fonctionnalités ou un style supplémentaires. Voici un exemple de création d’une cellule d’en-tête personnalisée utilisée uniquement pour le ID en-tête :

import * as React from "react";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
 
const CustomHeaderCell = (props) => {
  return (
    <a onClick={props.onClick}>
      <span style={{ textDecoration: "underline", color: "53d2fa" }}>
        {props.title}
      </span>
      {props.children}
    </a>
  );
};
 
const App = () => {
  const data = [
    
  ];
 
  return (
    <Grid data={data}>
      <GridColumn
        field="ProductID"
        headerCell={CustomHeaderCell}
        title="ID"
        width="40px"
      />
      {}
    </Grid>
  );
};
 
export default App;

Avec les modifications apportées dans l’exemple de code ci-dessus, le ID la cellule d’en-tête s’affiche sous la forme d’un lien souligné cliquable permettant aux utilisateurs d’interagir avec l’en-tête du tableau comme s’il s’agissait d’un lien hypertexte.

Personnalisation au niveau des lignes

Le rowRender prop nous permet de personnaliser des lignes entières en fonction des conditions des données. Voici un exemple d’application de styles de lignes conditionnelles en fonction de l’état de disponibilité du produit.

import * as React from "react";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
 
const rowRender = (trElement, props) => {
  const isDiscontinued = props.dataItem.Discontinued;
  const style = {
    backgroundColor: isDiscontinued
      ? "rgb(243, 23, 0, 0.32)"
      : "rgb(55, 180, 0, 0.32)",
  };
 
  return React.cloneElement(
    trElement,
    { ...trElement.props, style },
    trElement.props.children
  );
};
 
const App = () => {
  return (
    <Grid data={data} rowRender={rowRender}>
      {}
    </Grid>
  );
};
 
export default App;

Avec ce changement et en supposant que le produit de la deuxième ligne soit abandonné, les lignes seront codées par couleur avec les produits abandonnés en rouge et les produits actifs en vert, fournissant une indication visuelle immédiate de l’état du produit.

Conclure

La grille de données KendoReact offre des options de personnalisation utiles pour nous aider à créer l’apparence exacte dont notre application peut avoir besoin. Des simples changements de thème à la mise en forme conditionnelle complexe, nous pouvons obtenir un style sophistiqué tout en conservant les puissantes fonctionnalités de la grille.

Pour plus de détails sur React Data Grid et les capacités de style supplémentaires qu’elle offre, assurez-vous de consulter la documentation officielle suivante :

Et n’oubliez pas : KendoReact est livré avec un essai gratuit de 30 jours, alors essayez-le dès aujourd’hui !

Essayez KendoReact