Table elements create and handle tabular data.
<table> <thead> <tbody> <th> <td> <tfoot> <colgroup> <col> <caption>
<table class=" ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Size</th>
<th>Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>n234as</th>
<th><a href="#">apple-sauce</a></th>
<td>0.5 KB</td>
<td><time>12/01/2019 11:04:19</time></td>
<td>
<ul>
<li><a href="#">View Details</a></li>
<li>
<button class="c-button c-button--as-link">
Delete
</button>
</li>
</ul>
</td>
</tr>
<tr>
<th>56l810</th>
<th><a href="#">milk-shake-032</a></th>
<td>300.0 KB</td>
<td><time>03/22/2021 05:23:01</time></td>
<td>
<ul>
<li><a href="#">View Details</a></li>
<li>
<button class="c-button c-button--as-link">
Delete
</button>
</li>
</ul>
</td>
</tr>
<tr>
<th>3r56xc</th>
<th><a href="#">white-candy-5</a></th>
<td>1.5 MB</td>
<td><time>12/01/2019 11:04:19</time></td>
<td>
<ul>
<li><a href="#">View Details</a></li>
<li>
<button class="c-button c-button--as-link">
Delete
</button>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "elements",
"shouldLoadCMS": true,
"data": {
"cols": [
"ID",
"Name",
"Size",
"Time",
"Actions"
],
"rows": [
{
"id": "n234as",
"name-link": "apple-sauce",
"custom-1": "0.5 KB",
"time": "12/01/2019 11:04:19",
"acts": [
{
"is-link": true,
"text": "View Details"
},
{
"is-button": true,
"text": "Delete"
}
]
},
{
"id": "56l810",
"name-link": "milk-shake-032",
"custom-1": "300.0 KB",
"time": "03/22/2021 05:23:01",
"acts": [
{
"is-link": true,
"text": "View Details"
},
{
"is-button": true,
"text": "Delete"
}
]
},
{
"id": "3r56xc",
"name-link": "white-candy-5",
"custom-1": "1.5 MB",
"time": "12/01/2019 11:04:19",
"acts": [
{
"is-link": true,
"text": "View Details"
},
{
"is-button": true,
"text": "Delete"
}
]
}
]
}
}