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.

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"
+++

Variables

header

type: object

This array specifies the header row (thead > tr) of the table.

header.values

type: array of objects

Each header.values object present in this array is to describe what the cell in the header row (thead > tr > th) looks like.

header.values.text

type: string

Title of the cell.

header.values.hide_on_mobile

type: boolean
default: false

If set to true, the cell will not appear on smaller devices. The table behaves responsive to the width but using this feature you can lessen the width of the table, making it easier to navigate.

rows

type: object

This array specifies the rows after the header (tbody > tr) of the table.

rows.values

type: array of objects

Each rows.values object present in this array is to describe what the cell in the row (tbody > tr > td) looks like.

rows.values.text

type: string

Title of the cell. Will not appear if rows.values.button or rows.values.icon is set.

rows.values.icon

type: string

If set, the text value will be ignored and instead an icon will appear in the cell. This value will is the class name of that icon (checkout Fontawesome for more info on how to add icons).

rows.values.button

type: string

If set, the text or icon values will be ignored and instead a button will appear in the cell. This value will be shown as the title for that button.

rows.values.url

type: string

URL of the button if rows.values.button or rows.values.icon is set.

rows.values.align

type: left, right, center
default: center

Specifies the horizontal alignment of the cell.

rows.values.hide_on_mobile

type: boolean
default: false

If set to true, the cell will not appear on smaller devices. The table behaves responsive to the width but using this feature you can lessen the width of the table, making it easier to navigate.

Global variables are documented as well and have been omitted from this page.