Hello my friends!
In this article I want to talk about the yet undocumented feature of the table component - attribute data-body.
With this attribute you can define data for table as ARRAY. Without writting <tr><td>...</td></tr> code.
First - You must define array with table data. Important! Data for table must be defined before moment when a table component will be initied.
var tableData = [
['isUrl(v)', 'Checks if value is url'],
['isTag(v)', 'Checks if value is tag'],
['isColor(v)', 'Checks if value is color (#fff, #ffffff)'],
['isEmbedObject(v)', 'Checks if value is embed object, value to check - html string'],
['isVideoUrl(v)', 'Checks if value is youtube or vimeo video link'],
['isDate(v, f)', 'Checks if value is valid date string. You can set format in second argument'],
['isInt(v)', 'Checks if value is integer'],
['isFloat(v)', 'Checks if value is float'],
['isTouchDevice()', 'Checks if device is touchable'],
['isFunc(v)', 'Checks if value is a function or callable/executable'],
['isObject(v)', 'Checks if value is a object'],
['isArray(v)', 'Checks if value is a array'],
['isType(v, t)', 'Checks if value is a specified type'],
['isMetroObject(el)', 'Checks if value is a Metro component'],
['isJQuery(el)', 'Checks if value is a jQuery object'],
['isM4Q(el)', 'Checks if value is a M4Q object'],
['isQ(el)', 'Checks if value is a M4Q or JQuery object']
];Second - define component table in your page
<table class="table" data-role="table" data-static="true" data-body="tableData">
<thead>
<tr>
<th>Function</th>
<th>Desc</th>
</tr>
</thead>
</table>Full code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" rel="stylesheet">
<title>Table - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
<div class="container">
<table class="table" data-role="table" data-static="true" data-body="tableData">
<thead>
<tr>
<th>Function</th>
<th>Desc</th>
</tr>
</thead>
</table>
</div>
<script>
var tableData = [
['isUrl(v)', 'Checks if value is url'],
['isTag(v)', 'Checks if value is tag'],
['isColor(v)', 'Checks if value is color (#fff, #ffffff)'],
['isEmbedObject(v)', 'Checks if value is embed object, value to check - html string'],
['isVideoUrl(v)', 'Checks if value is youtube or vimeo video link'],
['isDate(v, f)', 'Checks if value is valid date string. You can set format in second argument'],
['isInt(v)', 'Checks if value is integer'],
['isFloat(v)', 'Checks if value is float'],
['isTouchDevice()', 'Checks if device is touchable'],
['isFunc(v)', 'Checks if value is a function or callable/executable'],
['isObject(v)', 'Checks if value is a object'],
['isArray(v)', 'Checks if value is a array'],
['isType(v, t)', 'Checks if value is a specified type'],
['isMetroObject(el)', 'Checks if value is a Metro component'],
['isJQuery(el)', 'Checks if value is a jQuery object'],
['isM4Q(el)', 'Checks if value is a M4Q object'],
['isQ(el)', 'Checks if value is a M4Q or JQuery object']
];
</script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>Link to example page
Comments