Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
component.css
component.js
component.json
dependencies.html
example.html
picture.jpg
readme.md

readme.md

j-Table

  • please try to understand the functionality
  • j-Table is very very very simple alternative to j-DataGrid targeted for UI
  • data-source expects Array

Configuration:

  • highlight {Boolean} enables highlighting of the row (default: true)
  • unhighlight {Boolean} enables undo-highlighting of the row (default: true)
  • multiple {Boolean} enables multiple row highlighting (default: false)
  • detail {Boolean/String} if string then the value must be a link to function(row_data, next_fn(new_data_for_detail_template_OR__new_html), tdelement)
  • exec {String} a path to function(row/rows) or path to variable
  • remember {Boolean} enables remembering of last selected rows (default: false)
  • pk {String} a primary key (default: id)

Good to know:

  • each tr element contains data-index attribute with row index
  • each td element of detail contains data-index attribute with row index

HTML definition:

<div data---="table__PATH__CONF">

	<!--
		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)
	-->
	<script type="text/html" data-size="0,150px,50px" data-head="Name,Created,Opt" data-align="0,0,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>

</div>

Author

You can’t perform that action at this time.