# j-DataTable

> BETA: este componente está destinado a SPA y listado del lado del servidor.

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

__BETA__: este componente está destinado a SPA y listado del lado del servidor.

- soporta paginación
- se necesita sistema de rejilla `bootstrap`
- admite clasificación
- admite desplazamiento vertical/horizontal
- receptivo
- admite __modo oscuro__

__Fuente de datos__ debe contener:

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

__Configuración__:

- `pluralizepages {String}` pluralización de páginas (opcional, predeterminado: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` pluralización de elementos (opcional, predeterminado: `# items,# item,# items,# items`)
- `height {Number/String}` altura de la cuadrícula, valores admitidos: `auto` (predeterminado), __NEW__ `fluid`, `parent` o `NUMBER` como altura o `selector` para jQuery.closest()
- __NEW__ `minheight {Number}` altura mínima de la rejilla, funciona con altura `fluid` y `auto` (predeterminado: `300`)
- __NEW__ `parent {String}` selector para la opción de altura `auto` (predeterminado: `window`)
- `margin {Number}` un margen superior para la altura (opcional, predeterminado: `0`)
- `click {String}` un enlace a `function(row, grid, row_el)`, se ejecuta si el usuario hace clic en una fila
- `highlight {Boolean}` cada fila seleccionada (después de `click`) se resaltará (predeterminado: `false`)
- `unhighlight {Boolean}` habilita `undo highlighting` de la fila seleccionada (predeterminado: `true`)
- `checked {String}` `path` a una variable o ruta a `function(rows, grid)` se ejecuta si el usuario seleccionó/marcó algunas filas
- `autoselect {Boolean}` habilita la selección automática de la primera fila en la cuadrícula, realiza `EXEC(config.click)`, predeterminado: `false`
- `exec {String}` un enlace a `function(type, page, sort)` solo para operaciones del lado del servidor (deshabilita la clasificación y el filtrado del lado del cliente), tipos admitidos: `refresh` o `page`
- `changed {String}` `path` a una variable o ruta a `function(rows, grid)` se ejecuta si el usuario cambió algunas filas
- `dblclick {String}` un enlace al método `function(row, grid, row_el)`, se ejecuta si el usuario hace doble clic en una fila
- `noborder {Boolean}` puede desactivar un borde alrededor de la cuadrícula (predeterminado: `false`)
- `colwidth {Number}` un ancho predeterminado para columnas (predeterminado: `150`)
- `editable {String}` un enlace a `function(opt)` cuando el usuario realiza la edición
- `contextmenu {String}` un enlace a `function(e, grid)` cuando el usuario abre el menú contextual

__Propiedades de la columna__:

- `name {String}` un nombre de campo en el objeto de fila
- `text {String}` una etiqueta de columna, el texto con `.fa fa-home` representará el ícono FontAwesome
- `width {Number}` un ancho de columna (opcional, predeterminado `config.colwidth`)
- `align {String}` puede ser `center` o `right` (opcional, predeterminado: `left`)
- `template {String}` puede ser una plantilla Tangular y el modelo es el objeto completo de la fila.
- `sort {Boolean}` habilita la clasificación (opcional, predeterminado: `false`)
- `format {String/Number}` se puede utilizar para el campo de fecha y números (recuento de decimales) (opcional), p. `dd.MM.yyyy`
- `currency {String}` un formateador de moneda, solo agregue una moneda
- `class {String}` opcional, un nombre de clase de columna personalizado
- `empty {String/Boolean}` opcional, puede reescribir el valor vacío con el valor definido en el campo vacío (el valor `true` usa `---` como valor predeterminado)
- `type {String}` opcional, puede contener un tipo de datos (`boolean`, `date` o `number`) para el campo
- `editable {Boolean}` permite editar

__Métodos__:

- `component.redrawrow(row_object/index)` vuelve a dibujar la fila o __NEW__: reemplaza+redibuja `row_object` con un nuevo `new_object_row`
- `component.clear()` borra todos los cambios
- `component.select(row)` selecciona `row` debe ser el mismo objeto que en la fuente de datos
- `component.rebind(columnsdeclaration)` el método vuelve a vincular el esquema
- __NUEVO__: `component.reload()` ejecuta `config.exec` con el filtro y la clasificación actuales
- __NEW__: `component.empty()` vacía todas las filas

__Es bueno saberlo__:

- `SET('link.to.data', data, 'noscroll')` --> El tipo `noscroll` desactiva el reinicio del desplazamiento

__¿Cómo extender una clase de fila?__

- mire la línea `{{ if active`, extiende una clase de fila agregando `dg-active-class` si `active` será válida

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

Úselo con `<ui-component name="datatable">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```