panel.dataTable

Description

Creates a <table> element using data retrieved via REST. The data returned from the REST call needs to be an array of objects

Spawner Widget Name

CODE

kind: panel.dataTable

JavaScript Method

CODE

XNAT.ui.panel.dataTable()

Configuration Options

CODE

dataTable:
    kind: panel.dataTable
    name: fooTable
    label: Ur Data
    load: /data/path
	[data]: [
		{ id: 1, firstname: 'Carl', lastname: 'Carlson', username: 'ccarlson', website: 'carl-carlson.name' }, 
		{ id: 2, firstname: 'Lenny', lastname: 'Leonard', username: 'lennyl', website: 'leonnyard.org' },
		{ id: 3, firstname: 'Bob', lastname: 'Robertson', username: 'brobertson', website: 'bobertson.net' }
	]
	[path]: "object.path.to.data"
	[header]: true
    [items]:
        id: ~!
		firstname: First Name
        lastname: Last Name
        username: Username
        website:
			label: Website
			content: <a href="__VALUE__">Website</a>
    [id]: foo-table
    [dataType]: json
    [sortable]: true -or- "list, of, sortable, columns"
    [container]: "#parent-element"
    [width]: 300px
    [element]:
        className: foo bar
        title: "This is your data, and it's rendering one row at a time."
    [before]: "Text, HTML, or Spawner object(s) to insert before the element."
    [after]:
        smallTxt:
            tag: small.msg
            content: "This small message has been brought to you by Spawner."

Properties

Name Value Description

kind panel.dataTable Spawner widget type - creates a <table> element that loads data from a url or specific data set in data property.

name (string) Name attribute for this input, which must match the property name used for data loading and submission.

label (string) Label for table.

header (boolean) Should the property names of the first data object be used for the column headers? This does not affect output if there are items specified.

items

(string / object)

Object map of properties to include in the rendered table. The property name here must match the property name in the data object, and the value will be used as the label for the header <th> element.

Properties with a value of "~!" will be hidden columns. The data will be in the table, but the associated <th> and <td> elements will be hidden.

If an object is used for an item's value, the label value will be used for the header, and the cells value is HTML (with string replacement planned) that will be rendered in the table cells.

items['name']

(string / object)

For each 'item' property, if using a string, this will be the label for the column header. No other options can be set.

For each 'item' property, if using a config object, the following can be set:

Name	Type	Description
label	string	Label for this item's column header
sort	boolean	Can this column be sorted?
filter	boolean / function	If filter: true, add a text `<input>` element for filtering the current column. If a function is used, an HTML element or string must be returned to act as the filter. For example, on the XNAT user management page, `<select>` menus are used to provide pre-defined filters. This allows more complex elements and event handling.
th	object	Properties to be applied to all `<th>` elements in this column.
td	object	Properties to be applied to all `<td>` elements in this column.
apply	function	Applies a transformation function to the data. A single argument is available which is the actual data value. The `this` context of the function contains the entire data object for the current row, making all data accessible for use in the current cell's output. The output from the `apply` function can subsequently be used in the `content` property as `__VALUE__` for further transformation. If `apply` is a string, it will be parsed with JavaScript's eval() function, executing in scope of the spawner instance – this is useful for defining transformation functions in YAML.
content	string	String for each data item's table cell, replacing `__VALUE__` string with the actual data value.

id (string) Value for spawned element's id attribute.

load/url (url) REST URL to retrieve data

data (array) Explicitly pass data as an array of data objects or 2D array.

path

(string)

Custom path to use for looking up object data returned from url specified in the load option (not supported with use of data property). This is a string that represents the object path in dot notation, or if there are property names that contain periods (WHY???), colons can be used as the path delimiter, and must prefix the path, like:

CODE

 path: ":object:path:to:data.source"

dataType json What kind of data will be returned from the request? JSON is supported and is the default - XML support is planned.

sortable (boolean / comma-separated list) Are the columns sortable? Enter true to make ALL columns sortable, or a comma-separated list of the columns that can be sorted. The column names must match the object property names from the returned data.

container (string - selector) Selects existing DOM element that this table will be appended to (inserted into). If the container property is used, the table will not be rendered in the usual Spawner manner - it will not show up as a child of a parent element if it's in the parent's contents.

width (string - CSS width) Explicitly set CSS 'width' property. Will default to '100%' if not specified.

element (object) Object map of DOM attributes and properties to be directly attached to this table. Any attribute that can be added natively to a DOM element can be used in the element object.

before (string / Spawner object) HTML string or Spawner config object that will be inserted before this <table> element.

after (string / Spawner object) HTML string or Spawner config object that will be inserted after this <table> element.