Tableau

Affiche un tableau avec un en-tête et des lignes fixes. Le tableau implémente la fonctionnalité suivante :

Disposition flexible : les en-têtes de tableau acceptent une variété de tailles pour permettre des mises en page fluides et fixes. Vous pouvez trouver plus d'informations sur la façon de personnaliser vos colonnes en vérifiant TableHeaderCell.
Tri : les éléments transmis peuvent être triés en interne par la table en fonction de l'état de tri actuel de la table. Vous pouvez trouver plus d'informations sur le tri en cochant TableHeaderCell.
Sélection de ligne : les lignes peuvent être sélectionnées via des cases à cocher sur le côté droit. Vous pouvez trouver plus d'informations dans la propriété selected .
Actions de ligne : des actions contextuelles peuvent être déclenchées par ligne, permettant à l'utilisateur d'accéder à des fonctionnalités sur elles. Vous pouvez trouver plus d'informations sur la façon de les ajouter dans TableRow.
Cellules prédéfinies personnalisées : certains modèles très courants pour les cellules (titre d'entité, métriques, etc.) sont déjà fournis par la plateforme, de sorte que vous n'avez qu'à les renvoyer dans le cadre de votre ligne.
Virtualisation : les cellules ne sont rendues que si elles sont affichées à l'écran. Cela permet à la table de fonctionner avec un grand ensemble de données sans pratiquement aucune pénalité de performances.

Usage

import { Table } from 'nr1'

Exemples

Basique

class Example extends React.Component {
  _getActions() {
    return [
      {
        label: 'Show details',
        onClick: (evt, { item, index }) => {
          alert(
            `Show details:Item: ${index}${JSON.stringify(item, null, 2)}`,
          );
        },
      },
      {
        label: 'Delete',
        type: TableRow.ACTION_TYPE.DESTRUCTIVE,
        onClick: (evt, { item, index }) => {
          alert(`Delete:Item: ${index}${JSON.stringify(item, null, 2)}`);
        },
      },
    ];
  }


  _getItems() {
    return [
      {
        name: 'Melton Garcia',
        gender: 'Male',
        company: 'Comtest',
        phone: '+1 (867) 477-3284',
        selected: true,
      },
      {
        name: 'Finley Mendez',
        gender: 'Male',
        company: 'Anarco',
        phone: '+1 (817) 438-3205',
        selected: false,
      },
      {
        name: 'Coleen Salinas',
        gender: 'Female',
        company: 'Macronaut',
        phone: '+1 (962) 419-3856',
        selected: true,
      },
    ];
  }


  render() {
    return (
      <Table items={this._getItems()}>
        <TableHeader>
          <TableHeaderCell value={({ item }) => item.name} width="50%">
            Name
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.gender}>
            Gender
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.company}>
            Company
          </TableHeaderCell>
          <TableHeaderCell
            value={({ item }) => item.phone}
            width="fit-content"
            alignmentType={TableRowCell.ALIGNMENT_TYPE.RIGHT}
          >
            Phone
          </TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow actions={this._getActions()}>
            <TableRowCell>{item.name}</TableRowCell>
            <TableRowCell>{item.gender}</TableRowCell>
            <TableRowCell>{item.company}</TableRowCell>
            <TableRowCell>{item.phone}</TableRowCell>
          </TableRow>
        )}
      </Table>
    );
  }
}

Tri

class Example extends React.Component {
  constructor() {
    super(...arguments);


    this.state = {
      column_0: TableHeaderCell.SORTING_TYPE.ASCENDING,
    };
  }


  _getItems() {
    return [
      {
        name: 'Melton Garcia',
        gender: 'Male',
        company: 'Comtest',
        phone: '+1 (867) 477-3284',
        selected: true,
      },
      {
        name: 'Finley Mendez',
        gender: 'Male',
        company: 'Anarco',
        phone: '+1 (817) 438-3205',
        selected: false,
      },
      {
        name: 'Coleen Salinas',
        gender: 'Female',
        company: 'Macronaut',
        phone: '+1 (962) 419-3856',
        selected: true,
      },
    ];
  }


