index.html

//https://www.youtube.com/watch?v=Kic2rnwU2_s
<h1>Tables</h1>

<form id="sign">
	<input id="alias" placeholder="username">
	<input id="pass" type="password" placeholder="passphrase">
	<input id="in" type="submit" value="sign in">
	<input id="up" type="button" value="sign up">
</form>

<button id="tadd">+table</button>
<ul></ul><br\>

<div id="table"></div>
<button id="radd">+ row</button>
<button id="cadd">+ col</button>

<style>
div {
	position: relative;
	overflow:hidden;
}
.cell {
	width: 5em;
	height: 5em;
	border: 1px solid black;
	float: left;
}
.item {
	fload: left;
	min-width: 5em;
}
</style>
<div class="model" style="display: none;">
	<div class="item"></div>
	<div class="cell"></div>
	<div class="row"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/lib/open.js"></script>

<script>

var gun =Gun(['http://llocalhost:8080/gun']);
//var gun =Gun();
var user = gun.user();
$('#up').on('click', function(e){
user.create($('#alias').val(),$('#pass').val());
});

$('#sign').on('submit', function(e){
e.preventDefault();
user.auth($('#alias').val(),$('#pass').val());
});

user.recall({sessionStroage: true});

gun.on('auth', function(){
$('#sign').hide();
user.get('tables').map().once(list);
});


$('#tadd').on('click', function(e){
	if(!userr.is){return alert("login first")}
	var cell =user.get('cells').set({what: "Edit me!", sort: 1});
	var row = user.get('rows').set({sort: 1});
	row.get('cells').set(cell);
	var name = prompt("What do you want to call this table?")
	var table = user.get('tables').set({name: name});	
	table.get('rows').set(row);
	choose(table);
});

$(document).on('click', '.item', function(){
	choose($(this).data('$'));
});

function choose(table){
	choose.table = table;
	table.open(render);
}

function render(data){
	console.log(data);
	$('#table').empty(); //BAD
	Gun.obj.map(data.rows, function(row, id){
	var $r = grab(id, '.model .row', '#tble');
	Gun.obj.map(row.cells, function(cell, id){
	var $c = grab(id, '.model .cell', $r);
	$c.text(cell.what);
	});
     });
}

$(document).on('click', '.cell', function(e){
	var id =$(this).data('id'), ref = gun.get(id);
	var what = prompt("what should be in this vell");
	ref.get('what').put(what);
});

$('#radd').on('click', function(){
	if(!user.is){ return alert("loginfirst")}
	choose.table.get('rows').set();

	var cell = user.get('cells').set({what: "Edit me!", sort: 1});
	var row = user.get('rows').set({sort: 1});
	row.get('cells').set(cell);
	choose.table.get('rows').set(row);
});

$('#cadd').on('click', function(){
	if(!user.is){return alert("login first")}
	choose.table.get('rows').map().once(function(){
	var cell = user.get('cells').set({what: "Edit me!", sort: 1});
	this.get('cells').set(cell);
	});
});

function grab(id,$model, $to){
	var did = btoa(id).replace(/[\+\-\=\.]/ig, '');
	return $('#' +did).get(0) || $($model).clone(true,true).attr('id', did).appendTo($to).data('id', id);
};
function list(table, id, $model, $to){
	var li= grab(id, '.model .item', 'ul');
	$(li).text(table.name).data('$', this);
};
</script>