# j-DataTable

> BETA: Този компонент е насочен към списъка на SPA и сървърна страна.

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

__BETA__: Този компонент е насочен към SPA и списък на сървъра.

- Поддържа страница
- Необходима е система за `bootstrap`
- Поддържат сортиране
- Поддържа вертикално/хоризонтално скалиране
- Реакция
- Поддържат тъмния режим

__Data-Source__ трябва да съдържа:

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

__Конфигуриране__:

- Плурализация на `pluralizepages {String}` за страници (опционално, по подразбиране: `# pages,# page,# pages,# pages`)
- Плурализация на `pluralizeitems {String}` за елементи (опционално, по подразбиране: `# items,# item,# items,# items`)
- `height {Number/String}` Височина на мрежата, подкрепени стойности: `auto` (Предполага се, че е ново `fluid`, `parent` или `NUMBER` като височина или `selector` за jQuery.closest()
- __NEW__ `minheight {Number}` минимална височина на мрежата, работи с `fluid` и `auto` височина (предварително: `300`)
- __NEW__ `parent {String}` селектор за опция за височина `auto` (предварително: `window`)
- `margin {Number}` е най-високата маржа за височина (опционално, по подразбиране: `0`)
- `click {String}` е връзката към `function(row, grid, row_el)`, тя се изпълнява, ако потребителят кликне върху реда
- `highlight {Boolean}` всяка избрана линия (след `click`) ще бъде подчертано (предварително: `false`)
- `unhighlight {Boolean}` позволява `undo highlighting` от избрания ред (предварително: `true`)
- `checked {String}` `path` към променлива или път към `function(rows, grid)` се изпълнява, ако потребителят е избрал/проверил някои редове
- `autoselect {Boolean}` позволява автоматично избиране на първия ред в мрежата, той изпълнява `EXEC(config.click)`, по подразбиране: `false`
- `exec {String}` е връзка към `function(type, page, sort)` само за сървърни операции (отключва клавиатурата и филтрирането на клиента), поддържани типове: `refresh` или `page`
- `changed {String}` `path` към променлива или път към `function(rows, grid)` се изпълнява, ако потребителят промени някои редове
- `dblclick {String}` е връзка към метода на `function(row, grid, row_el)`, тя се изпълнява, ако потребителят щракне двойно върху реда
- `noborder {Boolean}` може да деактивира границата около мрежата (предварително: `false`)
- `colwidth {Number}` - стандартна ширина за колони (дефолт: `150`)
- `editable {String}` е връзка към `function(opt)` когато потребителят извършва редактиране
- `contextmenu {String}` е връзка към `function(e, grid)` когато потребителят издига контекстното меню

__Колонни свойства__:

- `name {String}` е името на полето в редица обекти
- `text {String}` е колона, текстът с `.fa fa-home` ще направи FontAwesome икона
- `width {Number}` - ширина на колона (опционално, по подразбиране `config.colwidth`)
- `align {String}` може да бъде `center` или `right` (опционално, по подразбиране: `left`)
- `template {String}` може да бъде шаблон на Tangular и моделът е целият предмет на реда
- `sort {Boolean}` позволява класиране (опционално, по подразбиране: `false`)
- `format {String/Number}` може да се използва за дата и числа (брояване на десетилетия) поле (опционално), например `dd.MM.yyyy`
- `currency {String}` е валутен формат, просто добавете валута
- `class {String}` опция, персонализирано име на класа
- `empty {String/Boolean}` опционално, може да се пренапише празна стойност с определената в празно поле стойност (`true` използва `---` като подразбираща стойност)
- `type {String}` опционално, може да съдържа тип данни (`boolean`, `date` или `number`) за полето
- `editable {Boolean}` позволява редактиране

__Методи__:

- `component.redrawrow(row_object/index)` редуцира ред или __NEW__: замества + редуците на `row_object` с нов `new_object_row`
- `component.clear()` разкрива всички промени
- `component.select(row)` избира `row` трябва да бъде същият обект като в източника на данни
- `component.rebind(columnsdeclaration)` Методът премахва схемата
- __NEW__: `component.reload()` изпълнява `config.exec` с текущия филтър и сортиране
- __NEW__: `component.empty()` empties всички редове

__Добре е да се знае__:

- `SET('link.to.data', data, 'noscroll')` -> тип `noscroll` прекъсва рестаурацията на скалпа

__Как да разширим класа?__

- Погледнете линията `{{ if active`, тя разширява класа на реда, като добавяте `dg-active-class` ако `active` е валиден

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

Използвайте го с `<ui-component name="datatable">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>
```