# j-DataTable

> BETA: Diese Komponente ist für SPA und serverseitige Auflistung vorgesehen.

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

__BETA__: Diese Komponente ist für SPA und serverseitige Auflistung vorgesehen.

- unterstützt Paginierung
- Benötigtes Gittersystem `bootstrap`
- unterstützt das Sortieren
- Unterstützt vertikales/horizontales Scrollen
- reaktionsschnell
- unterstützt den __Dark-Modus__

__Datenquelle__ muss Folgendes enthalten:

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

__Konfiguration__:

- `pluralizepages {String}` Pluralisierung für Seiten (optional, Standard: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` Pluralisierung für Elemente (optional, Standard: `# items,# item,# items,# items`)
- `height {Number/String}` Höhen der Netz, unterstützte Werte: `auto` (Nach dem Stand) - Neues `fluid`, `parent` oder `NUMBER` als Höhe oder `selector` für jQuery.closest()
- __NEW__ `minheight {Number}` Minimale Höhe des Netzes, arbeitet mit `fluid` und `auto` Höhe (Default: `300`)
- __NEW__ `parent {String}` Selektor für die `auto` Höhe Option (Default: `window`)
- `margin {Number}` ein oberer Rand für die Höhe (optional, Standard: `0`)
- `click {String}` eine Verbindung zu `function(row, grid, row_el)`, es wird ausgeführt, wenn der Benutzer auf eine Reihe klickt
- `highlight {Boolean}` wird in jeder ausgewählten Reihe (nach `click`) hervorgehoben (Default: `false`)
- `unhighlight {Boolean}` ermöglicht `undo highlighting` der ausgewählten Reihe (Default: `true`)
- `checked {String}` `path` zu einer Variable oder Pfad nach `function(rows, grid)` wird ausgeführt, wenn der Benutzer einige Zeilen ausgewählt / überprüft
- `autoselect {Boolean}` ermöglicht die automatische Auswahl der ersten Reihe im Netzwerk, es erfüllt `EXEC(config.click)`, Standard: `false`
- `exec {String}` eine Verbindung zu `function(type, page, sort)` nur für Server-Seite-Bewegungen (es deaktiviert Client-Seiten-Sortierung und Filterung), unterstützte Typen: `refresh` oder `page`
- `changed {String}` `path` zu einer Variable oder Pfad nach `function(rows, grid)` wird ausgeführt, wenn der Benutzer einige Zeilen ändert
- `dblclick {String}` eine Verbindung zu der Methode `function(row, grid, row_el)` wird ausgeführt, wenn der Benutzer doppelt klickt auf eine Reihe
- `noborder {Boolean}` kann eine Grenze rund um das Netz deaktivieren (Default: `false`)
- `colwidth {Number}` eine Standardweite für Kolumne (Default: `150`)
- `editable {String}` eine Verbindung zu `function(opt)` wenn der Benutzer die Bearbeitung durchführt
- `contextmenu {String}` eine Verbindung zu `function(e, grid)` wenn der Benutzer das Kontextmenü erhöht

__Kolonne Eigenschaften__:

- `name {String}` ein Feldnamen in der Reihe von Objekten
- `text {String}` eine Spalte-Label, Text mit `.fa fa-home` wird FontAwesome-Ikon darstellen
- `width {Number}` eine Spalteweite (optional, Standard `config.colwidth`)
- `align {String}` kann `center` oder `right` sein (optional, Standard: `left`)
- `template {String}` kann ein Tangular-Template sein und das Modell ist das ganze Objekt der Reihe
- `sort {Boolean}` ermöglicht die Sortierung (optional, Standard: `false`)
- `format {String/Number}` kann für Datum und Zahlen (Zahl von Decimalen) Feld (optional) verwendet werden, z. B. `dd.MM.yyyy`
- `currency {String}` ein Währungsformat, einfach eine Währung hinzufügen
- `class {String}` optionale, ein angepaster Kolumnklasse
- `empty {String/Boolean}` optionale, kann leer Wert mit dem im leeren Feld definierten Wert wiederschreiben (`true` Wert verwendet `---` als Standardwert)
- `type {String}` optionale, kann einen Datentyp (`boolean`, `date` oder `number`) für das Feld enthalten
- `editable {Boolean}` ermöglicht die Bearbeitung

__Methoden__:

- `component.redrawrow(row_object/index)` redraws line oder __NEW__: ersetzt +redraws `row_object` mit einem neuen `new_object_row`
- `component.clear()` klärt alle Veränderungen
- `component.select(row)` wählt `row` muss das gleiche Objekt sein wie in der Datenquelle
- `component.rebind(columnsdeclaration)` die Methode verwandelt das Schema
- __NEW__: `component.reload()` führt `config.exec` mit dem aktuellen Filter und Sortierung aus
- __NEW__: `component.empty()` empties alle Zeilen

__Gut zu wissen__:

- `SET('link.to.data', data, 'noscroll')` --> Typ `noscroll` verhindert die Wiederherstellung des Schraubens

__Wie erweitert man eine Klasse?__

- Auf die `{{ if active`-Linie wird eine Klasse der Reihe erweitert, indem Sie `dg-active-class` hinzufügen, wenn die `active` gültig ist.

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

Verwenden Sie es mit `<ui-component name="datatable">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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