ux-table

Read Foundation tables.html page for details.


Use Cases Manifest Table - 3 rows, 4 columnsTable - 4 rows, 4 columnsTable - 2 rows, 5 columnsTable - 2 rows, 6 columns
    {{#events.uxTable_93}}
  • {{this}}
  • {{/}}

	{
    "class": "full-width",
    "header": {
        "class": "header-class",
        "cell": [
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            }
        ]
    },
    "body": {
        "class": "body-class",
        "rows": [
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer content Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            }
        ]
    },
    "footer": {
        "class": "footer-class",
        "cell": [
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            }
        ]
    }
}
    {{#events.uxTable_94}}
  • {{this}}
  • {{/}}

	{
    "class": "full-width",
    "header": {
        "class": "header-class",
        "cell": [
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            }
        ]
    },
    "body": {
        "class": "body-class",
        "rows": [
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer content Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            }
        ]
    },
    "footer": {
        "class": "footer-class",
        "cell": [
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            }
        ]
    }
}
    {{#events.uxTable_95}}
  • {{this}}
  • {{/}}

	{
    "class": "full-width",
    "header": {
        "class": "header-class",
        "cell": [
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            }
        ]
    },
    "body": {
        "class": "body-class",
        "rows": [
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer content Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer content Donec id elit non mi porta gravida at eget metus."
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    }
                ]
            }
        ]
    },
    "footer": {
        "class": "footer-class",
        "cell": [
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            }
        ]
    }
}
    {{#events.uxTable_96}}
  • {{this}}
  • {{/}}

	{
    "class": "full-width",
    "header": {
        "class": "header-class",
        "cell": [
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            },
            {
                "label": "Table Header"
            }
        ]
    },
    "body": {
        "class": "body-class",
        "rows": [
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer content Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer content Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            },
            {
                "class": "row-class",
                "cell": [
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "label": "Content Goes Here"
                    },
                    {
                        "class": "cell-class",
                        "label": "This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus."
                    },
                    {
                        "label": "Content Goes Here"
                    }
                ]
            }
        ]
    },
    "footer": {
        "class": "footer-class",
        "cell": [
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            },
            {
                "label": "Table Footer"
            }
        ]
    }
}

Semantic Data Model
header - Containing cells to display inside of a thead
body - Containing rows and cells
footer - Containing cells to display inside of a tfoot