Statut
Component checklist
Usage
Structure
Notre composant dsa-table reprend la même spécification que l'élément HTML table. Ainsi, nous avons développé des sous composants venant structurer celui-ci, listés ici:
- dsa-table-head: définit un groupe de lignes d'en-tête d'un tableau (équivalent à <thead>).
- dsa-table-header-row: définit une ligne d'en-tête d'un tableau (équivalent à <tr> dans <thead>).
- dsa-table-header-cell: définit une cellule d'en-tête d'un tableau (équivalent à <th>).
- dsa-table-body: définit un groupe de lignes de corps d'un tableau (équivalent à <tbody>).
- dsa-table-row: définit une ligne de corps d'un tableau (équivalent à <tr> dans <tbody>)
- dsa-table-cell: définit une cellule de corps d'un tableau (équivalent à <td>).
- dsa-table-single-cell-row: définit une cellule de corps d'un tableau prenant toute la largeur d’une ligne. Ce composant est à la fois une ligne et une cellule, il est donc à placer dans dsa-table-body .
Exemple d'intégration d'un tableau sur différents framework:
- app.component.html
<dsa-table>
<dsa-table-head>
<dsa-table-header-row>
<dsa-table-header-cell>Nom</dsa-table-header-cell>
<dsa-table-header-cell>Prénom</dsa-table-header-cell>
</dsa-table-header-row>
</dsa-table-head>
<dsa-table-body>
<dsa-table-row>
<dsa-table-cell>Ocon</dsa-table-cell>
<dsa-table-cell>Esteban</dsa-table-cell>
</dsa-table-row>
</dsa-table-body>
</dsa-table>
- app.component.ts
import {
DSATable,
DSATableHead,
DSATableHeaderRow,
DSATableHeaderCell,
DSATableBody,
DSATableRow,
DSATableCell,
} from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/table/table.js';
import '@ds-autonomie/web-components/dist/components/table-head/table-head.js';
import '@ds-autonomie/web-components/dist/components/table-header-row/table-header-row.js';
import '@ds-autonomie/web-components/dist/components/table-header-cell/table-header-cell.js';
import '@ds-autonomie/web-components/dist/components/table-body/table-body.js';
import '@ds-autonomie/web-components/dist/components/table-row/table-row.js';
import '@ds-autonomie/web-components/dist/components/table-cell/table-cell.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
API
dsa-table
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
alignment |
Utilisée pour aligner le contenu des cellules du tableau. |
left right |
left |
|
expandable |
Permet au tableau de contenir des lignes extensibles. Veuillez ajouter des éléments dsa-table-expanded-row en-dessous de chaque dsa-table-row afin d'afficher ces lignes extensibles. |
boolean |
false |
|
reorderable |
Permet aux lignes du tableau d'être réordonnables par glisser-déposer ou au clavier. |
boolean |
false |
|
role
|
Identifie le rôle du tableau. Il est recommandé de ne pas modifier cette propriété. |
string |
table |
|
size |
La taille des éléments du tableau. |
small medium large |
medium |
|
selectable |
Permet aux lignes du tableau d'être sélectionnables. |
boolean |
false |
|
sortable |
Active la fonctionnalité de tri sur toutes les colonnes du tableau. |
boolean |
false |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principale du dsa-table. Nous vous conseillons fortement d'utiliser les sous-composants développés pour cette occasion. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|
dsa-table-row-all-selected |
{{ selectedRows : DSATableRow[] }} |
|
dsa-table-row-selected |
{{ selectedRow : DSATableRow, selectedRows : DSATableRow[] }} - Émis après la sélection d'une ligne. |
|
dsa-table-row-reordered |
{{ movedRow : DSATableRow, oldIndex : number, newIndex : number, rows : DSATableRow[], source : 'keyboard' | 'pointer' }} - Émis après qu'une ligne a été réordonnée. |
dsa-table-head
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
loading |
Affiche un état de chargement. Héritée du parent dsa-table-container le cas échéant. Cet état sera appliqué aux composants enfants dsa-table-header-row et dsa-table-header-cell. |
boolean |
false |
|
role |
Identifie le rôle du table-head. Il est recommandé de ne pas modifier cette propriété. |
string |
rowgroup |
|
skeletonEffect skeleton-effect |
Désigne quel effet le squelette utilisera. Héritée du parent dsa-table-container le cas échéant. Cet état sera appliqué aux composants enfants dsa-table-header-row et dsa-table-header-cell. |
pulse sheen none |
none |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principale du dsa-table-head. Nous vous conseillons fortement d'utiliser les sous-composants développés pour cette occasion. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
dsa-table-body
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
loading |
Affiche un état de chargement. Héritée du parent dsa-table-container le cas échéant. Cet état sera appliqué aux composants enfants dsa-table-row et dsa-table-cell.
|
boolean |
false |
|
role
|
Identifie le rôle du table-body. Il est recommandé de ne pas modifier cette propriété. |
string |
rowgroup |
|
skeletonEffect skeleton-effect |
Désigne quel effet le squelette utilisera. Héritée du parent dsa-table-container le cas échéant. Cet état sera appliqué aux composants enfants dsa-table-row et dsa-table-cell.
|
pulse sheen none
|
'none' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal du dsa-table-body. Nous vous conseillons fortement d'utiliser les sous-composants développés pour cette occasion. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
dsa-table-header-row
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
loading |
Affiche un état de chargement (désactive les actions sur la ligne). Héritée du parent dsa-table-head. |
boolean |
false |
|
role
|
Identifie le rôle du table-header-row. Il est recommandé de ne pas modifier cette propriété. |
string |
row |
|
selected |
Indique visuellement que l'élément est sélectionné. |
boolean |
false |
|
selectionLabel selection-label |
L'attribut aria-label pour la <checkbox> à sélectionner. |
string |
'' |
|
selectionName selection-name |
L'attribut name pour la <checkbox> à sélectionner. S'il est présent, cette ligne du tableau pourra être sélectionnée. |
string |
'' |
|
selectionValue selection-value |
L'attribut value pour la <checkbox> à sélectionner. |
string |
'' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal du dsa-table-header-row. Nous vous conseillons fortement d'utiliser les sous-composants développés pour cette occasion. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-table-row-all-change-selection |
Émis lorsque toutes les lignes sont sélectionnées ou désélectionnées à la suite d'une interaction avec la case à cocher. |
dsa-table-header-cell
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
alignment |
Utilisée pour aligner le contenu de la cellule d'en-tête. |
left right |
'left' |
|
loading |
Affiche un état de chargement. Héritée du parent dsa-table-head. |
boolean |
false |
|
role
|
Identifie le rôle du table-header-cell. Il est recommandé de ne pas modifier cette propriété. |
string |
columnheader |
|
skeletonEffect skeleton-effect |
Désigne quel effet le squelette utilisera. Héritée du parent dsa-table-head. |
pulse sheen none
|
'none' |
|
sortable |
Active la fonctionnalité de tri. |
boolean |
false |
|
sortDirection sort-direction |
Le sens de tri de la colonne. |
ascending descending none |
none |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principale du dsa-table-header-cell. Ici, vous pouvez utiliser vos propres composants, ainsi que ceux du design-system. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-table-header-cell-sort |
{{ oldDirection: TABLE_SORT_DIRECTION, sortDirection: TABLE_SORT_DIRECTION }} - Émis lorsqu'une cellule d'en-tête de tableau change de sens de tri. |
dsa-table-row
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
expandable |
Affiche le bouton permettant d'ouvrir / fermer la ligne extensible (dsa-table-expanded-row) se situant en-dessous de celui-ci. |
boolean |
false |
|
expanded |
Indique si la ligne extensible est affichée ou bien cachée. Cette valeur est propagée à l'élément dsa-table-expanded-row le plus proche de celui-ci. |
boolean |
false |
|
hideExpandedLabel hide-expanded-label |
Libellé accessible utilisé lorsque le bouton permettant d'ouvrir / fermer la ligne extensible est en état d'ouverture. |
string |
'' |
|
loading |
Affiche un état de chargement (désactive les actions sur la ligne). Héritée du parent dsa-table-body. |
boolean |
false |
|
role
|
Identifie le rôle du table-row. Il est recommandé de ne pas modifier cette propriété. |
string |
row |
|
selected |
Indique visuellement que l'élément est sélectionné. |
boolean |
false |
|
selectionLabel selection-label |
L'attribut aria-label pour la <checkbox> à sélectionner. |
string |
'' |
|
selectionName selection-name |
L'attribut name pour la <checkbox> à sélectionner. S'il est présent, cette ligne du tableau pourra être sélectionnée. Si le dsa-table parent possède l'attribut selectable à true, des selection-name seront attribués à chaque ligne du tableau par défaut. L'appellation de ces selection-name est la suivante: selection-name='row-${index}' |
string |
'' |
|
selectionValue selection-value |
L'attribut value pour la <checkbox> à sélectionner. |
string |
'' |
|
showExpandedLabel show-expanded-label |
Libellé accessible utilisé lorsque le bouton permettant d'ouvrir / fermer la ligne extensible est en état de fermeture. |
string |
'' |
|
size |
La taille de la ligne. |
small medium large |
'medium' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principale du dsa-table-row. Nous vous conseillons fortement d'utiliser les sous-composants développés pour cette occasion. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
dsa-table-row-change-selection |
Émis lorsqu'une ligne est sélectionnée ou désélectionnée à la suite d'une interaction avec la case à cocher. |
|
dsa-table-row-click |
Émis lorsque l'utilisateur clique sur la ligne. Pour éviter d'émettre cet évènement lors du clique sur un élément interactif au sein de la ligne, veuillez utiliser la méthode stopPropagation() lors de la gestion de votre évènement. |
dsa-table-cell
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
loading |
Affiche un état de chargement. Héritée du parent dsa-table-row. |
boolean |
false |
|
role
|
Identifie le rôle du table-cell. Pour désigner une cellule en temps qu'en-tête de ligne, vous pouvez utiliser la valeur rowheader. |
string |
cell |
|
skeletonEffect skeleton-effect |
Désigne quel effet le squelette utilisera. Héritée du parent dsa-table-row. |
pulse sheen none |
'none' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
|
Description |
|
(défaut) |
Le contenu principale du dsa-table-cell. Ici, vous pouvez utiliser vos propres composants, ainsi que ceux du design-system. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
dsa-table-single-cell-row
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
role
|
Identifie le rôle du table-single-cell-row. Il est recommandé de ne pas modifier cette propriété. |
string |
row |
|
colspan |
Définit le nombre de colonnes qu’occupera la case/ligne. Il est recommandé de ne pas modifier cette propriété car sa valeur est définie automatiquement par le dsa-table parent |
number |
1 |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
|
Description |
|
(défaut) |
Le contenu principale du dsa-table-cell. Ici, vous pouvez utiliser vos propres composants, ainsi que ceux du design-system. |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.
Références
Voici la liste des références vers les composants liés:
Tableaux complexes
Le composant <dsa-table> ne permet pas l’utilisation de cellules fusionnées.
Pour appliquer le style du DSA sur votre tableau complexe existant, vous pouvez utiliser les classes CSS à disposition.