TableRowCell

Encapsule le contenu d'une cellule de tableau située dans le corps du tableau. Ce composant ne devrait être utilisé qu'en tant qu'enfant de <TableRow>. Les cellules se chargent automatiquement d'ellipsifier le contenu qui ne rentre pas et de le centrer verticalement.

Ce composant est la cellule de base. Pour les cas courants, le SDK fournit également un ensemble de cellules supplémentaires afin qu'elles soient toujours peintes de manière cohérente dans l'interface utilisateur (par exemple nom d'entité avec un statut, ou un utilisateur).

Usage

import { TableRowCell } from 'nr1'

Exemples

Cellule de ligne avec des liens externes et des informations supplémentaires

function render() {
  const items = [
    {
      dashboardName: 'Staging service - Errors',
      createdBy: 'john@doe.com',
      url: '//fake-url.com/dashboard1',
    },
    {
      dashboardName: 'Package Registry - Performance',
      createdBy: 'jane@doe.com',
      url: '//fake-url.com/dashboard2',
    },
  ];
  return (
    <Table items={items} multivalue>
      <TableHeader>
        <TableHeaderCell>Name</TableHeaderCell>
        <TableHeaderCell>Url</TableHeaderCell>
      </TableHeader>
      {({ item }) => (
        <TableRow>
          <TableRowCell additionalValue={`Created by ${item.createdBy}`}>
            {item.dashboardName}
          </TableRowCell>
          <TableRowCell>
            <Link to={item.url}>Go to the dashboard</Link>
          </TableRowCell>
        </TableRow>
      )}
    </Table>
  );
}

Accessoires

additionalValue

chaîne

Informations complémentaires aux données principales de la cellule.

Remarque : pour le moment, ce contenu devient visible uniquement lorsque la propriété multivalue est transmise au composant parent Table .

alignmentType

énum.

Définit l'alignement du texte à l'intérieur de la cellule.

<One ofTableRowCell.ALIGNMENT_TYPE.CENTER, TableRowCell.ALIGNMENT_TYPE.LEFT, TableRowCell.ALIGNMENT_TYPE.RIGHT,
>

ariaLabel

chaîne

Utilisez-le pour mieux décrire le contexte de l'action de la cellule pour l'utilisateur sur les lecteurs d'écran.

<TableRowCell to="/dashboards" ariaLabel="Go to your dashboard">
   Go 
</TableRowCell>

children

nœud

Contenu de la cellule du tableau.

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

ellipsisType

énum.

Définit comment les valeurs sont ellipsifiées dans les cellules ; c'est-à-dire où l'ellipse est placée :

RIGHT: à la fin du texte, en préservant son début.
LEFT: au début du texte, en préservant sa fin.
<One ofTableRowCell.ELLIPSIS_TYPE.LEFT, TableRowCell.ELLIPSIS_TYPE.RIGHT, >

onClick

fonction

Rappel déclenché à chaque fois que l'utilisateur clique sur la cellule du tableau.

function (event: React.MouseEvent 
)

style

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

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.

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien. Les TableRowCellliés ne sont pas stylisés et n'afficheront pas d'icônes pour les liens externes. Si le même style que le composant Link est souhaité, utilisez plutôt un Link comme composant enfant dans la

cellule

pathname

OBLIGATOIRE

chaîne

search

chaîne

hash

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Cellule de ligne avec des liens externes et des informations supplémentaires

Accessoires

chaîne

énum.

chaîne

nœud

chaîne

énum.

fonction

objet

chaîne

forme|chaîne

cellule

OBLIGATOIRE

chaîne

chaîne

chaîne

Usage