JSFiddle - React, Tailwind, and code Playground

by Richard van Zon

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>  

<script type="riot/tag">
    
    <datatable>
	<div class="table--row table--row__header">  	
		<div class="table--cell" each={ opts.headerItems }>
		{ title }
		</div>
	</div>
	<div class="table--row" each={ opts.rows }>  
		<div class="table--cell" each={ cells }>
			<div if={ isEditable == false } class="table--value">
				{ value }
			</div>

			<div if={ isEditable } class="table--value table--cell__editable" contenteditable="true">{ value }</div>
			<span class="table--unit">€</span>
		</div>
	</div>
</datatable>
</script>

<datatable></datatable>

SCSS

$table-header-background-color: $color-carnation;
$table-header-color: $color-white;
$table-odd-row-background-color: #e9e9e9;
$table-even-row-background-color: #f6f6f6;

.table {
	margin: 0 0 40px 0;
	width: 100%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	display: table;
	@media screen and (max-width: 580px) {
		display: block;
	}
}

.table--row {
	display: table-row;
	background: $table-even-row-background-color;
	&:nth-of-type(odd) {
		background: $table-odd-row-background-color;
	}
	@media screen and (max-width: 580px) {
		padding: 8px 0;
		display: block;
	}
}

.table--row.table--row__header {
	font-weight: 900;
	color: $table-header-color;
	background: $table-header-background-color;
}

.table--cell {
	padding: 6px 6px;
	display: table-cell;
	@media screen and (max-width: 580px) {
		padding: 2px 12px;
		display: block;
	}
}

.table--value {
	display: inline-block;
	padding: 0 6px;
}

.table--unit {
	display: inline-block;
	@include small;
}

[contenteditable="true"]:hover {
	background-color: white;
}

JavaScript

riot.mount('datatable', {
	headerItems: [ { title: 'Month' }, { title: 'EBITDA 2014' }, { title: 'EBITDA Budget' }],
	rows: [
		{
			cells: [
				{
					value: 'January',
					isEditable: false
				},
				{
					value: 134343,
					isEditable: true
				},
				{
					value: 323232,
					isEditable: true			
				}
			]
		},
		{
			cells: [
				{
					value: 'February',
					isEditable: false
				},
				{
					value: 343434,
					isEditable: true,
				},
				{
					value: 546547,
					isEditable: true
				}
			]
		}
	]
});