# j-DataTable

> BETA: Den här komponenten är riktad till SPA och server-side listing.

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

__BETA__: Den här komponenten är riktad till SPA och server-side listing.

- Stöd för sidan
- nödvändigt `bootstrap`-system
- Stöd för sortering
- stödjer vertikal/horisontell skruvning
- Svarande
- Stöd för _dark mode_

__data-källa__ måste innehålla:

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

__Konfigurera__:

- `pluralizepages {String}` pluralisering för sidor (alternativt, standard: `# pages,# page,# pages,# pages`)
- `pluralizeitems {String}` pluralisering för objekt (alternativt, standard: `# items,# item,# items,# items`)
- `height {Number/String}` Höjd av nät, stödda värden: `auto` (Föregående inlägg) _NEW `fluid`, `parent` eller `NUMBER` som höjd eller `selector` för jQuery.closest()
- __NEW__ `minheight {Number}` minsta höjd av nät, fungerar med `fluid` och `auto` höjd (default: `300`)
- __NEW__ `parent {String}`-selektor för `auto` höjdalternativ (default: `window`)
- `margin {Number}` en toppmarginal för höjd (alternativ, standard: `0`)
- `click {String}` en länk till `function(row, grid, row_el)`, det körs om användaren klickar på en rad
- `highlight {Boolean}` varje utvalda rad (efter `click`) kommer att betonas (default: `false`)
- `unhighlight {Boolean}` möjliggör `undo highlighting` av den valda raden (default: `true`)
- `checked {String}` `path` till en variabel eller väg till `function(rows, grid)` körs om användaren har valt/kontrollerat vissa rader
- `autoselect {Boolean}` möjliggör självval av första raden i nätverket, det utför `EXEC(config.click)`, standard: `false`
- `exec {String}` en länk till `function(type, page, sort)` för server-sidor (det inaktiverar klient-sidors sortering och filtrering), stödda typer: `refresh` eller `page`
- `changed {String}` `path` till en variabel eller väg till `function(rows, grid)` körs om användaren ändrar vissa rader
- `dblclick {String}` en länk till `function(row, grid, row_el)`-metoden, det körs om användaren dubbelklickar på en rad
- `noborder {Boolean}` kan inaktivera en gräns runt nätverket (default: `false`)
- `colwidth {Number}` en standard bredd för kolumner (default: `150`)
- `editable {String}` en länk till `function(opt)` när användaren utför redigering
- `contextmenu {String}` en länk till `function(e, grid)` när användaren lyfter sammanhangsmenyn

__Kolumner egenskaper__:

- `name {String}` ett fältnamn i raden objekt
- `text {String}` en kolumn etikett, text med `.fa fa-home` kommer att göra FontAwesome ikon
- `width {Number}` en kolumn bredd (alternativt, standard `config.colwidth`)
- `align {String}` kan vara `center` eller `right` (alternativt, standard: `left`)
- `template {String}` kan vara en Tangular mall och modellen är hela objektet i raden
- `sort {Boolean}` möjliggör sortering (alternativ, standard: `false`)
- `format {String/Number}` kan användas för datum och siffror (antal decimaler) fält (alternativ), t.ex. `dd.MM.yyyy`
- `currency {String}` ett valutformat, bara lägga till en valuta
- `class {String}` valfritt, en anpassad kolumn klassnamn
- `empty {String/Boolean}` är valfritt, kan skriva om tomt värde med det värde som definieras i ett tomt fält (`true` värde använder `---` som standardvärde)
- `type {String}` är valfritt, kan innehålla en datatyp (`boolean`, `date` eller `number`) för fältet
- `editable {Boolean}` möjliggör redigering

__Metoder__:

- `component.redrawrow(row_object/index)` redraws rad eller __NEW__: ersätter+redraws `row_object` med en ny `new_object_row`
- `component.clear()` klarar alla förändringar
- `component.select(row)` väljer `row` måste vara samma objekt som i datakälla
- `component.rebind(columnsdeclaration)`-metoden återställer schemat
- __NEW__: `component.reload()` kör `config.exec` med den aktuella filter och sortering
- __NEW__: `component.empty()` empties alla rader

__Bra att veta__:

- `SET('link.to.data', data, 'noscroll')` --> typ `noscroll` inaktiverar återställning av skruv

__Hur man utökar en klass av rad?__

- Se på `{{ if active`-linjen, förlänger den en klass av rad genom att lägga till `dg-active-class` om `active` är giltig

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

Använd den med `<ui-component name="datatable">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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