# j-DataTable

> BÊTA : ce composant est destiné au listing SPA et côté serveur.

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

__BETA__ : ce composant est destiné au listing SPA et côté serveur.

- prend en charge la pagination
- système de grille `bootstrap` nécessaire
- prend en charge le tri
- prend en charge le défilement vertical/horizontal
- réactif
- prend en charge le __mode sombre__

__Data-source__ doit contenir :

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

__Configuration__ :

- Pluralisation `pluralizepages {String}` pour les pages (facultatif, par défaut : `# pages,# page,# pages,# pages`)
- Pluralisation `pluralizeitems {String}` pour les éléments (facultatif, par défaut : `# items,# item,# items,# items`)
- `height {Number/String}` hauteur de la grille, valeurs prises en charge : `auto` (par défaut), __NEW__ `fluid`, `parent` ou `NUMBER` comme hauteur ou `selector` pour jQuery.closest()
- __NOUVEAU__ `minheight {Number}` hauteur minimale de grille, fonctionne avec les hauteurs `fluid` et `auto` (par défaut : `300`)
- __NOUVEAU__ Sélecteur `parent {String}` pour option hauteur `auto` (par défaut : `window`)
- `margin {Number}` une marge supérieure pour la hauteur (facultatif, par défaut : `0`)
- `click {String}` un lien vers `function(row, grid, row_el)`, il est exécuté si l'utilisateur clique sur une ligne
- `highlight {Boolean}` chaque ligne sélectionnée (après `click`) sera mise en surbrillance (par défaut : `false`)
- `unhighlight {Boolean}` active `undo highlighting` de la ligne sélectionnée (par défaut : `true`)
- `checked {String}` `path` vers une variable ou un chemin vers `function(rows, grid)` est exécuté si l'utilisateur a sélectionné/coché certaines lignes
- `autoselect {Boolean}` permet la sélection automatique de la première ligne de la grille, il exécute `EXEC(config.click)`, par défaut : `false`
- `exec {String}` un lien vers `function(type, page, sort)` pour les opérations côté serveur uniquement (il désactive le tri et le filtrage côté client), types pris en charge : `refresh` ou `page`
- `changed {String}` `path` vers une variable ou un chemin vers `function(rows, grid)` est exécuté si l'utilisateur a modifié certaines lignes
- `dblclick {String}` un lien vers la méthode `function(row, grid, row_el)`, elle est exécutée si l'utilisateur double-clique sur une ligne
- `noborder {Boolean}` peut désactiver une bordure autour de la grille (par défaut : `false`)
- `colwidth {Number}` une largeur par défaut pour les colonnes (par défaut : `150`)
- `editable {String}` un lien vers `function(opt)` lorsque l'utilisateur effectue une édition
- `contextmenu {String}` un lien vers `function(e, grid)` lorsque l'utilisateur ouvre le menu contextuel

__Propriétés de la colonne__ :

- `name {String}` un nom de champ dans l'objet ligne
- `text {String}` une étiquette de colonne, le texte avec `.fa fa-home` affichera l'icône FontAwesome
- `width {Number}` une largeur de colonne (facultatif, `config.colwidth` par défaut)
- `align {String}` peut être `center` ou `right` (facultatif, par défaut : `left`)
- `template {String}` peut être un modèle Tangular et le modèle est l'objet entier de la ligne
- `sort {Boolean}` permet le tri (facultatif, par défaut : `false`)
- `format {String/Number}` peut être utilisé pour le champ de date et de nombres (nombre de décimales) (facultatif), par ex. `dd.MM.yyyy`
- `currency {String}` un formateur de devises, ajoutez simplement une devise
- `class {String}` facultatif, un nom de classe de colonne personnalisé
- `empty {String/Boolean}` facultatif, peut réécrire la valeur vide avec la valeur définie dans le champ vide (la valeur `true` utilise `---` comme valeur par défaut)
- `type {String}` facultatif, peut contenir un type de données (`boolean`, `date` ou `number`) pour le champ
- `editable {Boolean}` permet l'édition

__Méthodes__ :

- `component.redrawrow(row_object/index)` redessine la ligne ou __NEW__ : remplace+redessine `row_object` par un nouveau `new_object_row`
- `component.clear()` efface toutes les modifications
- `component.select(row)` sélectionne `row` qui doit être le même objet que dans la source de données
- `component.rebind(columnsdeclaration)` la méthode relie le schéma
- __NEW__ : `component.reload()` exécute `config.exec` avec le filtre et le tri actuels
- __NEW__ : `component.empty()` vide toutes les lignes

__Bon à savoir__ :

- Le type `SET('link.to.data', data, 'noscroll')` --> `noscroll` désactive la réinitialisation du défilement

__Comment étendre une classe de ligne ?__

- regardez la ligne `{{ if active`, elle étend une classe de ligne en ajoutant `dg-active-class` si le `active` sera valide

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

Utilisez-le avec `<ui-component name="datatable">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```