Skip to content

ColumnList

Description

Display the details either in column or grid based on configuration like below examples.

Attributes

  • tile:column-list
  • title
  • list: [Array of Object] Display Data in column or grid
    • title: Subtitle of column list item
    • icon: Icon of column list item
    • values: Title of column list item. Also allow template string to display from the dispatches data.
  • layout: grid | column. Display list variant
  • columns: Provide it in number. Based that divide the grid column. Only for grid layout. By default, is divide in 2 columns.
  • classes: [Objects]
    • rowWrapper, colWrapper, row
  • styles: [Objects]
    • rowWrapper, valuesWrapper, titleWrapper, iconWrapper, content, icon

Example1

{
  "tile": "column-list",
  "layout": "grid",
  "columns": 3,
  "options": {
    "onClick": "open"
  },
  "styles": {
    "root": {
      "height": "120px"
    },
    "widget": {
      "lineHeight": "1.5rem"
    },
    "colWrapper": {
      "flex": "1"
    },
    "rowWrapper": {
      "color": "#111C45"
    },
    "valuesWrapper": {
      "fontSize": "16px",
      "lineHeight": "1.2rem",
      "color": "#111C45"
    },
    "titleWrapper": {
      "fontSize": "16px",
      "lineHeight": "1.3rem",
      "color": "#111C45"
    },
    "iconWrapper": {
      "fontSize": "2rem",
      "lineHeight": "2.2rem"
    },
    "icon": {
      "flex": "0 0 48px"
    },
    "content": {
      "flex": "1"
    },
    "row": {
      "marginBottom": ".75rem"
    }
  },
  "classes": {
    "rowWrapper": "col-3 d-flex align-items-center",
    "colWrapper": "col-6 d-flex",
    "root": "px-3"
  },
  "list": [
    {
      "title": "ha",
      "icon": "📐",
      "values": "250"
    },
    {
      "title": "KtCO2e",
      "icon": "💨",
      "values": "360"
    },
    {
      "title": "種",
      "icon": "😽",
      "values": "65"
    },
    {
      "title": "本",
      "icon": "🌳",
      "values": "89"
    }
  ]
}

Example2

 {
  "tile": "column-list",
  "layout": "grid",
  "columns": 2,
  "options": {
    "onClick": "open"
  },
  "styles": {
    "root": {
      "height": "120px"
    },
    "widget": {
      "lineHeight": "1.5rem"
    },
    "colWrapper": {
      "flex": "1"
    },
    "rowWrapper": {
      "color": "#111C45"
    },
    "valuesWrapper": {
      "fontSize": "16px",
      "lineHeight": "1.2rem",
      "color": "#111C45"
    },
    "titleWrapper": {
      "fontSize": "16px",
      "lineHeight": "1.3rem",
      "color": "#111C45"
    },
    "iconWrapper": {
      "fontSize": "2rem",
      "lineHeight": "2.2rem"
    },
    "icon": {
      "flex": "0 0 48px"
    },
    "content": {
      "flex": "1"
    },
    "row": {
      "marginBottom": ".75rem"
    }
  },
  "classes": {
    "rowWrapper": "col-3 d-flex align-items-center",
    "colWrapper": "col-6 d-flex",
    "root": "px-3"
  },
  "list": [
    {
      "title": "ha",
      "icon": "📐",
      "values": "{values.hectares}"
    },
    {
      "title": "KtCO2e",
      "icon": "💨",
      "values": "{values.carbon}"
    },
    {
      "title": "種",
      "icon": "😽",
      "values": "{values.animals}"
    },
    {
      "title": "本",
      "icon": "🌳",
      "values": "{values.trees}"
    }
  ]
}