Tableau

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:

  • Size classes: fr-table--sm, fr-table--lg (no class for normal sized tables)
  • fr-table--bordered: adds a vertical border between each column
  • fr-table--no-scroll prevents horizontal scrolling on mobile

Tag name: dsfr_table

Usage: {% dsfr_table data_dict %}

Exemples

Exemple 1 

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

Exemple 2 

{'caption': 'Tableau avec bordure',
 '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': 'fr-table--bordered',
 'header': ['Colonne 1',
            'Colonne 2',
            'Colonne 3',
            'Colonne 4',
            'Colonne 5',
            'Colonne 6']}
Tableau avec bordure
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6
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

Exemple 3 

{'caption': 'Tableau non-scrollable',
 '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': 'fr-table--no-scroll fr-table--bordered',
 'header': ['Colonne 1',
            'Colonne 2',
            'Colonne 3',
            'Colonne 4',
            'Colonne 5',
            'Colonne 6']}
Tableau non-scrollable
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6
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