ExtTable

About Fancytree table and gridnav extension.

• Status: beta
• example
• example

Render tree as a table (aka tree grid) and support keyboard navigation in a grid with embedded input controls.

Options

Options of the ext-table extension:

• checkboxColumnIdx, type: {integer}, default: null
  Render the checkboxes into the 1st column.

• customStatus, type: {boolean}, default: false true: generate renderColumns events for status nodes Deprecated! Use the global tree event renderStatusColumns instead

• indentation, type: {integer}, default: 16
  Indent every node level by 16px.

• nodeColumnIdx, type: {integer}, default: 0
  Render node expander, icon, and title to column #0

Options of the ext-gridnav extension:

• autofocusInput, type: {boolean}, default: false
  Focus first embedded input if node gets activated.

• handleCursorKeys, type: {boolean}, default: true
  Allow UP/DOWN in inputs to move to prev/next node.

Events

• renderColumns Render table columns for this node's <tr>. Note that the columns defined by nodeColumnIdx and checkboxColumnIdx are already handled by default. See examples below.

• renderStatusColumns Custom rendering for status nodes (i.e. 'errors', 'loading...', etc.) If this option is set to true instead of a callback, renderColumns is called, even for status nodes. @since v2.15

Methods

• n.a.

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.table.js and optionally jquery.fancytree.gridnav.js:

  <script src="//code.jquery.com/jquery-1.12.1.min.js" type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
  <link href="skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="js/jquery.fancytree.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.gridnav.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.table.js" type="text/javascript"></script>

we also define an empty table with its headers:

<table id="tree">
	<colgroup>
	<col width="30px"></col>
	<col width="30px"></col>
	<col width="*"></col>
	<col width="50px"></col>
	<col width="30px"></col>
	</colgroup>
	<thead>
		<tr> <th> </th> <th>#</th> <th></th> <th>Key</th> <th>Like</th> </tr>
	</thead>
	<tbody>
	</tbody>
</table>

The tree table extension takes care of rendering the node into one of the columns. Other columns have to be renderd in the renderColumns event:

$("#tree").fancytree({
	checkbox: true,
	titlesTabbable: true,        // Add all node titles to TAB chain
	source: SOURCE,
	extensions: ["table", "gridnav"],
	table: {
		checkboxColumnIdx: null, // render the checkboxes into the this column index (default: nodeColumnIdx)
		indentation: 16,         // indent every node level by 16px
		nodeColumnIdx: 0         // render node expander, icon, and title to this column (default: #0)
	},
	gridnav: {
		autofocusInput:   false, // Focus first embedded input if node gets activated
		handleCursorKeys: true   // Allow UP/DOWN in inputs to move to prev/next node
	},

//	renderStatusColumns: false,	 // true: generate renderColumns events for status nodes
	renderColumns: function(event, data) {
		var node = data.node,
			$tdList = $(node.tr).find(">td");

		// (index #0 is rendered by fancytree by adding the checkbox)

		// 
		$tdList.eq(1)
			.text(node.getIndexHier())
			.addClass("alignRight");

		// (index #2 is rendered by fancytree)
		// Make the title cell span the remaining columns, if it is a folder:
		if( node.isFolder() ) {
			$tdList.eq(2)
				.prop("colspan", 3)
				.nextAll().remove();
			return;
		}
		// ...otherwise render remaining columns

		$tdList.eq(3).text(node.data.myCustomData);
		$tdList.eq(4).html("<input type='checkbox' value='" + node.key + "'>");
	}
});

TIP: Columns can be styled using CSS rules like this:

#tree >thead th:nth-child(1),
#tree >tbody td:nth-child(1) {
	text-align: right;
}

Sometimes we need to add class names or attributes to cells of every row, for example to add responsive support with bootstrap. This may be done in the renderColumns callback:

renderColumns: function(event, data) {
	...
	$tdList.eq(2)
		.text(node.data.description)
		.addClass("hidden-xs hidden-sm");
}

However a more performant approach is to define this as part of a row template in the HTML markup:

<table id="tree">
	<thead>
		<tr> <th>Key</th> <th>Title</th> <th class="hidden-xs hidden-sm">Details</th></tr>
	</thead>
	<tbody>
		<tr> <td /> <td /> <td class="hidden-xs hidden-sm" /> </tr>
	</tbody>
</table>

TODO: describe how to customize status nodes, e.g. use colspan to render accross columns, etc.

Recipes

[Howto] Make a table scrollable

Wrap the table into a scrollable <div>

<div id="scrollParent" style="height: 150px; overflow: auto;">
	<table id="tree">
		...
	</table>
</div>

and tell Fancytree to use this as scrollParent:

$("#tree").fancytree({
	extensions: ["table", "gridnav"],
	source: SORUCE,
	scrollParent: $("#scrollParent"),
	table: {
		...
	},

Alternativley, we can use the browser viewport as scroll parent:

$("#tree").fancytree({
	...
	scrollParent: $(window),
	...

[Howto] Add columns

TODO: describe tree.columnIndex, tree.rowFragment etc.

[Howto] Implement paging

TODO: describe addPagingNode() etc.