Tableau

• Voir la page de documentation du composant sur le Système de Design de l’État Ouvre une nouvelle fenêtre
• Voir la page d’exemple du Système de Design de l’État Ouvre une nouvelle fenêtre

Documentation du tag

Returns a table item. Takes a dict as parameter, with the following structure:

data_dict = {
    "caption": "The title of the table",
    "content": "A list of rows, each row being a list of cells itself",
    "extra_classes": "(Optional) string with names of extra classes",
    "header": "(Optional) list of cells for the table header."
}

All of the keys of the dict can be passed directly as named parameters of the tag.

Relevant extra_classes:

• Color classes (See the list), for example village-table--green-emeraude
• village-table--bordered: adds a border under each line
• village-table--no-scroll prevents horizontal scrolling on mobile
• village-table--layout-fixed: forces the table at 100% and equal size columns
• village-table--no-caption: hides the caption
• village-table--caption-bottom: sets the caption after the table instead of before

Tag name: village_table

Usage: {% village_table data_dict %}

Exemples

Données

{'caption': 'Tableau basique',
 'content': [['a', 'b', 'c'], ['d', 'e', 'f']],
 'header': ['Colonne 1', 'Colonne 2', 'Colonne 3']}

Résultat

Données

{'caption': 'Tableau vert',
 'content': [['Lorem ipsum dolor sit amet',
              'consectetur adipiscing elit',
              'sed do eiusmod tempor incididunt ut',
              'labore et dolore magna aliqua',
              'At quis risus sed vulputate odio ut enim',
              100.0],
             ['At risus viverra',
              'adipiscing at in tellus',
              'integer feugiat',
              'Aliquam purus sit amet luctus venenatis lectus',
              'Pellentesque id nibh tortor id aliquet lectus proin',
              2]],
 'extra_classes': 'village-table--green-emeraude village-table--bordered',
 'header': ['Colonne 1',
            'Colonne 2',
            'Colonne 3',
            'Colonne 4',
            'Colonne 5',
            'Colonne 6']}

Résultat