tablevu 0.1.4 → 0.2.1

package/src/table.js

@@ -1,382 +1,580 @@
-/*
- *  tablevu
- *  A small, fast, easy-to-use table component.
- *  Copyright (c) 2020 Ender Boz <ender.boz@gmail.com>
- *  https://github.com/endb/tablevu/LICENCE
- */
-
-import { h, reactive, watch } from 'vue';
-
-const tablevuStatuses = { Error: -1, Ready: 0, Loading: 1 };
-
-const tablevu = {
-	props: {
-		data: { type: [Array, Object] },
-		search: { type: String },
-		filter: { type: [Array, Object] },
-		command: { type: Array, default: [] },
-		rowid: { type: String },
-		onRowClick: { type: Function },
-		onRowDblClick: { type: Function },
-		class: { type: String, default: 'table' },
-		buttonclass: { type: String, default: 'btn' }
-	},
-
-	setup(props) {
-		let rows = [];
-
-		const spec = reactive({
-			pageSize: props.data.pageSize || 20,
-			pageCount: 0,
-			currPage: 0,
-			sort: props.data.sort || [],
-			status: tablevuStatuses.Ready,
-			timer: null,
-			time: null,
-			cols: [],
-			filter: null,
-			search: null
-		});
-
-		// Setup Search Input //
-		watch(() => props.search, (n,o) => {
-			if (spec.timer)
-				clearTimeout(spec.timer);
-
-			if ((o && o.length > (props.data.searchMinChar || 3) && (n == undefined || n == null || n.length <= (props.data.searchMinChar || 3))) || (n && n.length > (props.data.searchMinChar || 3))) {
-				spec.timer = setTimeout(() => { if (props.search && props.search.length > (props.data.searchMinChar || 3)) spec.search = props.search; else spec.search = null; refresh(); }, 444);
-			}
-		});
-
-		// Setup dynamic filter //
-		watch(() => props.filter, () => {
-			if (props.filter)
-				spec.filter = props.filter;
-			else
-				spec.filter = null;
-
-			refresh();
-		}, { deep: true });
-
-		// Setup commands //
-		watch(() => props.command, (n,o) => {
-			if (n && n.length > 0) {
-				const c = props.command[n.length-1];
-
-				if (c && c.name) {
-					if (c.name.toLowerCase() == 'refresh') refresh()
-					else if (c.name.toLowerCase() == 'first') first()
-					else if (c.name.toLowerCase() == 'prior') prior()
-					else if (c.name.toLowerCase() == 'next') next()
-					else if (c.name.toLowerCase() == 'last') last()
-					else console.log('Unknown command');
-				}
-
-				props.command.length = 0;
-			}
-		}, { deep: true });
-		/*****************************************************************
-
-		*****************************************************************/
-		function first() { // Go First Page //
-			page(1);
-		}
-
-		function prior() { // Go Previus Page //
-			if (spec.currPage > 1) {
-				page(spec.currPage - 1);
-			} else {
-				page(spec.currPage);
-			}
-		}
-
-		function next() { // Go Next Page //
-			page(spec.currPage + 1);
-		}
-
-		function last() { // Go Last Page //
-			page(spec.pageCount);
-		}
-
-		function refresh() { // Refresh active page //
-			page(spec.currPage);
-		}
-
-		function orderby(ind) { // Sort data //
-			if (spec.sort && spec.sort.length > 0) {
-				let l = spec.sort.findIndex(f => f.index == ind);
-
-				if (l == 0) {
-					spec.sort[l].dir = spec.sort[0].dir ? null : 'desc';
-				} else if (l > 0) {
-					spec.sort.splice(l, 1);
-				}
-
-				if (l != 0) {
-					spec.sort.unshift({ index: ind, dir: null });
-				}
-
-				if (spec.sort.length > 2) {
-					spec.sort.pop();
-				}
-			} else  {
-				spec.sort.push({ index: ind, dir: null });
-			}
-
-			page(spec.currPage);
-		}
-	
-		// Go Custom Page number //
-		function page(currentPage) {
-			if (!props.data) {
-				return;
-			}
-
-			//const tm = Date.now();
-
-			spec.status = tablevuStatuses.Loading;
-			//spec.currPage = currentPage;
-
-			if (Array.isArray(props.data)) {
-				rows = props.data;
-
-				spec.pageCount = (rows.length > 0 && spec.pageSize > 0) ? (rows.length / spec.pageSize) : 0;
-				spec.status = tablevuStatuses.Ready;
-				spec.currPage = currentPage;
-				spec.time = Date.now();
-			}
-			
-			if (props.data.adapter) {
-				const r = props.data.adapter({ pageSize: spec.pageSize, pageCount: spec.pageCount, currPage: currentPage, sort: spec.sort, cols: spec.cols, filter: spec.filter, search: spec.search });
-
-				fetch(r).then(res => res.json()).then(res => {
-					let cnt = 0;
-					if (res && Object.hasOwnProperty.call(res, '@count')) {
-						cnt = BigInt.parse(res['@count']);
-					}
-
-					if (res && res.value) {
-						rows = res.value;
-						
-						spec.pageCount = (cnt > 0 && spec.pageSize > 0) ? (cnt / spec.pageSize) : 0;
-						spec.status = tablevuStatuses.Ready;
-						spec.currPage = currentPage;
-						spec.time = Date.now();
-					}
-				}).catch(err => {
-					console.error(err);
-					// debugger;
-					spec.status = tablevuStatuses.Error;
-					alert(err.message);
-				});
-			}
-		}
-		/*****************************************************************
-		 Render Functions
-		*****************************************************************/
-		function renderCell(col, val) {
-			let v;
-			const o = { style: {} };
-
-			if (col.align) {
-				o.style['text-align'] = col.align;
-			}
-
-			if (col.width) {
-				o.style['max-width'] = col.width;
-			}
-
-			if (val) {
-				if (col.type == 'datetime' || col.type == 'date' || col.type == 'time') {
-					let t = new Date(val);
-
-					if (col.type == 'date')
-						v = t.toLocaleDateString();
-					else
-					if (col.type == 'time')
-						v = t.toLocaleTimeString();
-					else
-						v = t.toLocaleString();
-				} else {
-					if (col.type == 'numeric') {
-						v = Number.parse(val);
-					} else {
-						v = val;
-					}
-				}
-			} else {
-				v = '';
-			}
-
-			return h('td', o, v);
-		}
-
-		function renderCustomCell(col, row) {
-			const o = { style: {} };
-
-			if (col.align) {
-				o.style['text-align'] = col.align;
-			}
-
-			if (col.width) {
-				o.style['max-width'] = col.width;
-			}
-
-			let f = col.render(row);
-
-			return h('td', o, f);
-		}
-
-		function renderRow(index, row) {
-			const o = {};
-			const r = [];
-
-			o.key = index;
-
-			if (props.rowid) {
-				o.rowid = row[props.rowid];
-			}
-
-			for (let i = 0; i < spec.cols.length; i += 1) {
-				let v;
-				const c = spec.cols[i];
-
-				if (c.render) {
-					v = renderCustomCell(c, row);
-					r.push(v);
-				} else {
-					if (c.depth) {
-						v = row;
-						for (let j = 0; j < c.depth.length; j += 1) {
-							if (v)
-								v = v[c.depth[j]];
-						}
-					} else {
-						v = row[c.name];
-					}
-
-					r.push(renderCell(c, v));
-				}
-			}
-
-			if (props.data.onRowDblClick) {
-				o.ondblclick = (event) => {
-					const r = rows[event.currentTarget.rowIndex-1];
-					props.data.onRowDblClick(event, r); 
-				};
-			} else if (props.onRowDblClick) {
-				o.ondblclick = (event) => {
-					const r = rows[event.currentTarget.rowIndex-1];
-					props.onRowDblClick(event, r); 
-				};
-			}
-
-			if (props.onRowClick) {
-				o.onClick = (event) => {
-					const r = rows[event.currentTarget.rowIndex-1];
-					props.onRowClick(event, r);
-				};
-			}
-
-			return h('tr', o, r);
-		}
-
-		function renderHeader() {
-			const th = [];
-
-			for (let i = 0; i < spec.cols.length; i += 1) {
-				const s = [];
-
-				if (spec.cols[i].label) {
-					s.push(h('span', spec.cols[i].label));
-				} else {
-					s.push(h('span', spec.cols[i].name));
-				}
-
-				if (spec.sort && spec.sort.length > 0 && spec.sort[0].index == i) {
-					if (spec.sort[0].dir == 'desc')
-						s.push(h('span', { style: { float: 'right' } }, '⯆'))
-					else
-						s.push(h('span', { style: { float: 'right' } }, '⯅'))
-				}
-
-				const a = h('a', { href: '#', onClick(event) { orderby(i); event.preventDefault(); }, style: { display: 'block', 'font-weight': 500, 'text-decoration': 'none', color: 'black' } }, s);
-
-				th.push(h('th', { style: { width: spec.cols[i].width ? spec.cols[i].width : 'auto', 'max-width': spec.cols[i].width ? spec.cols[i].width : 'auto' } }, [a]));
-			}
-
-			const tr = h('tr', {}, th);
-
-			return [tr];
-		}
-
-		function renderBody() {
-			const dr = [];
-
-			if (rows && rows.length > 0) {
-				for (let i = 0; i < rows.length; i += 1) {
-					dr.push(renderRow(i, rows[i]));
-				}
-			}
-
-			return dr;
-		}
-
-		function renderFooter() {
-			const fr = h('button', { class: props.buttonclass, style: 'margin-right: .5rem', onClick: first, disabled: spec.currPage == 1 }, '\u2bc5');
-			const ls = h('button', { class: props.buttonclass, style: 'margin-right: .5rem', onClick: last, disabled: spec.pageCount > 0 }, '\u2bc6');
-			const pg = h('button', { class: props.buttonclass, style: 'margin-right: .5rem' }, spec.currPage);
-			const pr = h('button', { class: props.buttonclass, style: 'margin-right: .5rem', onClick: prior, disabled: spec.currPage == 1 }, '\u2bc7');
-			const nx = h('button', { class: props.buttonclass, style: 'margin-right: .5rem', onClick: next }, '\u2bc8');
-			const td = h('td', { colspan: spec.cols.length, align: 'center' }, [fr, pr, pg, nx, ls]);
-			const tr = h('tr', {}, [td]);
-
-			return [tr];
-		}
-		/*****************************************************************
-		 Columns
-		*****************************************************************/
-		let cls = [];
-
-		if (props.data.columns) {
-			cls = props.data.columns;
-		} else {
-			alert('not ready !')
-			//cls = slots.default().map(m => m.props);
-		}
-
-		for (let i = 0; i < cls.length; i += 1) {
-			let s = cls[i];
-
-			if (s.name.indexOf('.') > -1) {
-				s.depth = s.name.split('.');
-			}
-
-			spec.cols.push(s);
-		}
-
-		page(1);
-
-		return {
-			spec, rows,
-			first, prior, next, last, refresh, orderby,
-			renderHeader, renderCell, renderCustomCell, renderRow, renderBody, renderFooter
-		};
-	},
-
-	render(props) {
-		const header = h('thead', {}, this.renderHeader());
-		const body = h('tbody', { 'data-time': this.spec.time}, this.renderBody());
-		const footer = h('tfoot', {}, this.renderFooter());
-
-		return h('table', {
-			class: props.class,
-		}, [
-			header,
-			body,
-			footer
-		]);
-	}
-};
-
-export default tablevu;
+/*
+ *  tablevu
+ *  A small, fast, easy-to-use table component.
+ *  Copyright (c) 2020 Ender Boz <ender.boz@gmail.com>
+ *  https://github.com/endb/tablevu/LICENCE
+ */
+
+import { h, onMounted, reactive, ref, watch } from 'vue';
+import adaptarr from './array.js';
+
+const tablevuStatuses = { Error: -1, Ready: 0, Loading: 1 };
+
+const tablevu = {
+	props: {
+		settings: { type: Object, default: null },
+		data: { type: [Array, Function] },
+		//group: { type: Object, default: { value: null, expandAll: true, class: 'table-light' } },
+		search: { type: String },
+		filter: { type: [Array, Object] },
+		command: { type: Array, default: [] },
+		rowid: { type: String },
+		onRowClick: { type: Function },
+		onRowDblClick: { type: Function },
+		class: { type: String, default: 'table' },
+		style: { type: String, default: null },
+		buttonClass: { type: String, default: 'btn' }
+	},
+
+	emits: ['onRowClick', 'onRowDblClick'],
+
+	setup(props, { attrs, slots, emit, expose }) {
+		let grps = [];
+		let rows = [];
+		let count = 0;
+
+		const spec = reactive({
+			adapter: null,
+			group: {
+				value: (props.settings && props.settings.group) ? props.settings.group.value : props.group ? props.group: null, // string ise alan adı, int ise index, fonksiyon ise calistirip alacak.
+				content: (props.settings && props.settings.group) ? props.settings.group.content : null, // grid de ne gosterilecek
+				expandAll: true,
+				class: 'table-light'
+			},
+			page: {
+				count: 0,
+				size: (props.settings && props.settings.page) ? props.settings.page.size : 0,
+				current: 0,
+				type: null // incrementral, dynamic
+			},
+			footer: {
+				button: {
+					first: { visible: true, content: null },
+					prior: { visible: true, content: null },
+					next: { visible: true, content: null },
+					last: { visible: true, content: null },
+					page: { visible: true, content: null },
+					size: { visible: true, content: null },
+					class: 'btn'
+				}
+			},
+			sort: (props.settings && props.settings.sort) ? props.settings.sort : [],
+			columns: (props.settings && props.settings.columns) ? props.settings.columns : [],
+			onRowClick: props.settings.onRowClick || props.onRowClick,
+			onRowDblClick: props.settings.onRowDblClick || props.onRowDblClick,
+		});
+
+		if (props.data) {
+			if (Array.isArray(props.data)) {
+				spec.adapter = adaptarr;
+			}
+			else {
+				spec.adapter = props.data;
+			}
+		};
+
+		// Setup dynamic filter //
+		if (props.filter)
+			spec.filter = props.filter;
+
+		watch(() => props.filter, (n, o) => {
+			if (n)
+				spec.filter = n;
+			else
+				spec.filter = null;
+
+			refresh();
+		}, { deep: true });
+
+		// Setup Search Input //
+		watch(() => props.search, (n,o) => {
+			if (spec.timer)
+				clearTimeout(spec.timer);
+
+			if ((o && o.length > (props.data.searchMinChar || 3) && (n == undefined || n == null || n.length <= (props.data.searchMinChar || 3))) || (n && n.length > (props.data.searchMinChar || 3))) {
+				spec.timer = setTimeout(() => { if (props.search && props.search.length > (props.data.searchMinChar || 3)) spec.search = props.search; else spec.search = null; refresh(); }, 444);
+			}
+		});
+
+		// Setup commands //
+		watch(() => props.command, (n,o) => {
+			if (n && n.length > 0) {
+				const c = props.command[n.length-1];
+
+				if (c && c.name) {
+					if (c.name.toLowerCase() == 'refresh') refresh()
+					else if (c.name.toLowerCase() == 'first') first()
+					else if (c.name.toLowerCase() == 'prior') prior()
+					else if (c.name.toLowerCase() == 'next') next()
+					else if (c.name.toLowerCase() == 'last') last()
+					else console.log('Unknown command');
+				}
+
+				props.command.length = 0;
+			}
+		}, { deep: true });
+
+		function prepareGroup(g, r) {
+			let s = [];
+
+			for (let i = 0; i < r.length; i++) {
+				let v = null;
+				let c = null;
+
+				const o = r[i];
+
+				if (g.value) {
+					if (typeof g.value == 'function')
+						v = g.value(o);
+					else
+						v = o[g.value];
+				} else
+					if (typeof g == 'function')
+						v = g(o);
+					else {
+						if (typeof g == 'bigint' || typeof g == 'number') {
+							const l = parseInt(g);
+
+							if (l)
+								v = o[l];
+						} else
+							if (typeof g == 'string')
+								v = o[g];
+					}
+
+				if (g.content) {
+					if (typeof g.content == 'function')
+						c = g.content(o);
+					else
+						c = o[g.content];
+				};
+
+				const n = s.findIndex(f => f.group == v);
+
+				if (n > -1)
+					s[n].rows.push(o);
+				else
+					s.push({ group: v, content: c, expand: spec.group.expandAll, rows: [o] });
+			};
+
+			return s;
+		}
+		/*****************************************************************
+
+		*****************************************************************/
+		function first() { // Go First Page //
+			page(1);
+		}
+
+		function prior() { // Go Previus Page //
+			if (spec.page.current > 1) {
+				page(spec.page.current - 1);
+			} else {
+				page(spec.page.current);
+			}
+		}
+
+		function next() { // Go Next Page //
+			page(spec.page.current + 1);
+		}
+
+		function last() { // Go Last Page //
+			page(spec.page.count);
+		}
+
+		function refresh() { // Refresh active page //
+			page(spec.page.current);
+		}
+
+		function orderby(ind, dir) { // Sort data //
+			if (spec.sort && spec.sort.length > 0) {
+				let l = spec.sort.findIndex(f => f.index == ind);
+
+				if (l == 0) {
+					spec.sort[l].dir = dir ? dir: (spec.sort[0].dir ? null : 'desc');
+				} else if (l > 0) {
+					spec.sort.splice(l, 1);
+				}
+
+				if (l != 0) {
+					spec.sort.unshift({ index: ind, dir: dir ? dir: null });
+				}
+
+				if (spec.sort.length > 2) {
+					spec.sort.pop();
+				}
+			} else  {
+				spec.sort.push({ index: ind, dir: dir ? dir: null });
+			}
+
+			page(spec.page.current);
+		}
+
+		function page(currentPage) { // Go Custom Page number //
+			let dat = null;
+
+			if (props.data) {
+				if (Array.isArray(props.data))
+					dat = props.data;
+			} else 
+				return;
+
+			spec.status = tablevuStatuses.Loading;
+
+			if (spec.adapter) {
+				spec.adapter({ pageSize: spec.page.size, currPage: currentPage, sort: spec.sort, cols: spec.columns, filter: spec.filter, search: spec.search }, dat).then(ada => {
+
+					if (spec.onData)
+						rows = spec.onData(ada.rows);
+					else
+						rows = ada.rows;
+					
+					count = ada.count;
+
+					if (spec.group)
+						grps = prepareGroup(spec.group, rows);
+
+					spec.page.count = (ada.count > 0 && spec.page.size > 0) ? (ada.count / spec.page.size) : 0
+					spec.page.current = currentPage;
+
+					spec.status = tablevuStatuses.Ready;
+					spec.time = Date.now();
+			});
+			}
+		}
+		/*****************************************************************
+		 Render Functions
+		*****************************************************************/
+		function renderValue(col, val) {
+			if (val) {
+				let v;
+
+				if (col.type == 'datetime' || col.type == 'date' || col.type == 'time') {
+					let t = new Date(val);
+
+					if (col.type == 'date')
+						v = t.toLocaleDateString();
+					else
+					if (col.type == 'time')
+						v = t.toLocaleTimeString();
+					else
+						v = t.toLocaleString();
+				} else {
+					if (col.type == 'numeric') {
+						v = parseFloat(val);
+					} else {
+						if (col.type == 'integer') {
+							v = parseInt(val);
+						} else
+							v = val;
+					}
+				};
+
+				return v;
+			} else
+				return '';
+		}
+
+		function renderCell(col, val) {
+			const o = { style: {} };
+
+			if (col.colspan && col.colspan > 1) {
+				o.colspan = col.colspan;
+			}
+
+			if (col.align) {
+				o.style['text-align'] = col.align;
+			}
+
+			if (col.width) {
+				o.style['max-width'] = col.width;
+			}
+
+			if (col.color) {
+				o.style['color'] = col.color;
+			}
+
+			if (col.backgroundColor) {
+				o.style['background-color'] = col.backgroundColor;
+			}
+
+			const v = renderValue(col, val);
+
+			return h('td', o, v);
+		}
+
+		function renderCustomCell(col, row) {
+			const o = { style: {} };
+
+			if (col.colspan && col.colspan > 1) {
+				o.colspan = col.colspan;
+			}
+
+			if (col.align) {
+				o.style['text-align'] = col.align;
+			}
+
+			if (col.width) {
+				o.style['max-width'] = col.width;
+			}
+
+			let f = col.render(row);
+
+			return h('td', o, f);
+		}
+
+		function renderGroup(grp) {
+			const b = h('button', { title: grp.expand, onClick: event => { console.log(grp.expand); grp.expand = (grp.expand ? false: true); event.currentTarget.value = grp.expand ? '▼': '►'; spec.time = Date.now(); event.preventDefault() }, style: { padding: 0, margin: '0 6px 0 0', width: '12px', height: '100%', border: 'none', outline: 0, backgroundColor: 'transparent' } }, grp.expand ? '▼': '►');
+			const v = grp.content || grp.group;
+
+
+			return h('tr', {}, h('td', { colspan: spec.columns.length, class: spec.group.class }, [b, v]));
+		}
+
+		function renderRow(index, row) {
+			const o = {};
+			const r = [];
+
+			o.key = index;
+			o.index = index;
+
+			if (props.rowid) {
+				o.rowid = row[props.rowid];
+			}
+
+			for (let i = 0; i < spec.columns.length; i += 1) {
+				let v;
+				const c = spec.columns[i];
+
+				if (c.render) {
+					v = renderCustomCell(c, row);
+					r.push(v);
+				} else {
+					if (c.depth) {
+						v = row;
+						for (let j = 0; j < c.depth.length; j += 1) {
+							if (v)
+								v = v[c.depth[j]];
+						}
+					} else {
+						v = row[c.name];
+					}
+
+					r.push(renderCell(c, v));
+				}
+			}
+
+			//if (spec.onRowDblClick)
+				o.ondblclick = (event) => {
+					const r = rows[event.currentTarget.attributes.index.value];
+					emit('onRowDblClick', event, r);
+					//props.onRowDblClick(event, r); 
+				};
+
+			if (props.onRowClick) {
+				o.onClick = (event) => {
+					const r = rows[event.currentTarget.attributes.index.value];
+					props.onRowClick(event, r);
+				};
+			}
+
+			return h('tr', o, r);
+		}
+
+		function renderHeader() {
+			let ar = [];
+			let sp = 1;
+
+			for (let i = 0; i < spec.columns.length; i += 1) {
+				if (sp > 1) {
+					sp--;
+					continue;
+				};
+
+				const cl = [];
+
+				if (spec.columns[i].label) {
+					cl.push(h('span', spec.columns[i].label));
+				} else {
+					cl.push(h('span', spec.columns[i].name));
+				}
+
+				if (spec.sort && spec.sort.length > 0 && spec.sort[0].index == i) {
+					if (spec.sort[0].dir == 'desc')
+						cl.push(h('span', { style: { float: 'right' } }, '▼'))
+					else
+						cl.push(h('span', { style: { float: 'right' } }, '▲'))
+				}
+
+				let ch = { position: 'relative' };
+
+				if (spec.columns[i].width) {
+					ch.width = spec.columns[i].width;
+					ch.minWidth = spec.columns[i].width;
+					ch.maxWidth = spec.columns[i].width;
+				}
+
+				let cy = { display: 'block', 'font-weight': 500, textDecoration: 'none', color: 'black', textAlign: 'center' };
+
+				if (spec.columns[i].header) {
+					if (spec.columns[i].header.colspan)
+						sp = parseInt(spec.columns[i].header.colspan) || 1;
+
+					if (spec.columns[i].header.align)
+						cy.textAlign = spec.columns[i].header.align;
+
+					if (spec.columns[i].header.backgroundColor)
+						ch.backgroundColor = spec.columns[i].header.backgroundColor;
+
+					if (spec.columns[i].header.color)
+						cy.color = spec.columns[i].header.color;
+				}
+
+				let a;
+				let f;
+
+				if (spec.columns[i].popup) {
+					const r = ref(null);
+					let c = [
+						h('a', { href: '#', onClick(event) { orderby(i); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Ascending'),
+						h('a', { href: '#', onClick(event) { orderby(i, 'desc'); event.preventDefault(); }, style: { display: 'block', textDecoration: 'none', color: 'black', fontWeight: 'initial', padding: '.25rem' } }, 'Order by Descending'),
+					];
+
+					a = h('a', { href: '#', onClick(event) { if (r.value && r.value.style  && r.value.style.display  && r.value.style.display == 'block') r.value.style.display = 'none'; else r.value.style.display = 'block'; event.preventDefault(); }, style: cy }, cl);
+					f = h('div', { ref: r, style: { position: 'absolute', display: 'none', width: spec.columns[i].width || '12rem', height: 'fit-content', border: '1px solid lightgray', backgroundColor: 'whitesmoke', zIndex: 1, left: 0, top: '2rem', bottom: 0, right: 0, padding: '.25rem' }}, c);
+
+				} else
+					a = h('a', { href: '#', onClick(event) { orderby(i); event.preventDefault(); }, style: cy }, cl);
+
+				if (spec.columns[i].filter) {
+				}
+
+				ar.push(h('th', { colspan: sp > 1 ? sp: null, style: ch }, [a, f]));
+			}
+
+			const tr = h('tr', {}, ar);
+
+			return [tr];
+		}
+
+		function renderBody() {
+			const dr = [];
+
+			if (grps && grps.length > 0) {
+				let x = 0;
+
+				for (let g = 0; g < grps.length; g += 1) {
+					const r = grps[g];
+
+					dr.push(renderGroup(r));
+
+					if (r.expand && r.rows && r.rows.length > 0) {
+						for (let i = 0; i < r.rows.length; i += 1) {
+							dr.push(renderRow(x, r.rows[i]));
+							x++;
+						}
+					}
+				}
+			} else
+				if (rows && rows.length > 0) {
+					for (let i = 0; i < rows.length; i += 1) {
+						dr.push(renderRow(i, rows[i]));
+					}
+				}
+
+			return dr;
+		}
+
+		function renderFooter() {
+			const fr = h('button', { class: spec.footer.button.class, style: 'margin-right: .5rem', onClick: first, disabled: spec.page.current == 1 }, '◀◀');
+			const ls = h('button', { class: spec.footer.button.class, style: 'margin-right: .5rem', onClick: last, disabled: spec.page.count > 0 }, '▶▶');
+			const pg = h('button', { class: spec.footer.button.class, style: 'margin-right: .5rem' }, spec.page.current);
+			const pr = h('button', { class: spec.footer.button.class, style: 'margin-right: .5rem', onClick: prior, disabled: spec.page.current == 1 }, '◀');
+			const nx = h('button', { class: spec.footer.button.class, style: 'margin-right: .5rem', onClick: next, disabled: spec.page.count > 0 && spec.page.current == spec.page.count }, '▶');
+			const td = h('td', { colspan: spec.columns.length, align: 'center' }, [fr, pr, pg, nx, ls]);
+			const tr = h('tr', {}, [td]);
+
+			return [tr];
+		}
+
+		function renderCaption() {
+			return null; // NOT REMEMBER !!!
+			// caption-side
+			// text-align
+		}
+		/*****************************************************************
+		 Columns
+		*****************************************************************/
+		if (spec.columns.length == 0) {
+			alert('Columns not defined !')
+			//cls = slots.default().map(m => m.props);
+		}
+
+		for (let i = 0; i < spec.columns.length; i++)
+			if (spec.columns[i].name && spec.columns[i].name.indexOf('.') > -1) {
+				spec.columns[i].depth = spec.columns[i].name.split('.');
+			}
+
+		page(1);
+
+		onMounted(() => {
+			console.log('tablevu.mounted');
+		});
+
+		return {
+			spec, renderHeader, renderBody, renderFooter, renderCaption
+		};
+
+
+	},
+
+	render(props) {
+		console.log('tablevu.render', this.spec.status);
+		let prps = { class: 'tablevu' };
+/*
+		if (props.id)
+			prps.id = props.id;
+*/
+		if (props.class)
+			prps.class = 'tablevu ' + props.class;
+
+		if (props.style)
+			prps.style = props.style;
+
+	/*	if (props.dir)
+			prps.dir = props.dir;
+
+		if (props.hidden)
+			prps.hidden = props.hidden;
+
+
+		if (props.title)
+			prps.title = props.title;
+*/
+		// Content //
+		let cntn = [];
+
+		cntn.push(
+			h('thead', {}, this.renderHeader())
+		);
+
+		if (this.spec.status == tablevuStatuses.Ready)
+			cntn.push(
+				h('tbody', { 'data-time': this.spec.time}, this.renderBody())
+			);
+
+		if (this.spec.caption)
+			cntn.push(
+				h('caption', {}, this.renderCaption())
+			);
+
+		if (this.spec.page.size > 0)
+			cntn.push(
+				h('tfoot', {}, this.renderFooter())
+			);
+
+		return h('table', prps, cntn);
+	}
+};
+
+export default tablevu;