Utilisation
Les classes suivantes sont disponibles pour donner à vos tableaux complexes déjà existants le style du DSA :
|
Classe CSS |
Utilisation |
|---|---|
|
dsa-table |
<table> ou équivalent |
|
dsa-table—small |
Modifie la hauteur des lignes du tableau |
|
dsa-table—large |
Modifie la hauteur des lignes du tableau |
|
dsa-table-header-row |
<tr> à l’intérieur de <thead> (ou équivalent) |
|
dsa-table-row |
<tr> à l’intérieur de <tbody> (ou équivalent) |
|
dsa-table-header-cell |
<th> (ou équivalent) |
|
dsa-table-cell |
<td> (ou équivalent) |
|
dsa-table-header-cell--hover |
Ajoute le style hover à l’en-tête |
|
dsa-table-cell--hover |
Ajoute le style hover à la cellule |
|
dsa-table--sticky-header |
Fixe l’en-tête du tableau lors du défilement |
|
dsa-table--sticky-column-1, dsa-table--sticky-column-2, dsa-table--sticky-column-3 |
Permettent de fixer les premières colonnes du tableau au défilement |
Exemples
Tableau classique
Tableau avec des cellules fusionnées
const th = [
...canvasElement.querySelectorAll<DSATableHeaderCell>('th'),
].filter((cell) => cell.dataset.colnum);
const td = [...canvasElement.querySelectorAll<DSATableCell>('td')].filter(
(cell) => cell.dataset.colnum
);
const findColCells = (i: string | undefined) => {
return td.filter((cell) => cell.dataset.colnum === i);
};
const findColHeaderCells = (i: string | undefined) => {
return th.filter((cell) => cell.dataset.colnum === i);
};
const columnEnter = (event: Event) => {
const i = (event.currentTarget as DSATableCell | DSATableHeaderCell)
.dataset.colnum;
findColCells(i).map((cell) =>
cell.classList.add('dsa-table-cell--hover')
);
findColHeaderCells(i).map((cell) =>
cell.classList.add('dsa-table-header-cell--hover')
);
};
const columnLeave = (event: Event) => {
const i = (event.currentTarget as DSATableCell | DSATableHeaderCell)
.dataset.colnum;
findColCells(i).map((cell) =>
cell.classList.remove('dsa-table-cell--hover')
);
findColHeaderCells(i).map((cell) =>
cell.classList.remove('dsa-table-header-cell--hover')
);
};
td.forEach((cell) => {
cell.addEventListener('mouseenter', columnEnter);
cell.addEventListener('mouseleave', columnLeave);
});
th.forEach((cell) => {
cell.addEventListener('mouseenter', columnEnter);
cell.addEventListener('mouseleave', columnLeave);
});
Code TS associé
Avec une en-tête “sticky”
Avec des colonnes “sticky”