  _onClickTableHeaderCell(key, event, sortingData) {
    this.setState({ [key]: sortingData.nextSortingType });
  }


  render() {
    return (
      <Table
        items={this._getItems()}
        selected={({ item }) => item.selected}
        onSelect={(evt, { item }) => (item.selected = evt.target.checked)}
      >
        <TableHeader>
          <TableHeaderCell
            value={({ item }) => item.name}
            sortable
            sortingType={this.state.column_0}
            sortingOrder={1}
            onClick={this._onClickTableHeaderCell.bind(this, 'column_0')}
          >
            Name
          </TableHeaderCell>
          <TableHeaderCell
            value={({ item }) => item.gender}
            sortable
            sortingType={this.state.column_1}
            sortingOrder={0}
            onClick={this._onClickTableHeaderCell.bind(this, 'column_1')}
          >
            Gender
          </TableHeaderCell>
          <TableHeaderCell
            value={({ item }) => item.company}
            sortable
            sortingType={this.state.column_2}
            sortingOrder={2}
            onClick={this._onClickTableHeaderCell.bind(this, 'column_2')}
          >
            Company
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.phone}>
            Phone
          </TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow>
            <TableRowCell>{item.name}</TableRowCell>
            <TableRowCell>{item.gender}</TableRowCell>
            <TableRowCell>{item.company}</TableRowCell>
            <TableRowCell>{item.phone}</TableRowCell>
          </TableRow>
        )}
      </Table>
    );
  }
}

Avec les actions d'en-tête

class Example extends React.Component {
  _getActions() {
    return [
      {
        label: 'Copy details',
        iconType: TableRow.ACTIONS_ICON_TYPE.INTERFACE__OPERATIONS__COPY_TO,
        onClick: (evt, { items }) => {
          alert(`Copy details: ${JSON.stringify(items, null, 2)}`);
        },
      },
      {
        label: 'Delete',
        iconType: TableRow.ACTIONS_ICON_TYPE.INTERFACE__OPERATIONS__TRASH,
        onClick: (evt, { items }) => {
          alert(`Delete: ${JSON.stringify(items, null, 2)}`);
        },
      },
    ];
  }


  _getItems() {
    return [
      {
        name: 'Melton Garcia',
        gender: 'Male',
        company: 'Comtest',
        phone: '+1 (867) 477-3284',
        selected: true,
      },
      {
        name: 'Finley Mendez',
        gender: 'Male',
        company: 'Anarco',
        phone: '+1 (817) 438-3205',
        selected: false,
      },
      {
        name: 'Coleen Salinas',
        gender: 'Female',
        company: 'Macronaut',
        phone: '+1 (962) 419-3856',
        selected: true,
      },
    ];
  }


  render() {
    return (
      <Table
        items={this._getItems()}
        selected={({ item }) => item.selected}
        onSelect={(evt, { item }) => (item.selected = evt.target.checked)}
      >
        <TableHeader actions={this._getActions()}>
          <TableHeaderCell value={({ item }) => item.name} width="50%">
            Name
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.gender}>
            Gender
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.company}>
            Company
          </TableHeaderCell>
          <TableHeaderCell
            value={({ item }) => item.phone}
            width="fit-content"
            alignmentType={TableRowCell.ALIGNMENT_TYPE.RIGHT}
          >
            Phone
          </TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow>
            <TableRowCell>{item.name}</TableRowCell>
            <TableRowCell>{item.gender}</TableRowCell>
            <TableRowCell>{item.company}</TableRowCell>
            <TableRowCell>{item.phone}</TableRowCell>
          </TableRow>
        )}
      </Table>
    );
  }
}

Avec un seul type de sélection

class Example extends React.Component {
  constructor() {
    super(...arguments);


    this.state = {
      selectedRow: null,
    };
  }


