# j-DataTable

> BETA: Este componente é direcionado para a SPA e lista de servidores.

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

__BETA__: Este componente é direcionado para a SPA e lista de servidores.

- Apoiando a página
- O sistema de rede `bootstrap`
- Apoio à Sorte
- Suporte ao escorregamento vertical/horizontal
- Responder
- Apresentação - Modo escuro

__Data-Source_ precisa de conter:

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

__Configuração__:

- Pluralização `pluralizepages {String}` para páginas (opcional, padrão: `# pages,# page,# pages,# pages`)
- Pluralização `pluralizeitems {String}` para itens (opcional, padrão: `# items,# item,# items,# items`)
- `height {Number/String}` Alteração da rede, valores suportados: `auto` (default) e de novo `fluid`, `parent` ou `NUMBER` A altura ou `selector` para jQuery.closest()
- __NEW__ `minheight {Number}` altura mínima da rede, funciona com `fluid` e `auto` altura (default: `300`)
- __NEW__ `parent {String}` selector para a opção de altura `auto` (default: `window`)
- `margin {Number}` uma margem superior para altura (opcional, padrão: `0`)
- `click {String}` um link para `function(row, grid, row_el)`, é executado se o usuário clicar em uma linha
- `highlight {Boolean}` cada linha selecionada (após `click`) será destacado (default: `false`)
- `unhighlight {Boolean}` permite `undo highlighting` da linha selecionada (default: `true`)
- `checked {String}` `path` para uma variável ou caminho para `function(rows, grid)` é executado se o usuário selecionou/checou algumas linhas
- `autoselect {Boolean}` permite a seleção automática da primeira linha na rede, executa `EXEC(config.click)`, padrão: `false`
- `exec {String}` um link para `function(type, page, sort)` apenas para operações de lado do servidor (esforça a classificação e filtragem do cliente), tipos suportados: `refresh` ou `page`
- `changed {String}` `path` para uma variável ou caminho para `function(rows, grid)` é executado se o usuário alterar algumas linhas
- `dblclick {String}` um link para o método `function(row, grid, row_el)`, é executado se o usuário clicar duas vezes em uma linha
- `noborder {Boolean}` pode desativar uma fronteira em torno da rede (default: `false`)
- `colwidth {Number}` uma largura padrão para colunas (default: `150`)
- `editable {String}` um link para `function(opt)` quando o usuário realiza edição
- `contextmenu {String}` um link para `function(e, grid)` quando o usuário aumenta o menu de contexto

__Propriedades da coluna__:

- `name {String}` um nome de campo no objeto de linha
- `text {String}` é um rótulo de coluna, texto com `.fa fa-home` renderá FontAwesome icon
- `width {Number}` uma coluna largura (opcional, padrão `config.colwidth`)
- `align {String}` pode ser `center` ou `right` (opcional, padrão: `left`)
- `template {String}` pode ser um modelo Tangular e o modelo é todo o objeto da linha
- `sort {Boolean}` permite a classificação (opcional, padrão: `false`)
- `format {String/Number}` pode ser usado para datas e números (conto de decimais) campo (opcional), por exemplo, `dd.MM.yyyy`
- `currency {String}` um formato de moeda, basta adicionar uma moeda
- `class {String}` opcional, um nome de classe de coluna personalizada
- `empty {String/Boolean}` opcional, pode reescrever o valor vazio com o valor definido no campo vazio (o valor `true` usa o valor `---` como um valor padrão)
- `type {String}` opcional, pode conter um tipo de dados (`boolean`, `date` ou `number`) para o campo
- `editable {Boolean}` permite a edição

__Métodos__:

- `component.redrawrow(row_object/index)` redraws linha ou __NEW__: substitui + redrauds `row_object` com um novo `new_object_row`
- `component.clear()` clarifica todas as mudanças
- `component.select(row)` seleciona `row` deve ser o mesmo objeto que na fonte de dados
- `component.rebind(columnsdeclaration)` o método reflete o esquema
- __NEW__: `component.reload()` executa `config.exec` com o filtro e a classificação atuais
- __NEW__: `component.empty()` empties todas as fileiras

__Bom para saber__:

- `SET('link.to.data', data, 'noscroll')` --> tipo `noscroll` interfere com a redefinição de rolamento

__Como estender uma classe de linha?__

- olhando para a linha `{{ if active`, ele estende uma classe de linha adicionando `dg-active-class` se o `active` for válido

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

Use-o com `<ui-component name="datatable">`Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>
```