# j-DataTable

> BETA: Tento komponent je určený pre SPA a výpisy na strane servera.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: e8eaabed3c56f727d94091f97ef453140829c0665a134bb31a0bdd431ae4f9f0
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__BETA__: Tento komponent je určený pre SPA a výpisy na strane servera.

- podporuje stránkovanie
- potrebný mriežkový systém `bootstrap`
- podporuje triedenie
- podporuje vertikálne/horizontálne rolovanie
- citlivý
- podporuje __tmavý režim__

__Data-source__ musí obsahovať:

```js
{
	cols: [{ name: 'id', ... }], // optional, can be defined inline in HTML
    items: [{ name: 'Row 1' }, { name: 'Row 2' }, ...] // items
    page: 1,    // current pages
    pages: 30,  // count of pages
    limit: 5,   // items limit per page
    count: 150  // count of items in DB
}
```

__Konfigurácia__:

- `pluralizepages {String}` pluralita stránok (voliteľné, predvolená hodnota: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` množné číslo pre položky (voliteľné, predvolené: `# items,# item,# items,# items`)
- `height {Number/String}` výška mriežky, podporované hodnoty: `auto` (predvolené), __NEW__ `fluid`, `parent` alebo `NUMBER` ako výška alebo `selector`ery.
- __NEW__ `minheight {Number}` minimálna výška mriežky, pracuje s výškou `fluid` a `auto` (predvolené: `300`)
- __NEW__ Volič `parent {String}` pre možnosť výšky `auto` (predvolené: `window`)
- `margin {Number}` horný okraj výšky (voliteľné, predvolené: `0`)
- `click {String}` odkaz na `function(row, grid, row_el)`, spustí sa, ak používateľ klikne na riadok
- `highlight {Boolean}` každý vybraný riadok (po `click`) bude zvýraznený (predvolené: `false`)
- `unhighlight {Boolean}` povolí `undo highlighting` zvoleného riadku (predvolené: `true`)
- `checked {String}` `path` k premennej alebo ceste k `function(rows, grid)` sa vykoná, ak používateľ vybral/skontroloval niektoré riadky
- `autoselect {Boolean}` umožňuje automatický výber prvého riadku v mriežke, vykonáva `EXEC(config.click)`, predvolené: `false`
- `exec {String}` odkaz na `function(type, page, sort)` len pre operácie na strane servera (vypína triedenie a filtrovanie na strane klienta), podporované typy: `refresh` alebo `page`
- `changed {String}` `path` k premennej alebo ceste k `function(rows, grid)` sa vykoná, ak používateľ zmenil niektoré riadky
- `dblclick {String}` prepojenie na metódu `function(row, grid, row_el)`, vykoná sa, ak používateľ dvakrát klikne na riadok
- `noborder {Boolean}` môže zakázať ohraničenie okolo mriežky (predvolené: `false`)
- `colwidth {Number}` predvolená šírka stĺpcov (predvolená: `150`)
- `editable {String}` odkaz na `function(opt)`, keď používateľ vykonáva úpravy
- `contextmenu {String}` odkaz na `function(e, grid)`, keď používateľ vyvolá kontextovú ponuku

__Vlastnosti stĺpca__:

- `name {String}` názov poľa v objekte riadku
- `text {String}` štítok stĺpca, text so `.fa fa-home` vykreslí ikonu FontAwesome
- `width {Number}` šírka stĺpca (voliteľné, predvolená hodnota `config.colwidth`)
- `align {String}` môže byť `center` alebo `right` (voliteľné, predvolené: `left`)
- `template {String}` môže byť šablóna Tangular a model je celý objekt riadku
- `sort {Boolean}` umožňuje triedenie (voliteľné, predvolené: `false`)
- `format {String/Number}` je možné použiť pre pole dátumu a čísel (počet desatinných miest) (voliteľné), napr. `dd.MM.yyyy`
- `currency {String}` formátovač meny, stačí pridať menu
- `class {String}` voliteľné, názov triedy vlastného stĺpca
- `empty {String/Boolean}` voliteľné, môže prepísať prázdnu hodnotu hodnotou definovanou v prázdnom poli (hodnota `true` používa `---` ako predvolenú hodnotu)
- `type {String}` voliteľné, môže obsahovať typ údajov (`boolean`, `date` alebo `number`) pre pole
- `editable {Boolean}` umožňuje editáciu

__Metódy__:

- `component.redrawrow(row_object/index)` prekreslí riadok alebo __NEW__: nahradí+prekreslí `row_object` novým `new_object_row`
- `component.clear()` vymaže všetky zmeny
- `component.select(row)` vyberie `row` musí byť rovnaký objekt ako v zdroji údajov
- `component.rebind(columnsdeclaration)` metóda znovu spája schému
- __NEW__: `component.reload()` vykoná `config.exec` s aktuálnym filtrom a triedením
- __NEW__: `component.empty()` vyprázdni všetky riadky

__Je dobré vedieť__:

- `SET('link.to.data', data, 'noscroll')` --> Typ `noscroll` zakáže resetovanie rolovania

__Ako rozšíriť triedu riadkov?__

- pozrite sa na riadok `{{ if active`, rozširuje triedu riadku pridaním `dg-active-class`, ak bude platný `active`

```js
[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]
```

Použite ho so `<ui-component name="datatable">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```html example.html
<div style="width:500px;height:400px">
	<ui-component name="datatable" path="data" config="highlight:1;exec:paginate;editable:editable;checked:checked;margin:22">
		<script type="text/html">
			[
				{ name: 'name', text: 'Opportunity name', width: 200, sort: 1, editable: 1 },
				{ name: 'value', text: 'Value', width: 100, sort: 1, type: 'number', format: 2 },
				{ name: 'status', text: 'Status', width: 100, editable: 1 },
				{ name: 'owner', text: 'Owner', width: 200 },
				{ name: 'newsletter', text: 'Newsletter', width: 100, type: 'boolean' },
				{ name: 'date', text: 'Date', width: 200, sort: 1, type: 'date', format: 'yyyy-MM-dd' }
			]
		</script>
	</ui-component>
</div>

<script>

	function checked(rows) {
		console.log(rows);
	}

	function editable(opt) {
		// opt.row
		// opt.col
		// opt.value
		// opt.next(NEW_VALUE);
		opt.next(opt.value + ' (modified)');
	}

	function paginate(type, page, sort) {
		console.log('Page:', page, 'sort:', sort);
	}

		var data = {};

		data.items = [];
		data.pages = 53;
		data.page = 3;

		// data.cols.push({ name: 'name', text: 'Opportunity name', width: 200, sort: true });
		// data.cols.push({ name: 'value', text: 'Value', width: 100, sort: true });
		// data.cols.push({ name: 'status', text: 'Status', width: 100 });
		// data.cols.push({ name: 'owner', text: 'Owner', width: 200 });
		// data.cols.push({ name: 'date', text: 'Date', width: 200, sort: true });

		for (var i = 0; i < 50; i++)
			data.items.push({ name: GUID(20), value: Math.random() * 1000 >> 0, status: GUID(10), owner: 'Peter Širka', newsletter: i % 3 === 0, date: NOW });
</script>
```