  _getItems() {
    return [
      {
        name: 'Melton Garcia',
        gender: 'Male',
        company: 'Comtest',
        phone: '+1 (867) 477-3284',
      },
      {
        name: 'Finley Mendez',
        gender: 'Male',
        company: 'Anarco',
        phone: '+1 (817) 438-3205',
      },
      {
        name: 'Coleen Salinas',
        gender: 'Female',
        company: 'Macronaut',
        phone: '+1 (962) 419-3856',
      },
    ];
  }


  render() {
    return (
      <Table
        selectionType={Table.SELECTION_TYPE.SINGLE}
        items={this._getItems()}
        selected={({ index }) => index === this.state.selectedRow}
        onSelect={(evt, { index }) => {
          this.setState((prevState) => {
            const { selectedRow } = prevState;


            // When the selected row is clicked, set value to `null`
            return { selectedRow: selectedRow === index ? null : index };
          });
        }}
      >
        <TableHeader>
          <TableHeaderCell value={({ item }) => item.name}>
            Name
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.gender}>
            Gender
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.company}>
            Company
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.phone}>
            Phone
          </TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow>
            <TableRowCell>{item.name}</TableRowCell>
            <TableRowCell>{item.gender}</TableRowCell>
            <TableRowCell>{item.company}</TableRowCell>
            <TableRowCell>{item.phone}</TableRowCell>
          </TableRow>
        )}
      </Table>
    );
  }
}

Tri sur une seule colonne

class Example extends React.Component {
  constructor(...args) {
    super(...args);


    this.state = {
      column: 0,
      sortingType: TableHeaderCell.SORTING_TYPE.NONE,
    };


    this.exampleItems = [
      { x: 'A', y: 0 },
      { x: 'B', y: 0 },
      { x: 'A', y: 1 },
    ];
  }


  _onClickTableHeaderCell(column, evt, { nextSortingType }) {
    if (column === this.state.column) {
      this.setState({ sortingType: nextSortingType });
    } else {
      this.setState({ column: column, sortingType: nextSortingType });
    }
  }


  render() {
    const sortingType0 =
      this.state.column === 0
        ? this.state.sortingType
        : TableHeaderCell.SORTING_TYPE.NONE;


    const sortingType1 =
      this.state.column === 1
        ? this.state.sortingType
        : TableHeaderCell.SORTING_TYPE.NONE;


    return (
      <Table items={this.exampleItems}>
        <TableHeader>
          <TableHeaderCell
            sortable
            sortingType={sortingType0}
            onClick={this._onClickTableHeaderCell.bind(this, 0)}
            value={({ item }) => item.x}
          >
            Column 1
          </TableHeaderCell>


          <TableHeaderCell
            sortable
            sortingType={sortingType1}
            onClick={this._onClickTableHeaderCell.bind(this, 1)}
            value={({ item }) => item.y}
          >
            Column 2
          </TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow>
            <TableRowCell>{item.x}</TableRowCell>
            <TableRowCell>{item.y}</TableRowCell>
          </TableRow>
        )}
      </Table>
    );
  }
}

Interrogation (query) avec tableau

<EntitiesByDomainTypeQuery entityDomain="APM" entityType="APPLICATION">
  {({ error, data, fetchMore }) => {
    if (!data.entities.length && error) {
      return 'Error!';
    }
    return (
      <Table items={data.entities} rowCount={data.count} onLoadMore={fetchMore}>
        <TableHeader>
          <TableHeaderCell value={({ item }) => item.name}>
            name
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.id}>
            entityGuid
          </TableHeaderCell>
          <TableHeaderCell value={({ item }) => item.accountId}>
            accountId
          </TableHeaderCell>
        </TableHeader>
        {({ item }) => (
          <TableRow>
            <EntityTitleTableRowCell value={item} />
            <TableRowCell>{item.guid}</TableRowCell>
            <TableRowCell>{item.accountId}</TableRowCell>
          </TableRow>
        )}
      </Table>
    );
  }}
