# j-DataTable

> BETA: Deze component is gericht op SPA en server-side listing.

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

__BETA__: Deze component is gericht op SPA en server-side listing.

- Ondersteunt pagina's
- Een `bootstrap`-netwerk nodig
- Ondersteunt het sorteren
- Ondersteunt verticale/horizontaal scrolling
- Reactie
- Ondersteunt het donkere mode

_Data-bron__ moet bevatten:

```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
}
```

__Configuratie__:

- `pluralizepages {String}` pluralisatie voor pagina's (optional, standaard: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` pluralisatie voor items (optional, standaard: `# items,# item,# items,# items`)
- `height {Number/String}` Hoogte van het netwerk, ondersteunde waarden: `auto` (de standaard) _NIEW `fluid`, `parent` Of `NUMBER` Als hoogte of `selector` voor jQuery.closest()
- __NEW__ `minheight {Number}` minimumhoogte van het netwerk, werkt met `fluid` en `auto` hoogte (default: `300`)
- __NEW__ `parent {String}` selector voor de `auto` hoogte optie (default: `window`)
- `margin {Number}` een topmarge voor hoogte (optional, standaard: `0`)
- `click {String}` een link naar `function(row, grid, row_el)`, het wordt uitgevoerd als de gebruiker op een rij klikt
- `highlight {Boolean}` wordt aangegeven in elke geselecteerde volgorde (na `click`) (default: `false`)
- `unhighlight {Boolean}` maakt `undo highlighting` van de geselecteerde volgorde mogelijk (default: `true`)
- `checked {String}` `path` naar een variabele of pad naar `function(rows, grid)` wordt uitgevoerd als de gebruiker bepaalde lijnen heeft geselecteerd/checkt
- `autoselect {Boolean}` maakt het mogelijk om de eerste rij in het net te selecteren, het uitvoert `EXEC(config.click)`, standaard: `false`
- `exec {String}` een link naar `function(type, page, sort)` voor server-side-activiteiten alleen (dit stelt de client-side sortering en filteren niet in staat), ondersteunde soorten: `refresh` of `page`
- `changed {String}` `path` naar een variabele of pad naar `function(rows, grid)` wordt uitgevoerd als de gebruiker bepaalde lijnen verandert
- `dblclick {String}` een link naar de `function(row, grid, row_el)` methode, het wordt uitgevoerd als de gebruiker dubbel klikt op een rij
- `noborder {Boolean}` kan een grens rond het netwerk ontgrendelen (default: `false`)
- `colwidth {Number}` een standaard breedte voor kolommen (default: `150`)
- `editable {String}` een link naar `function(opt)` wanneer de gebruiker bewerkt
- `contextmenu {String}` een link naar `function(e, grid)` wanneer de gebruiker het contextmenu opneemt

__Column eigenschappen__:

- `name {String}` een naam van het veld in de volgorde object
- `text {String}` een kolom label, tekst met `.fa fa-home` maakt FontAwesome icon
- `width {Number}` een kolombreedte (optional, standaard `config.colwidth`)
- `align {String}` kan `center` of `right` zijn (optional, standaard: `left`)
- `template {String}` kan een Tangular-template zijn en het model is het gehele object van de rij
- `sort {Boolean}` maakt het mogelijk om te sorteren (optional, default: `false`)
- `format {String/Number}` kan worden gebruikt voor de datum en cijfers (het aantal decimalen) veld (optional), bijvoorbeeld `dd.MM.yyyy`
- `currency {String}` een valuta format, gewoon een munt toevoegen
- `class {String}` optioneel, een aangepaste kolomklasse naam
- `empty {String/Boolean}` optioneel, kan leegte met de waarde gedefinieerd in leeg veld opnieuw schrijven (`true` waarde gebruikt `---` als standaardwaarde)
- `type {String}` optioneel, kan een gegevenstype bevatten (`boolean`, `date` of `number`) voor het veld
- `editable {Boolean}` kan worden bewerkt

__Methoden__:

- `component.redrawrow(row_object/index)` redraws rij of __NEW__: vervangt + redrays `row_object` met een nieuwe `new_object_row`
- `component.clear()` verwijdert alle veranderingen
- `component.select(row)` selecteert `row` moet hetzelfde object zijn als in de gegevensbron
- `component.rebind(columnsdeclaration)` de methode herbindt het schema
- __NEW__: `component.reload()` uitvoert `config.exec` met de huidige filter en sortering
- __NEW__: `component.empty()` empties alle lijnen

__Goed om te weten__:

- `SET('link.to.data', data, 'noscroll')` --> type `noscroll` ontbreekt om te scrollen

__Hoe kan ik een klasse van rij uitbreiden?__

- Kijk naar de `{{ if active`-lijn, het vergroot een rangklasse door `dg-active-class` toe te voegen als de `active` geldig is

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

Gebruik het met `<ui-component name="datatable">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

```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>
```