@edugouvfr/ngx-dsfr/lib/components/table/table.model.d.ts

NgxDsfr est un portage Angular des éléments d'interface du Système de Design de l'État Français (DSFR).

import { DsfrSize } from '../../shared';
/**
 * Définit les tailles de cellules proposées par le DSFR.
 */
export declare enum DsfrCellSizeConst {
    XS = "XS",
    SM = "SM",
    MD = "MD",
    LG = "LG"
}
/**
 * Type union correspondant aux valeurs de l'enum {@link DsfrCellSizeConst}.
 */
export type DsfrCellSize = `${DsfrCellSizeConst}`;
/**
 * Modèle de tri d'une colonne.
 */
export interface DsfrSortColumn {
    /**
     * Permet de définir le sens du tri de la colonne (`ascending` par defaut).
     */
    order: 'descending' | 'ascending';
    /**
     * Propriété représentée par la colonne.
     */
    field: string;
}
/**
 * Représente l'état courant de la table (pagination et tri).
 */
export interface DsfrTableState {
    /**
     * Indique le numéro de page courante.
     */
    page: number;
    /**
     * Indique le nombre de lignes affichées par page.
     */
    rowsPerPage: number;
    /**
     * Décrit les modalités de tri d'une colonne.
     */
    sort: DsfrSortColumn | null;
}
/**
 * Décrit un évenement au changement de la pagination.
 */
export interface DsfrTablePaginationEvent {
    /**
     * Indique le numéro de la page courante.
     */
    currentPage: number;
    /**
     * Indique le nombre de lignes affichées par page.
     */
    rowsPerPage: number;
}
/**
 * Décrit un évenement au changement de la sélection.
 */
export interface DsfrTableSelectionEvent {
    /**
     * Fournit la ligne concernées par le changement de sélection.
     */
    row: any;
    /**
     * Indique les lignes actuellement sélectionées.
     *
     * (contiendra `row` lors d'une sélection et ne contiendra pas `row` lors d'une désélection)
     */
    selectedRows: any[];
}
/**
 * Décrit le modèle de présentation des options d'une cellule.
 */
export interface DsfrCellOptions {
    /**
     * Active le retour à la ligne.
     */
    allowWrap?: boolean;
    /**
     * La colonne est fixe.
     */
    fixed?: boolean;
    /**
     * Position en cas de colonne fixe, à gauche par défaut.
     */
    fixedPosition?: 'left' | 'right';
    /**
     * Alignement horizontal des cellules de la colonne, à gauche par défaut.
     */
    textAlign?: 'right' | 'center';
    /**
     * Alignement vertical des cellules de la colonne, centré par défaut.
     */
    verticalAlign?: 'top' | 'bottom';
}
/**
 * Décrit le modèle de présentation d'une colonne.
 */
export interface DsfrColumn extends DsfrCellOptions {
    /**
     * Propriété représentée par la colonne.
     */
    field: string;
    /**
     * Libellé affiché.
     */
    label?: string;
    /**
     *  La colonne est triable.
     */
    sortable?: boolean;
    /**
     * Attribut colspan.
     */
    colspan?: number;
    /**
     * Largeur minimale de la colonne, MD par défaut.
     */
    minWidth?: DsfrCellSize;
    /**
     * Ne pas afficher le libellé de la colonne.
     */
    labelSrOnly?: boolean;
    /**
     * Fonction personnalisée de tri.
     */
    sortFunction?: (a: any, b: any, order: 'ascending' | 'descending') => number;
    /**
     * Fonction de formatage du contenu d'une cellule.
     */
    formatFunction?: (cellValue: any) => string;
}
/**
 * Décrit le modèle de présentation des options d'une ligne.
 */
export interface DsfrRowOptions {
    /**
     * L'identifiant unique de la ligne.
     */
    id: string | number;
    /**
     * Permet d'indiquer que la ligne n'est pas sélectionnable.
     */
    disableSelect?: boolean;
}
/**
 * Décrit le modèle de présentation des options d'une table.
 */
export interface DsfrTableOptions {
    /**
     * Pas de scroll horizontal sur le tableau.
     */
    noScroll?: boolean;
    /**
     * Lignes sélectionnables.
     */
    selectable?: boolean;
    /**
     * Afficher une checkbox de sélection de toutes les lignes.
     */
    showSelectAll?: boolean;
    /**
     * Titre invisible (sr-only).
     */
    captionSrOnly?: boolean;
    /**
     * Positionne le titre au bas de la table.
     */
    bottomCaption?: boolean;
    /**
     * Taille des cellules du tableau (SM par défaut).
     */
    cellSize?: DsfrSize;
    /**
     * Affiche des bordures verticales.
     */
    bordered?: boolean;
    /**
     * Active le retour à la ligne automatique des éléments.
     */
    allowWrap?: boolean;
    /**
     * Elément correspondant au titre du tableau si caption n'est pas renseigné.
     */
    ariaLabelledBy?: string;
    /**
     * Elément correspondant à la description du tableau si caption n'est pas renseigné.
     */
    ariaDescribedBy?: string;
    /**
     * Ajoute l'attribut aria rôle à la table (ex. "grid").
     */
    role?: string;
}