</EntitiesByDomainTypeQuery>

Tableau à valeurs multiples

class Example extends React.Component {
  _getItems() {
    return [
      {
        duration: 218,
        errorCount: 0,
        rootSpan: {
          startTimeMs: 1626773604851,
          entityName: 'log-patterns-training',
          guid: '5ef23490-54jklfsd09fsd-ef098lkj',
          name: 'Transactions/Group Log Patterns',
        },
        totalSpanCount: 15,
      },
      {
        duration: 110,
        errorCount: 2,
        rootSpan: {
          entityName: 'network-traicing',
          guid: '4gh2190490-098fsd0123d-ef098lkj',
          name: 'Other Transactions/Network',
          startTimeMs: 1626783604851,
        },
        totalSpanCount: 7,
      },
      {
        duration: 90,
        errorCount: 1,
        rootSpan: {
          entityName: 'staging-services.io',
          guid: 'tre2350490-312fsd0123d-ef098lkj',
          name: 'Staging Environment Transactions/Network',
          startTimeMs: 1626583604851,
        },
        totalSpanCount: 12,
      },
    ];
  }


  render() {
    return (
      <Table items={this._getItems()} multivalue>
        <TableHeader>
          <TableHeaderCell width="30%">Trace group</TableHeaderCell>
          <TableHeaderCell width="30%">Root entity</TableHeaderCell>
          <TableHeaderCell alignmentType={TableHeaderCell.ALIGNMENT_TYPE.RIGHT}>
            Last start time
          </TableHeaderCell>
          <TableHeaderCell alignmentType={TableHeaderCell.ALIGNMENT_TYPE.RIGHT}>
            Trace duration
          </TableHeaderCell>
        </TableHeader>


        {({ item }) => (
          <TableRow>
            <TableRowCell
              additionalValue={`${item.errorCount} Errors, ${item.totalSpanCount} Spans`}
            >
              {item.rootSpan.name}
            </TableRowCell>
            <EntityTitleTableRowCell
              additionalValue={item.rootSpan.guid}
              value={{ name: item.rootSpan.entityName }}
            />
            <MetricTableRowCell
              additionalValue={new Date(
                item.rootSpan.startTimeMs,
              ).toLocaleTimeString()}
              type={MetricTableRowCell.TYPE.TIMESTAMP}
              value={item.rootSpan.startTimeMs}
            />
            <MetricTableRowCell
              type={MetricTableRowCell.TYPE.SECONDS}
              value={item.duration}
            />
          </TableRow>
        )}
      </Table>
    );
  }
}

Accessoires

ariaLabel

chaîne

Fournir une étiquette d'accessibilité qui décrit l'objectif du tableau, par exemple "All entities".

children

(nœud|fonction)[]

Contenu du tableau. La table ne peut contenir que comme enfants <TableHeader> et une fonction renvoyant <TableRow> .

className

chaîne

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

compact

booléen

Détermine si le tableau doit être rendu en mode compact (le mode compact a des lignes plus étroites). En général, utilisez le mode standard, car le mode compact est réservé à la représentation des données, par exemple dans un dashboard.

items

n'importe lequel[]

Les éléments à utiliser lors du rendu. Ils sont requis lors du rendu d'éléments avec un rappel de rendu. Chaque élément peut avoir n'importe quelle structure et n'importe quel type possible, et celui correspondant sera fourni lors du rendu de chaque liste d'éléments.

mainColumn

nombre

Colonne contenant les données principales identifiant la ligne. Souvent, la première colonne (index 0) est celle qui convient, mais des actions (comme les favoris) peuvent être placées avant elle.

multivalue

booléen

Active une deuxième ligne de contenu pour la cellule qui prend en charge la propriété additionalValue .

Remarque : le mode multivalue fonctionne uniquement dans la taille par défaut, pas dans compact.

onLoadMore

fonction

