Table

Fully responsive and customizable table

Table fragment is to display a table in the page containing as many rows and columns as you want and make them responsive. Table cells can contain text, icons and buttons which can also be linked.

Table Fragment

Tables are responsive by default
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6
Row 1 Value Long Value Value Long Button Button
Row 2 Value Value Long Value

Code

+++
fragment = "table"
#disabled = false
date = "2017-10-10"
weight = 110
background = "secondary"

title = "Table Fragment"
subtitle= "Tables are responsive by default"
#title_align = "left" # Default is center, can be left, right or center

[header]
  [[header.values]]
    text = "Header 1"
    # hide_on_mobile = true

  [[header.values]]
    text = "Header 2"

  [[header.values]]
    text = "Header 3"
    hide_on_mobile = true

  [[header.values]]
    text = "Header 4"
    hide_on_mobile = true

  [[header.values]]
    text = "Header 5"

  [[header.values]]
    text = "Header 6"

[[rows]]
  [[rows.values]]
    header = "Row 1"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    text = "Long Value"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    button = "Long Button"
    url = "#"
    color = "success"

  [[rows.values]]
    button = "Button"
    url = "#"
    color = "danger"
    align = "center"

[[rows]]
  [[rows.values]]
    header = "Row 2"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    text = "Value"

  [[rows.values]]
    text = "Long Value"

  [[rows.values]]
    text = ""

  [[rows.values]]
    icon = "fas fa-download"
    url = "#"
    align = "center"
+++