README
jsTreeTable
Overview
Plugin for the jstree www.jstree.com tree component that provides columns to the tree.
Usage
- Include jquery (>= 1.4.2) and jstree (>=3.0.0) in your page.
- Include jstreetable.js v3 or later
- Include table as a plugin
- Include relevant parameters.
<!-- include jstreetable -->
<script src="/path/to/jstreetable.js"></script>
$("div#id").jstree({
// include table as a plugin
plugins: ["core","ui",...,"table"],
// include relevant parameters
table: {
columns: [{},{},...,{}],
width: 25
},
core: {
data: [...]
}
});
Options
The options are as follows:
width
: width for the entire jstree-table. If no width is given, automatically fills the entire viewport (width: 100%;
)height
: height for the entire jstree-table. If no height is given, height will reflect the amount of content.fixedHeader
: true/false. If true, then when the tree is scrolled the column headers will remain visible. Defaults to true.columnWidth
: default width for a column for which no width is given. If no width is given, the default isauto
.columns
: an array of columns to create, on order. Each entry is an object with the following parameters:tree
: boolean, whether the jstree should be placed in this column. Only the firsttrue
is accepted. If no column is set totree:true
, then the first column is used.width
: width of the column in pixels. If no width is given, the default isauto
except for the last column. In the last column, if no width is given, it is treated as 'auto' and fills the entire rest of the table to the right.header
: string to use as a header for the column.headerClass
: a CSS class to add to the header cell in this columncolumnClass
: a CSS class to add to the header cell and the column cellcellClass
: a CSS class to add to each cell in this column (except for the header) - added to thewideCellClass
: a CSS class to add to each cell in this column (except for the header) - added to thevalue
: the attribute on the node to use as the value for this cell - entered as the text. Must be a string, number, boolean or other primitive.format
: a function to modify the displayed value e.g. date formatting.valueClass
: the attribute on the node to use as a class on this cell - added to thevalueClassPrefix
: a prefix to add to the valueClass to use as a class on this cellwideValueClass
: the attribute on the node to use as a class on this cell - added to thewideValueClassPrefix
: a prefix to add to the wideValueClass to use as a class on this cellsort
: a function to sort the column when the header is clicked - does not replace the default sorting function used for the first columnresizable
: true/false if the columns should be resizable. Defaults to false.draggable
: true/false if the columns should be draggable (requires jQuery UI with sortable plugin). Defaults to false.stateful
: true/false. If true, then whenever a column width is resized, it will store it in html5 localStorage, if available. Defaults to false.contextmenu
: true/false whether or not a context menu for editing the cells should be shown on right-click. Defaults to false.headerContextMenu
: true/false whether or not a context menu for managing columns should be shown on right-click. Defaults to true.checkIcon
: class for the context menu check icons. Defaults to 'fa fa-check' (Font Awesome).arrowUpIcon
: class for the up arrow icon. Defaults to 'fa fa-chevron-up' (Font Awesome).arrowDownIcon
: class for the down arrow icon. Defaults to 'fa fa-chevron-down' (Font Awesome).Value is the name of the property of the node data whose content will be used. Therefore, if you have a node whose data is given by:
{text: "My Node", data: {price: 10}}
and we want the price value (10) to be in column 1, then we have a config of:
table: { columns: [ {width: 50, header: "Nodes"}, {width: 30, header: "Price", value: "price"} ] }
The format option allows you to change the displayed value (10 => $10):
table: { columns: [ {width: 50, header: "Nodes"}, {width: 30, header: "Price", value: 'price', format: function(v){return("