# j-Table

> Εμφάνιση αρχείων σε ένα ρυθμιζόμενο τραπέζι.

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

- Το `j-Table` είναι μια πολύ απλή εναλλακτική λύση για το `j-DataGrid` στοχευμένο σε UI
- `data-source` Ελπίζουμε `Array` ή `Object` Με `{ page: 1, pages: 10, limit: 50, items: [], count: 1000 }`

__ΕΠΙΤΡΟΦΗ__:

- Το `highlight {Boolean}` επιτρέπει την έμφαση της γραμμής (προεπιλογή: `true`)
- Το `unhighlight {Boolean}` επιτρέπει την ανώτατη φωτισμό της γραμμής (προεπιλογή: `true`)
- Το `multiple {Boolean}` επιτρέπει πολλαπλές γραμμές φωτισμού (προεπιλεγμένο: `false`)
- `detail {Boolean/String}` Αν `string` Η αξία πρέπει να είναι ένας σύνδεσμος με `function(row_data, next_fn(new_data_for_detail_template_OR__new_html), tdelement)`
- `exec {String}` Ο δρόμος για `function(row/rows)` Ή ο δρόμος για `variable`
- Το `remember {Boolean}` επιτρέπει τη μνήμη των τελευταίων επιλεγμένων γραμμών (προεπιλογή: `false`)
- `pk {String}` ένα κύριο κλειδί (προεπιλεγμένο: `id`)
- `border {Boolean}` επιτρέπει το όριο (προεπιλεγμένο: `true`)
- Το `scrollbar {Boolean}` επιτρέπει την προσαρμοσμένη γραμμή στροφής (προεπιλεγμένο: `false`) + σημαντικό: το `height` πρέπει να προσδιορίζεται
- `height {Number/String}` ύψος του δικτύου ή μπορεί να περιέχει επιλεκτικό `window`, `parent` ή προσαρμοσμένο επιλεκτή `.ui-viewbox-body`
- `paginate {String}` σύνδεση με το `function(model)` για την εκτέλεση της σελίδας `{ page: 1, limit: 10, sort: [] }`
- `redraw {String}` μια σύνδεση με τη λειτουργία, αξιολογείται όταν ο πίνακας αναπαράγεται
- `filter {String}` μια σύνδεση με τη λειτουργία, αξιολογείται πριν από τον πίνακα
- `dblclick {String}` ένα σύνδεσμο με τη λειτουργία, αξιολογείται όταν ο χρήστης κάνει διπλό κλικ
- `datasource {String}` δρόμο προς την πηγή δεδομένων (για άλλα πρόσθετα δεδομένα στο πρότυπο. `{{ $.data.something }}`)
- `click {String}` Ο δρόμος για `function(button_name, row, button_element)`Εκτελείται όταν ο χρήστης κάνει κλικ στο κουμπί
- Το `flat {Boolean}` αφαιρεί την παδίδα στα κύτταρα (προεπιλεγμένο: `false`)
- Το `noborder {Boolean}` αφαιρεί τα σύνορα γύρω από (προεπιλεγμένο: `false`)
- __NEW__: `hidewhenempty {Boolean}` κρύβει τον πίνακα όταν είναι άδειο (προεπιλεγμένο: `false`)

__Καλό να ξέρεις__:

- Κάθε στοιχείο `tr` περιέχει χαρακτηριστικό `data-index` με δείκτη `row`
- Κάθε `td` __element της λεπτομέρειας__ περιέχει το χαρακτηριστικό `data-index` με δείκτη `row`

__Ορισμός HTML__:

```html
<ui-component name="table" path="" config="">

	<!--
		data-size="TD1,TD2,TD3"      : column width, optional (can contain pixels or percentage), "0" means "auto" width
		data-head="TD1,TD2,TD3"      : column names, optional
		data-align="TD1,TD2,TD3"     : column align, optional (0: left, 1: center, 2: right)
		data-type="TYPE"             : can be "detail" (Tangular template) or "empty" (empty is rendered when the Array is empty)
		data-display="MD,XS"         : can contain display types "LG" large, "MD" medium, "SM" small, "XS" extra small
		data-sort="name,,price"      : enables sorting, can contain the name of fields (a column with empty value will have disabled sorting)
	-->
	<script type="text/html" data-size="0,150px,50px" data-head="Name,Created,Opt" data-align="0,0,1" data-sort="1">
		<tr>
			<td>{{ name }}</td>
			<td>{{ dtcreated | format('[date]') }}</td>
			<td>OK</td>
		</tr>
	</script>

	<script type="text/html" data-type="detail">
		DETAIL: {{ name }}
		HIDDEN COMMANDS: {{ $.index }} or {{ $.user }}
	</script>

	<script type="text/html" data-type="empty">
		EMPTY
	</script>

</ui-component>
```

__Καλό να ξέρεις__:

- Το `data-head` μπορεί να περιέχει εικόνες Font Awesome, πρέπει να είναι κρεμασμένο όπως αυτό το `data-head="Name,'cog'"` ή το `data-name="Name,'youtube fab'"`
- `NULL('link.to.data')` Αξιολόγηση `config.paginate`

Χρησιμοποιήστε το με `<ui-component name="table">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html example.html
<style>
	body{padding:50px;margin:0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="table" path="items" config="detail:true;datasource:extra">

	<!-- WITHOUT HEADERS -->

	<script type="text/html" data-size="0,120px,120px" data-head="Name,Price,Controls" data-align="0,2,1" data-sort="name,price,">
		<tr>
			<td><b>{{ $.data.author }}:</b> {{ name }}</td>
			<td class="right">{{ price | format(2) }} &euro;</td>
			<td class="center"><button><i class="ti ti-search"></i></button><button><i class="ti ti-pencil"></i></button><button class="red" disabled><i class="ti ti-trash"></i></button></td>
		</tr>
	</script>

	<script type="text/html" data-type="detail">
		<div class="padding npt npb">
			<div>Author: <b>{{ $.data.author }}</b></div>
			<div>Role: <b>{{ $.data.role }}</b></div>
			<div>Name: <b>{{ name }}</b></div>
			<div>Description: <b>{{ description }}</b></div>
		</div>
	</script>

	<script type="text/html" data-type="empty">
		No data
	</script>

</ui-component>

<br />

<ui-component name="table" path="items" config="border:0">

	<!-- WITHOUT HEADERS -->
	<script type="text/html" data-size="0,120px,120px">
		<tr>
			<td>{{ name }}</td>
			<td class="right">{{ price | format(2) }} &euro;</td>
			<td class="center">{{ created | format('yyyy-MM-dd') }}</td>
		</tr>
	</script>

	<script type="text/html" data-type="empty">
		No data
	</script>

</ui-component>

<script>

	var items = [];
	var extra = {
		author: 'Brutus',
		role: 'Planter'
	};

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

</script>
```