j-TableGrid

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

The component makes a simple table grid (composed of div elements) divided by a simple border that you can modify.

Configuration:

count {Number} a default count of items per row
countxs {Number} items per row for mobile display
countsm {Number} items per row for small display
countmd {Number} items per row for medium display
countlg {Number} items per row for a large display
parent {String} for obtaining size (default: window)
margin {Number} a vertical margin (default: 0)
scrollbar {Boolean} enables custom scrollbar (default: false)
fill {Boolean} fills the grid with empty rowsm need to define row and scrollbar
row {Number} a default row height for all displays (default: 0)
rowxs {Number} a default row height for mobile display (default: 0)
rowsm {Number} a default row height for small display (default: 0)
rowmd {Number} a default row height for medium display (default: 0)
rowlg {Number} a default row height for large display (default: 0)
scrolltop {Boolean} scrolls to the top after change data (default: true)

Classes:

ui-tablegrid-bl means border-left
ui-tablegrid-bt means border-top
ui-tablegrid-first first item in the row
ui-tablegrid-last last item in the row
ui-tablegrid-empty empty item

Use it with <ui-component name="tablegrid">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:500px;padding:10px">
	<ui-component name="tablegrid" path="items" config="count:3" style="border:1px solid #EBECF2">
		<script type="text/html">
			<div style="padding:20px 0;text-align:center">{{ value.name }}</div>
		</script>
		<script type="text/html">
			<div style="padding:20px 0;text-align:center" class="b">Optional: empty</div>
		</script>
	</ui-component>
</div>
<script>
	var items = [{ name: 'Total.js' }, { name: 'SuperAdmin' }, { name: 'Code Editor' }, { name: 'jComponent' }];
</script>