alignmentType
énum. | Définit l'alignement du texte à l'intérieur de la cellule. <One ofTableHeaderCell.ALIGNMENT_TYPE.CENTER, TableHeaderCell.ALIGNMENT_TYPE.LEFT, TableHeaderCell.ALIGNMENT_TYPE.RIGHT, |
children
nœud | Contenu de la cellule du tableau. Si laissé vide, assurez-vous de passer title afin que l'utilisateur obtienne une référence sur les données affichées par la colonne. |
className
chaîne | Ajoute les noms de classe au composant. |
onClick
fonction | rappel déclenché à chaque fois que l'utilisateur clique sur l'en-tête. Lorsque vous cliquez dessus, les informations de tri (et l'état de tri suivant) seront transmises comme deuxième paramètre. Utilisez-le plutôt que de le calculer vous-même. function (event: React.MouseEvent, sortingData: Object |
sortable
booléen | Si la colonne est triable. Cela signifie que les flèches haut et bas seront affichées, à côté du texte d'en-tête. Le tri est une interface de composant contrôlée, vous êtes chargé d'écouter l'événement de tri et d'appliquer le tri à la colonne correspondante, en modifiant son accessoire sortingOrder . |
sortingFunction
fonction | Méthode de tri des lignes. La méthode par défaut fera généralement ce qu'il faut (ordre alphabétique pour le texte, ordre numérique pour les nombres et regroupement booléen), mais si nécessaire, cela peut être remplacé. La fonction prend deux paramètres (a et b) et doit renvoyer un nombre négatif si a est considéré comme apparaissant avant b, un nombre positif s'il est considéré comme apparaissant après, et zéro si les deux valeurs sont identiques. Chacun des objets passés au rappel contient la valeur de la ligne donnée (c'est-à-dire le résultat de l'appel de value sur la ligne), l'élément de la ligne (comme item), l'index de la ligne (comme index) et tous les éléments de l'éventail items (comme items). En général, vous comparerez les lignes en utilisant a.item et b.item. function () => number |
sortingOrder
nombre | Établit l'ordre de tri. Le nombre le plus bas indique une priorité de tri la plus élevée, ce qui signifie que 0 sera la première colonne triée, et si deux éléments sont identiques, nous utiliserons la colonne 1 et ainsi de suite. Les colonnes qui n'ont pas d'ordre de tri explicite sont utilisées après toutes les colonnes qui en ont un, et elles sont appliquées par ordre d'apparition. |
sortingType
énum. | Établit le tri pour la colonne. Les colonnes sont triées en fonction de l'élément renvoyé par la propriété value . <One ofTableHeaderCell.ALIGNMENT_TYPE.CENTER, TableHeaderCell.ALIGNMENT_TYPE.LEFT, TableHeaderCell.ALIGNMENT_TYPE.RIGHT, |
style
objet | Style en ligne pour un style personnalisé. |
testId
chaîne | Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element. Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL. |
title
chaîne | Établit le titre de la cellule. Ceci est utilisé à des fins d'info-bulle, lorsque la largeur de la colonne est suffisamment petite pour ne pas afficher l'intégralité du titre. Par défaut, il s'agit de la version stringifiée des enfants fournis. |
value
fonction | Fonction utilisée pour extraire la valeur brute représentant une colonne. La valeur brute peut être un booléen (par exemple si vous affichez une case à cocher), un nombre (si vous affichez une métrique) ou du texte pour d'autres. Elle est appelée avec un objet contenant l'élément représentant la ligne, son index dans l'éventail items passé à la table et les éléments eux-mêmes. Cette fonction est utilisée pour trier la table (par la valeur donnée) ainsi que pour l'heuristique des largeurs 'fit-content' . |
width
chaîne | Représente la largeur de la colonne. Il s'agit toujours d'une chaîne et elle peut être de l'un des types suivants : 'fit-content': la colonne occupera l'espace minimum requis pour allouer tous les éléments de la colonne. Pour les listes virtualisées, une heuristique sera utilisée pour éviter de rendre toutes les cellules.'YYpx': où YY est un nombre, représente la largeur de la colonne en pixels.'YY%': où YY est un nombre, représente la largeur de la colonne en pourcentage, par rapport à la taille de l'espace disponible où le tableau est rendu.'YYfr': où YY est un nombre, il représente une fraction de la largeur disponible. Les fractions sont proportionnelles les unes aux autres ; par instance, un tableau avec deux colonnes (1fr et 2fr) aura la deuxième colonne deux fois plus grande que la première. Si, après avoir calculé les largeurs, la taille globale du tableau ne couvre pas l'espace disponible, toutes les colonnes seront proportionnellement étirées pour s'adapter à tout l'espace disponible.
|