# j-DataTable

> BETA: Acest component este vizat pentru SPA și listarea server-side.

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

__BETA__: Acest component este vizat pentru SPA și listarea server-side.

- susținerea paginii
- Sistemul de rețea `bootstrap`
- susținerea sortării
- susține scrollarea verticală/orizontală
- Răspunsuri
- Modul întunecat - Dark Mode

_sursă de date trebuie să conțină:

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

__Configurarea__:

- Pluralizare `pluralizepages {String}` pentru pagini (opțional, standard: `# pages,# page,# pages,# pages`)
- Pluralizare `pluralizeitems {String}` pentru articole (opțional, standard: `# items,# item,# items,# items`)
- `height {Number/String}` Înălțimea rețelei, valorile susținute: `auto` (în mod implicit) - Noua `fluid`, `parent` sau `NUMBER` Înălțimea sau `selector` pentru jQuery.closest()
- __NEW__ `minheight {Number}` înălțimea minimă a rețelei, funcționează cu înălțul `fluid` și `auto` (default: `300`)
- __NEW__ `parent {String}` selector pentru opțiunea de înălțime `auto` (default: `window`)
- `margin {Number}` este o marjă de înălțime (opțional, standard: `0`)
- `click {String}` este un link la `function(row, grid, row_el)`, se execută dacă utilizatorul face clic pe o linie
- `highlight {Boolean}` fiecare rând selectat (după `click`) va fi evidențiat (default: `false`)
- `unhighlight {Boolean}` permite `undo highlighting` din rândul selectat (default: `true`)
- `checked {String}` `path` la o variabilă sau drumul către `function(rows, grid)` este executat dacă utilizatorul a selectat/a verificat anumite rânduri
- `autoselect {Boolean}` permite selectarea automată a primei rânduri în rețea, funcționează `EXEC(config.click)`, standard: `false`
- `exec {String}` este un link la `function(type, page, sort)` pentru operațiunile de server-side (acesta interzice sortarea și filtrarea client-side), tipuri susținute: `refresh` sau `page`
- `changed {String}` `path` la o variabilă sau calea către `function(rows, grid)` este executată dacă utilizatorul a schimbat anumite rânduri
- `dblclick {String}` este un link la metoda `function(row, grid, row_el)`, se execută dacă utilizatorul face dublu clic pe o rîndă
- `noborder {Boolean}` poate dezactiva o graniță în jurul rețelei (default: `false`)
- `colwidth {Number}` este o lățime de bază pentru coloane (default: `150`)
- `editable {String}` un link la `function(opt)` atunci când utilizatorul efectuează editarea
- `contextmenu {String}` un link la `function(e, grid)` atunci când utilizatorul ridică meniul de context

__Proprietăți coloană__:

- `name {String}` - un nume de câmp în obiectul de rând
- `text {String}` este o etichetă coloană, textul cu `.fa fa-home` va face iconul FontAwesome
- `width {Number}` o lățime de coloană (opțional, standard `config.colwidth`)
- `align {String}` poate fi `center` sau `right` (opțional, standard: `left`)
- `template {String}` poate fi un șablon Tangular, iar modelul este întregul obiect al rândului
- `sort {Boolean}` permite sortarea (opțional, standard: `false`)
- `format {String/Number}` poate fi utilizat pentru date și numere (numărul de decimale) câmp (opțional), de exemplu, `dd.MM.yyyy`
- `currency {String}` este un format de monedă, doar adăugați o moneda
- `class {String}` opțional, un nume de clasă personalizat
- `empty {String/Boolean}` În cazul în care este posibilă redeschiderea valorii goale cu valoarea definită în câmpul gol (`true` Valoarea utilizării `---` ca o valoare defectuoasă)
- `type {String}` opțional, poate conține un tip de date (`boolean`, `date` sau `number`) pentru câmpul
- `editable {Boolean}` permite editarea

__Metode__:

- `component.redrawrow(row_object/index)` redrage rând sau __NEW__: înlocuiește + redrage `row_object` cu un nou `new_object_row`
- `component.clear()` clarifică toate modificările
- `component.select(row)` selectează `row` trebuie să fie același obiect ca și în sursa de date
- `component.rebind(columnsdeclaration)` - Metoda reflectă schema
- __NEW__: `component.reload()` execută `config.exec` cu filtrul curent și sortarea
- __NEW__: `component.empty()` empties toate rândurile

__bine să știi__:

- `SET('link.to.data', data, 'noscroll')` -> tipul `noscroll` interzice reinstalarea de scrolling

__Cum să extindă o clasă de rând?__

- Uitaţi-vă la `{{ if active` Linea, extinde o clasă de rând prin adăugarea `dg-active-class` În cazul în care `active` Va fi valabilă

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

Utilizați-l cu `<ui-component name="datatable">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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