Skip to main content
Skip table of contents



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

kind: panel.dataTable

JavaScript Method


Configuration Options

    kind: panel.dataTable
    name: fooTable
    label: Ur Data
    load: /data/path
	[data]: [
		{ id: 1, firstname: 'Carl', lastname: 'Carlson', username: 'ccarlson', website: '' }, 
		{ id: 2, firstname: 'Lenny', lastname: 'Leonard', username: 'lennyl', website: '' },
		{ id: 3, firstname: 'Bob', lastname: 'Robertson', username: 'brobertson', website: '' }
	[path]: ""
	[header]: true
        id: ~!
		firstname: First Name
        lastname: Last Name
        username: Username
			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
        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."
            tag: small.msg
            content: "This small message has been brought to you by Spawner."


kindpanel.dataTableSpawner 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:

labelstringLabel for this item's column header
sortbooleanCan this column be sorted?
filterboolean / 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.

thobjectProperties to be applied to all <th> elements in this column.
tdobjectProperties to be applied to all <td> elements in this column.
applyfunctionApplies 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.
contentstringString 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.

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:

 path: ":object:path:to:data.source"
dataTypejsonWhat 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.
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.