Rappel déclenché lorsque davantage d'éléments doivent être chargés. Cela se produit lorsque vous chargez les éléments de manière paresseuse et que les éléments sur le point d'être rendus ne peuvent pas être trouvés dans l'éventail items Ce rappel doit être utilisé pour récupérer/charger les éléments manquants à partir du backend ou d'autres sources. La promesse renvoyée doit être résolue une fois le chargement des données de l'élément terminé. Il sera utilisé pour déterminer quand actualiser la liste avec les données nouvellement chargées. Ce rappel peut être appelé plusieurs fois en réaction à un seul événement de défilement.

function (cursor: Cursor Items to load.
)

onSelect

fonction

Fonction appelée lorsque l'utilisateur clique sur une case à cocher d'une ligne. Elle est appelée avec l'événement de la case à cocher, ainsi qu'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. Lorsque l'utilisateur sélectionne ou désélectionne la case à cocher d'en-tête (sélectionner / désélectionner tout), le rappel sera appelé une fois pour chaque élément, représentant les clics individuels sur chaque ligne. L'état de la case à cocher d'en-tête est automatiquement contrôlé par le tableau.

function (event: React.ChangeEvent, 
selectedItem: SelectedCallbackArgument 
)

rowCount

nombre

Nombre de lignes. Par défaut, il est égal à la longueur de l'éventail passé dans la propriété items. Vous devez spécifier rowCount lorsque vous connaissez le nombre total d'éléments mais que vous souhaitez les charger paresseusement pendant le défilement.

selected

fonction

Fonction qui renvoie si une ligne est sélectionnée. Il doit renvoyer un booléen représentant l'état de la ligne. Il est appelé 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.

function (item: SelectedCallbackArgument 
) => boolean

selectionType

énum.

Définit le mode de sélection du Table. Utilisez-le avec les accessoires onSelect et selected pour déterminer quelle ligne est vérifiée par l'utilisateur.

Table.SELECTION_TYPE.BULK affiche des cases à cocher pour chaque ligne, ainsi qu'une case à cocher dans l'en-tête pour sélectionner tous les éléments. Lorsqu'un élément est sélectionné, les actions d'en-tête deviennent disponibles.
Table.SELECTION_TYPE.SINGLE n'affiche pas les cases à cocher, l'utilisateur sélectionne une ligne en cliquant simplement dessus. Bien que non appliqué dans le composant, le rappel selected ne doit renvoyer true que pour un seul élément. Consultez les exemples du composant pour voir comment il fonctionne.
<One ofTable.SELECTION_TYPE.BULK, Table.SELECTION_TYPE.SINGLE, >

spacingType

énumération[]

Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme margin ou padding. Pour omettre une valeur, utilisez SPACING_TYPE.OMIT.

<Array of<One ofTable.SPACING_TYPE.EXTRA_LARGE, Table.SPACING_TYPE.LARGE, Table.SPACING_TYPE.MEDIUM, Table.SPACING_TYPE.NONE, Table.SPACING_TYPE.OMIT, Table.SPACING_TYPE.SMALL,
>
>

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.

Définitions de types

`Cursor`

{startIndex: number, First index of the range of items to load.
stopIndex: number, Last index of the range of items to load.
}

`SelectedCallbackArgument`

{item: any, Item to check.
index: number, Index of the item in the items array.
items: any[], Array of all items passed.
}

Cette traduction automatique est fournie pour votre commodité.

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

Exemples

Basique

Tri

Avec les actions d'en-tête

Avec un seul type de sélection

Tri sur une seule colonne

Interrogation (query) avec tableau

Tableau à valeurs multiples

Accessoires

chaîne

(nœud|fonction)[]

chaîne

booléen

n'importe lequel[]

nombre

booléen

fonction

fonction

nombre

fonction

énum.

énumération[]

objet

chaîne

Définitions de types

Cursor

SelectedCallbackArgument

Usage

`Cursor`

`SelectedCallbackArgument`