Element: <oj-table>

Slots

JET elements can have up to two types of child content:

• Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>. All supported named slots are documented below. Child elements with unsupported named slots will be removed from the DOM.
• Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child.

bottom

Named slot for the Table's bottom panel where applications can add content such as a paging control.

Example

Initialize the Table with the bottom slot specified:

<oj-table>
  <div slot='bottom'><oj-paging-control></oj-paging-control></div>
</oj-table>

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc and demos of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

Example

Initialize the component with a context menu:

<oj-some-element>
    <-- use the contextMenu slot to designate this as the context menu for this component -->
    <oj-menu slot="contextMenu" style="display:none" aria-label="Some element's context menu">
...
    </oj-menu>
</oj-some-element>

Attributes

accessibility :Object.<string, string>|null

Accessibility attributes.

Default Value:

• null

Names

Item	Name
Property	accessibility
Property change event	accessibilityChanged
Property change listener attribute (must be of type function)	on-accessibility-changed

Examples

Initialize the Table, overriding accessibility value:

<!-- Using dot notation -->
<oj-table accessibility.row-header='headerColumnId'></oj-table>

<!-- Using JSON notation -->
<oj-table accessibility='{"rowHeader":"headerColumnId"}'></oj-table>

Get or set the accessibility property after initialization:

// Get one
var value = myTable.accessibility.rowHeader;

// Set one. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myTable.setProperty('accessibility.rowHeader', 'headerColumnId');

// Get all
var values = myTable.accessibility;

// Set all.  Must list every accessibility key, as those not listed are lost.
myTable.accessibility = {
    rowHeader: 'headerColumnId'
};

accessibility.row-header :string

The column id to be used as the row header by screen readers.

The td cells in the column specified by this attribute will be assigned an id and then referenced by the headers attribute in the rest of the cells in the row. This is required by screen readers. By default the first column will be taken as the row header.

See the accessibility attribute for usage examples.

Names

Item	Name
Property	accessibility.rowHeader

as :string

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

An alias for the current context when referenced inside the cell template. This can be especially useful if oj-bind-for-each element is used inside the cell template since it has its own scope of data access.

Default Value:

• ''

Names

Item	Name
Property	as
Property change event	asChanged
Property change listener attribute (must be of type function)	on-as-changed

Example

Initialize the Table with the as attribute specified:

<oj-table as='cell' columns='[{"headerText": "Department Id",
                                  "field": "DepartmentId",
                                  "template": "cellTemplate"}]'>
  <template slot='cellTemplate'>
    <p><oj-bind-text value='[[cell.data.name]]'></oj-bind-text></p>
  </template>
</oj-table>

columns :Array.<Object>|null

An array of column definitions.

If the application change the column definitions after the Table is loaded, it must call the refresh() method to update the Table display.

Default Value:

• null

Supports writeback:

• true

Names

Item	Name
Property	columns
Property change event	columnsChanged
Property change listener attribute (must be of type function)	on-columns-changed

Examples

Initialize the table with the columns attribute specified:

<oj-table 
  columns='[{"headerText": "Department Id", "field": "DepartmentId"},
            {"headerText": "Department Name", "field": "DepartmentName"}]'>
</oj-table>

Get or set the columns property after initialization:

// Get one
var value = myTable.columns[0];

// Get all
var values = myTable.columns;

// Set all (There is no permissible "set one" syntax.)
myTable.columns = [{"headerText": "Department Id", "field": "DepartmentId"},
                   {"headerText": "Department Name", "field": "DepartmentName"}];

columns[].className :string|null

The CSS class to apply to the column cells

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].field :string|null

The data field this column refers to.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].footerClassName :string|null

The CSS class to apply to the footer cell.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].footerRenderer :(function()|null)

The renderer function that renders the content of the footer. The function will be passed a context object which contains the following objects:

• columnIndex: The column index
• componentElement: A reference to the Table root element
• footerContext.datasource: The "data" attribute of the Table
• parentElement: Empty rendered element

The function should return one of the following:

• An Object with the following property:
  • insert: HTMLElement | string - A string or a DOM element of the content inside the footer.
• undefined: If the developer chooses to manipulate the footer element directly, the function should return undefined.

If no renderer is specified, the Table will treat the footer data as a String.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].footerStyle :string|null

The CSS styling to apply to the footer cell.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].footerTemplate :string|null

The name of the slot used to specify the template for rendering the footer cell. The slot must be a <template> element. The content of the template should not include the <td> element, only what's inside it. When both footerTemplate and footerRenderer are specified, the footerRenderer takes precedence.

When the template is executed for each footer, it will have access to the binding context containing the following properties:

• $current - an object that contains information for the current footer being rendered. (See the table below for a list of properties available on $current)
• alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

Properties:

Name	Type	Description
componentElement	Element	The <oj-table> custom element.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].headerClassName :string|null

The CSS class to apply to the column header text.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].headerRenderer :(function()|null)

The renderer function that renders the content of the header. The function will be passed a context object which contains the following objects:

• columnIndex: The column index
• columnHeaderDefaultRenderer(options, delegateRenderer): If the column is not sortable then this function will be included in the context. The options parameter specifies the options (future use) for the renderer while the delegateRenderer parameter specifies the function which the developer would like to be called during rendering of the column header.
• columnHeaderSortableIconRenderer(options, delegateRenderer): If the column is sortable then this function will be included in the context. The options parameter specifies the options (future use) for the renderer while the delegateRenderer parameter specifies the function which the developer would like to be called during rendering of the sortable column header. Calling the columnHeaderSortableIconRenderer function enables rendering custom header content while also preserving the sort icons.
• componentElement: A reference to the Table root element
• data: The header text for the column
• headerContext.datasource: The "data" attribute of the Table
• parentElement: Empty rendered TH element

The function should return one of the following:

• An Object with the following property:
  • insert: HTMLElement | string - A string or a DOM element of the content inside the header.
• undefined: If the developer chooses to manipulate the header element directly, the function should return undefined.

If no renderer is specified, the Table will treat the header data as a String.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].headerStyle :string|null

The CSS styling to apply to the column header text.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].headerTemplate :string|null

The name of the slot used to specify the template for rendering the header cell. The slot must be a <template> element. The content of the template should not include the <th> element, only what's inside it. When both headerTemplate and headerRenderer are specified, the headerRenderer takes precedence.

When the template is executed for each header, it will have access to the binding context containing the following properties:

• $current - an object that contains information for the current header being rendered. (See the table below for a list of properties available on $current)
• alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

Properties:

Name	Type	Description
componentElement	Element	The <oj-table> custom element
data	Object	The data object for the current header

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].headerText :string|null

Text to display in the header of the column.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].id :string|null

The identifier for the column

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].renderer :(function()|null)

The renderer function that renders the content of the cell. The function will be passed a context object which contains the following objects:

• cellContext.datasource: The "data" attribute of the Table
• cellContext.mode: The mode of the row. It can be "edit" or "navigation".
• cellContext.status: Contains the rowIndex, rowKey, and currentRow
• columnIndex: The column index
• componentElement: A reference to the Table root element
• data: The cell data
• parentElement: Empty rendered element
• row: Key/value pairs of the row

The function should return one of the following:

• An Object with the following property:
  • insert: HTMLElement | string - A string or a DOM element of the content inside the header.
• undefined: If the developer chooses to manipulate the cell element directly, the function should return undefined.

If no renderer is specified, the Table will treat the cell data as a String.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].resizable :string

Enable or disable width resize along the column end headers.

Supported Values:

Name	Type
'disabled'	string
'enabled'	string

Default Value:

• "disabled"

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].sortProperty :string|null

Indicates the row attribute used for sorting when sort is invoked on this column. Useful for concatenated columns, where the sort is done by only a subset of the concatenated items.

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].sortable :string

Whether or not the column is sortable.

A sortable column has a clickable header that (when clicked) sorts the table by that column's property. Note that in order for a column to be sortable, this attribute must be set to "enabled" and the underlying model must support sorting by this column's property. If this attribute is set to "auto" then the column will be sortable if the underlying model supports sorting. A value of "disabled" will disable sorting on the column.

See the columns attribute for usage examples.

Supported Values:

Name	Type	Description
"auto"	string	Column will be sortable if the underlying model supports sorting.
"disabled"	string	Disabled.
"enabled"	string	Enabled.

Default Value:

• "auto"

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].style :string|null

The CSS styling to apply to the column cells

See the columns attribute for usage examples.

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].template :string|null

The name of the slot used to specify the template for rendering the cell. The slot must be a <template> element. The content of the template should not include the <td> element, only what's inside it. When both cell template and cell renderer are specified, the cell renderer takes precedence.

When the template is executed for the cell, it will have access to the binding context containing the following properties:

• $current - An object that contains information for the current cell being rendered (See the table below for a list of properties available on $current)
• alias - If as attribute was specified, the value will be used to provide an application-named alias for $current.

Properties:

Name	Type	Description
componentElement	Element	The <oj-table> custom element
data	Object	The data for the current cell being rendered
row	Object	The data for the row contained the current cell being rendered
index	number	The zero-based index of the current row being rendered
columnIndex	number	The zero-based index of the current column being rendered.
key	any	The key of the current cell being rendered.
mode	string	The mode of the row containing the cell. It can be "edit" or "navigation".

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns[].width :number|null

The width in px of the column

Default Value:

• null

Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.

columns-default :Object

Default values to apply to all columns objects.

Names

Item	Name
Property	columnsDefault
Property change event	columnsDefaultChanged
Property change listener attribute (must be of type function)	on-columns-default-changed

Examples

Initialize the component, overriding some columns defaults and leaving the others intact:

<!-- Using dot notation -->
<oj-table columns-default.sortable='disabled' columns-default.header-style='text-align: left; white-space:nowrap;'></oj-table>

<!-- Using JSON notation -->
<oj-table columns-default='{"sortable":"disabled", "headerStyle":"text-align: left; white-space:nowrap;"}'></oj-table>

Get or set the columnsDefault property after initialization:

// Get one
var value = myTable.columnsDefault.headerStyle;

// Set one, leaving the others intact. Use the setProperty API for 
// subproperties so that a property change event is fired.
myTable.setProperty('columnsDefault.headerStyle', 'text-align: left; white-space:nowrap;');

// Get all
var values = myTable.columnsDefault;

// Set all.  Must list every default, as those not listed are lost.
myTable.columnsDefault = {
    sortable: 'disabled',
    headerStyle: 'text-align: left; white-space:nowrap;'
};

columns-default.class-name :string|null

The default CSS class for column cells

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.className

columns-default.field :string|null

The default data field for column.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.field

columns-default.footer-class-name :string|null

The CSS class to apply to the footer cell.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.footerClassName

columns-default.footer-renderer :(function()|null)

The renderer function that renders the content of the footer. The function will be passed a context object which contains the following objects:

• columnIndex: The column index
• componentElement: A reference to the Table root element
• footerContext.datasource: The "data" attribute of the Table
• parentElement: Empty rendered element

The function should return one of the following:

• An Object with the following property:
  • insert: HTMLElement | string - A string or a DOM element of the content inside the footer.
• undefined: If the developer chooses to manipulate the footer element directly, the function should return undefined.

If no renderer is specified, the Table will treat the footer data as a String.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.footerRenderer

columns-default.footer-style :string|null

The CSS styling to apply to the footer cell.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.footerStyle

columns-default.footer-template :string|null

The name of the slot used to specify the template for rendering the footer cell. The slot must be a <template> element. The content of the template should not include the <td> element, only what's inside it. When both footerTemplate and footerRenderer are specified, the footerRenderer takes precedence.

When the template is executed for each footer, it will have access to the binding context containing the following properties:

• $current - an object that contains information for the current footer being rendered. (See the table below for a list of properties available on $current)
• alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

Properties:

Name	Type	Description
componentElement	Element	The <oj-table> custom element.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.footerTemplate

columns-default.header-class-name :string|null

The default CSS class to apply to the column header.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.headerClassName

columns-default.header-renderer :(function()|null)

The renderer function that renders the content of the header. The function will be passed a context object which contains the following objects:

• columnIndex: The column index
• columnHeaderDefaultRenderer(options, delegateRenderer): If the column is not sortable then this function will be included in the context. The options parameter specifies the options (future use) for the renderer while the delegateRenderer parameter specifies the function which the developer would like to be called during rendering of the column header.
• columnHeaderSortableIconRenderer(options, delegateRenderer): If the column is sortable then this function will be included in the context. The options parameter specifies the options (future use) for the renderer while the delegateRenderer parameter specifies the function which the developer would like to be called during rendering of the sortable column header. Calling the columnHeaderSortableIconRenderer function enables rendering custom header content while also preserving the sort icons.
• componentElement: A reference to the Table root element
• data: The header text for the column
• headerContext.datasource: The "data" attribute of the Table
• parentElement: Empty rendered TH element

The function should return one of the following:

• An Object with the following property:
  • insert: HTMLElement | string - A string or a DOM element of the content inside the header.
• undefined: If the developer chooses to manipulate the header element directly, the function should return undefined.

If no renderer is specified, the Table will treat the header data as a String.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.headerRenderer

columns-default.header-style :string|null

The default CSS styling to apply to the column header.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.headerStyle

columns-default.header-template :string|null

The name of the slot used to specify the template for rendering the header cell. The slot must be a <template> element. The content of the template should not include the <th> element, only what's inside it. When both headerTemplate and headerRenderer are specified, the headerRenderer takes precedence.

When the template is executed for each header, it will have access to the binding context containing the following properties:

• $current - an object that contains information for the current header being rendered. (See the table below for a list of properties available on $current)
• alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

Properties:

Name	Type	Description
componentElement	Element	The <oj-table> custom element
data	Object	The data object for the current header

Default Value:

• null

Names

Item	Name
Property	columnsDefault.headerTemplate

columns-default.header-text :string|null

Default text to display in the header of the column.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.headerText

columns-default.renderer :(function()|null)

The renderer function that renders the content of the cell. The function will be passed a context object which contains the following objects:

• cellContext.datasource: The "data" attribute of the Table
• cellContext.mode: The mode of the row. It can be "edit" or "navigation".
• cellContext.status: Contains the rowIndex, rowKey, and currentRow
• columnIndex: The column index
• componentElement: A reference to the Table root element
• data: The cell data
• parentElement: Empty rendered element
• row: Key/value pairs of the row

The function should return one of the following:

• An Object with the following property:
  • insert: HTMLElement | string - A string or a DOM element of the content inside the header.
• undefined: If the developer chooses to manipulate the cell element directly, the function should return undefined.

If no renderer is specified, the Table will treat the cell data as a String.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.renderer

columns-default.resizable :string|null

Enable or disable width resize along the column end headers.

Supported Values:

Name	Type
'disabled'	string
'enabled'	string

Default Value:

• "disabled"

Names

Item	Name
Property	columnsDefault.resizable

columns-default.sort-property :string|null

Indicates the row attribute used for sorting when sort is invoked on this column. Useful for concatenated columns, where the sort is done by only a subset of the concatenated items.

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.sortProperty

columns-default.sortable :string|null

Whether or not the column is sortable.

A sortable column has a clickable header that (when clicked) sorts the table by that column's property. Note that in order for a column to be sortable, this attribute must be set to "enabled" and the underlying model must support sorting by this column's property. If this attribute is set to "auto" then the column will be sortable if the underlying model supports sorting. A value of "disabled" will disable sorting on the column.

See the columns-default attribute for usage examples.

Supported Values:

Name	Type	Description
"auto"	string	Column will be sortable if the underlying model supports sorting.
"disabled"	string	Disabled.
"enabled"	string	Enabled.

Default Value:

• "auto"

Names

Item	Name
Property	columnsDefault.sortable

columns-default.style :string|null

Default CSS styling to apply to the column cells

See the columns-default attribute for usage examples.

Default Value:

• null

Names

Item	Name
Property	columnsDefault.style

columns-default.template :string|null

The name of the slot used to specify the template for rendering the cell. The slot must be a <template> element. The content of the template should not include the <td> element, only what's inside it. When both cell template and cell renderer are specified, the cell renderer takes precedence.

When the template is executed for the cell, it will have access to the binding context containing the following properties:

• $current - an object that contains information for the current cell being rendered
• alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.

Properties:

Name	Type	Description
componentElement	Element	The <oj-table> custom element
data	Object	The data for the current cell being rendered
row	Object	The data for the row contained the current cell being rendered
index	number	The zero-based index of the current row being rendered
columnIndex	number	The zero-based index of the current column being rendered.
key	any	The key of the current cell being rendered.
mode	string	The mode of the row containing the cell. It can be "edit" or "navigation".

Default Value:

• null

Names

Item	Name
Property	columnsDefault.template

columns-default.width :number|null

Default CSS width to apply to the column

Default Value:

• null

Names

Item	Name
Property	columnsDefault.width

current-row :Object

The row that currently have keyboard focus. Can be an index and/or key value. When both are specified, the index is used as a hint. Returns the current row or null if there is none.

Default Value:

• null

Supports writeback:

• true

Names

Item	Name
Property	currentRow
Property change event	currentRowChanged
Property change listener attribute (must be of type function)	on-current-row-changed

Examples

Initialize the Table with the current-row attribute specified:

<oj-table current-row='{"rowIndex": 1}'></oj-table>

Get or set the currentRow property after initialization:

// getter
var value = myTable.currentRow;

// setter
myTable.currentRow = {rowKey: '123'};

data :oj.DataProvider|oj.TableDataSource|null

The data to bind to the element.

Must be of type oj.DataProvider oj.DataProvider or type oj.TableDataSource oj.TableDataSource

Default Value:

• null

Names

Item	Name
Property	data
Property change event	dataChanged
Property change listener attribute (must be of type function)	on-data-changed

Examples

Initialize the Table with the data attribute specified:

<oj-table data='{{dataProvider}}'></oj-table>

Get or set the data property after initialization:

// getter
var dataProvider = myTable.data;

// setter
myTable.data = dataProvider;

display :string

Whether to display table in list or grid mode. Setting a value of grid will cause the table to display in grid mode. The default value of this attribute is set through the theme.

Supported Values:

Name	Type	Description
"grid"	string	Display table in grid mode. This is a more compact look than list mode.
"list"	string	Display table in list mode.

Default Value:

• "list"

Names

Item	Name
Property	display
Property change event	displayChanged
Property change listener attribute (must be of type function)	on-display-changed

Examples

Initialize the Table with the display attribute specified:

<oj-table display='grid'></oj-table>

Get or set the display property after initialization:

// getter
var displayValue = myTable.display;

// setter
myTable.display = 'grid';

dnd :Object

Enable drag and drop functionality.

JET provides support for HTML5 Drag and Drop events. Please refer to third party documentation on HTML5 Drag and Drop to learn how to use it.

Names

Item	Name
Property	dnd
Property change event	dndChanged
Property change listener attribute (must be of type function)	on-dnd-changed

Examples

Initialize the table with some dnd functionality:

<!-- Using dot notation -->
<oj-table dnd.reorder.columns='enabled' dnd.drag.rows.dataTypes='application/ojtablerows+json'></oj-table>

<!-- Using JSON notation -->
<oj-table dnd='{"reorder":{"columns":"enabled"}, "drag":{"rows":{"dataTypes":"application/ojtablerows+json"}}}'></oj-table>

Get or set the dnd property after initialization:

// Get one
var value = myTable.dnd.reorder;

// Set one, leaving the others intact. Use the setProperty API for 
// subproperties so that a property change event is fired.
myTable.setProperty('dnd.reorder', {"columns":"enabled"});

// Get all
var values = myTable.dnd;

// Set all.  Must list every dnd functionality, as those not listed are lost.
myTable.dnd = {
    reorder: {"columns":"enabled"},
    drag: {"rows":{"dataTypes":"application/ojtablerows+json"}}
};

dnd.drag :Object

An object that describes drag functionlity.

See the dnd attribute for usage examples.

Names

Item	Name
Property	dnd.drag

dnd.drag.rows :Object

If this object is specified, the table will initiate drag operation when the user drags on selected rows.

See the dnd attribute for usage examples.

Properties:

Name	Type	Argument	Description
dataTypes	string | Array.<string>	<optional>	(optional) The MIME types to use for the dragged data in the dataTransfer object. This can be a string if there is only one type, or an array of strings if multiple types are needed. For example, if selected rows of employee data are being dragged, dataTypes could be "application/employees+json". Drop targets can examine the data types and decide whether to accept the data. A text input may only accept "text" data type, while a chart for displaying employee data may be configured to accept the "application/employees+json" type. For each type in the array, dataTransfer.setData will be called with the specified type and the JSON version of the selected rows data as the value. The selected rows data is an array of objects, with each object representing one selected row in the format returned by TableDataSource.get(). This property is required unless the application calls setData itself in a dragStart callback function.
dragStart	function(DragEvent, oj.ojTable.DragRowContext<K,D>):void	<optional>	(optional) A callback function that receives the "dragstart" event and context information as arguments: function(event, context) Parameters: event: The DOM event object context: oj.ojTable.DragRowContext object with the following properties: rows: An array of objects, with each object representing the data of one selected row in the structure below: data The raw row data index The index for the row key The key value for the row This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected rows visible on the table.
drag	function(DragEvent):void	<optional>	(optional) A callback function that receives the "drag" event as argument: function(event) Parameters: event: The DOM event object
dragEnd	function(DragEvent):void	<optional>	(optional) A callback function that receives the "dragend" event as argument: function(event) Parameters: event: The DOM event object

Default Value:

• null

Names

Item	Name
Property	dnd.drag.rows

dnd.drop :Object

An object that describes drop functionlity.

See the dnd attribute for usage examples.

Names

Item	Name
Property	dnd.drop

dnd.drop.columns :Object

An object that specifies callback functions to handle dropping columns

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:

• columnIndex: The index of the column being dropped on

See the dnd attribute for usage examples.

Properties:

Name	Type	Argument	Description
dataTypes	string | Array.<string>		A data type or an array of data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter	function(DragEvent, oj.ojTable.DropColumnContext):void	<optional>	(optional) A callback function that receives the "dragenter" event and context information as arguments: function(event, context) This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragOver	function(DragEvent, oj.ojTable.DropColumnContext):void	<optional>	(optional) A callback function that receives the "dragover" event and context information as arguments: function(event, context) Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
dragLeave	function(DragEvent, oj.ojTable.DropColumnContext):void	<optional>	(optional) A callback function that receives the "dragleave" event and context information as arguments: function(event, context)
drop	function(DragEvent, oj.ojTable.DropColumnContext):void		(required) A callback function that receives the "drop" event and context information as arguments: function(event, context) This function should call event.preventDefault() to indicate the dragged data is accepted.

Default Value:

• null

Names

Item	Name
Property	dnd.drop.columns

dnd.drop.rows :Object

An object that specifies callback functions to handle dropping rows

For all callback functions, the following arguments will be passed:

event: The DOM event object

context: Context object with the following properties:

• rowIndex: The index of the row being dropped on

See the dnd attribute for usage examples.

Properties:

Name	Type	Argument	Description
dataTypes	string | Array.<string>		A data type or an array of data types this element can accept. This property is required unless dragEnter, dragOver, and drop callback functions are specified to handle the corresponding events.
dragEnter	function(DragEvent, oj.ojTable.DropRowContext):void	<optional>	(optional) A callback function that receives the "dragenter" event and context information as arguments: function(event, context) This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted.
dragOver	function(DragEvent, oj.ojTable.DropRowContext):void	<optional>	(optional) A callback function that receives the "dragover" event and context information as arguments: function(event, context) Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable.
dragLeave	function(DragEvent, oj.ojTable.DropRowContext):void	<optional>	(optional) A callback function that receives the "dragleave" event and context information as arguments: function(event, context)
drop	function(DragEvent, oj.ojTable.DropRowContext):void		(required) A callback function that receives the "drop" event and context information as arguments: function(event, context) This function should call event.preventDefault() to indicate the dragged data is accepted. If the application needs to look at the data for the row being dropped on, it can use the getDataForVisibleRow method.

Default Value:

• null

Names

Item	Name
Property	dnd.drop.rows

dnd.reorder :Object

An object that describes reorder functionlity.

See the dnd attribute for usage examples.

Names

Item	Name
Property	dnd.reorder

dnd.reorder.columns :string

Enable or disable reordering the columns within the same table using drag and drop.

Re-ordering is supported one column at a time. In addition, re-ordering will not re-order any cells which have the colspan attribute with value > 1. Such cells will need to be re-ordered manually by listening to the property change event on the columns property.

See the dnd attribute for usage examples.

Supported Values:

Name	Type	Description
'disabled'	string	Disable column reordering
'enabled'	string	Enable column reordering

Default Value:

• "disabled"

Names

Item	Name
Property	dnd.reorder.columns

edit-mode :string

Determine if the table is read only or editable. Use 'none' if the table is strictly read only and will be a single Tab stop on the page. Use 'rowEdit' if you want single row at a time editability. The table will initially render with all rows in read only mode. Pressing Enter/F2 or double click will make the current row editable and pressing Tab navigates to the next cell. Pressing ESC/F2 while in this mode will switch the table back to all rows in read only mode and will be a single Tab stop the page.

Supported Values:

Name	Type	Description
"none"	string	The table is read only and is a single Tab stop.
"rowEdit"	string	The table has single row at a time editability and the cells within the editable row are tabbable.

Default Value:

• "none"

Names

Item	Name
Property	editMode
Property change event	editModeChanged
Property change listener attribute (must be of type function)	on-edit-mode-changed

Examples

Initialize the Table with the edit-mode attribute specified:

<oj-table edit-mode='rowEdit'></oj-table>

Get or set the editMode property after initialization:

// getter
var value = myTable.editMode;

// setter
myTable.editMode = 'rowEdit';

(readonly) first-selected-row :Object

Gets the key and data of the first selected row. The first selected row is defined as the first key returned by the selection property. The value of this property contains:

• key - the key of the first selected row.
• data - the data of the first selected row. If the selected row is not locally available, this will be null.

If no rows are selected then this property will return an object with both key and data properties set to null.

Default Value:

• {'key': null, 'data': null}

Supports writeback:

• true

Names

Item	Name
Property	firstSelectedRow
Property change event	firstSelectedRowChanged
Property change listener attribute (must be of type function)	on-first-selected-row-changed

Example

Get the data of the first selected row:

// getter
var firstSelectedRowValue = myTable.firstSelectedRow;

horizontal-grid-visible :string

Whether the horizontal gridlines are to be drawn. Can be enabled or disabled. The default value of auto means it's determined by the display attribute.

Supported Values:

Name	Type	Description
"auto"	string	Determined by display attribute.
"disabled"	string	Disabled.
"enabled"	string	Enabled.

Default Value:

• "auto"

Names

Item	Name
Property	horizontalGridVisible
Property change event	horizontalGridVisibleChanged
Property change listener attribute (must be of type function)	on-horizontal-grid-visible-changed

Examples

Initialize the Table with the horizontal-grid-visible attribute specified:

<oj-table horizontal-grid-visible='disabled'></oj-table>

Get or set the horizontalGridVisible property after initialization:

// getter
var value = myTable.horizontalGridVisible;

// setter
myTable.horizontalGridVisible = 'disabled';

row-renderer :(function()|null)

The row renderer function to use.

The renderer function will be passed in an Object which contains the fields:

• componentElement: A reference to the Table root element
• data: Key/value pairs of the row
• parentElement: Empty rendered TR element
• rowContext.datasource: The "data" attribute of the Table
• rowContext.mode: The mode of the row. It can be "edit" or "navigation".
• rowContext.status: Contains the rowIndex, rowKey, and currentRow

The function returns either a String or a DOM element of the content inside the row. If the developer chooses to manipulate the row element directly, the function should return nothing.

Default Value:

• null

Names

Item	Name
Property	rowRenderer
Property change event	rowRendererChanged
Property change listener attribute (must be of type function)	on-row-renderer-changed

Examples

Initialize the Table with the row-renderer attribute specified:

<oj-table row-renderer='{{myRowRenderer}}'></oj-table>

Get or set the rowRenderer property after initialization:

// getter
var value = myTable.rowRenderer;

// setter
myTable.rowRenderer = myRowRenderer;

scroll-policy :string

Specifies the mechanism used to scroll the data inside the table. Possible values are: auto and loadMoreOnScroll. When loadMoreOnScroll is specified, additional data are fetched when the user scrolls to the bottom of the table.

Supported Values:

Name	Type	Description
"auto"	string	Determined by element. The default is to display all data.
"loadMoreOnScroll"	string	Additional data are fetched when the user scrolls to the bottom of the table.

Default Value:

• "auto"

Names

Item	Name
Property	scrollPolicy
Property change event	scrollPolicyChanged
Property change listener attribute (must be of type function)	on-scroll-policy-changed

Examples

Initialize the Table with the scroll-policy attribute specified:

<oj-table scroll-policy='loadMoreOnScroll'></oj-table>

Get or set the scrollPolicy property after initialization:

// getter
var value = myTable.scrollPolicy;

// setter
myTable.scrollPolicy = 'loadMoreOnScroll';

scroll-policy-options :Object|null

scrollPolicy options.

When scrollPolicy is loadMoreOnScroll, the next block of rows is fetched when the user scrolls to the end of the table. The fetchSize property determines how many rows are fetched in each block.

Names

Item	Name
Property	scrollPolicyOptions
Property change event	scrollPolicyOptionsChanged
Property change listener attribute (must be of type function)	on-scroll-policy-options-changed

Examples

Initialize the component, overriding some scroll-policy-options values and leaving the others intact:

<!-- Using dot notation -->
<oj-table scroll-policy-options.some-key='some value' scroll-policy-options.some-other-key='some other value'></oj-table>

<!-- Using JSON notation -->
<oj-table scroll-policy-options='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-table>

Get or set the scrollPolicyOptions property after initialization:

// Get one
var value = myTable.scrollPolicyOptions.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myTable.setProperty('scrollPolicyOptions.someKey', 'some value');

// Get all
var values = myTable.scrollPolicyOptions;

// Set all.  Must list every scrollPolicyOptions key, as those not listed are lost.
myTable.scrollPolicyOptions = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

scroll-policy-options.fetch-size :number

The number of rows to fetch in each block of rows.

See the scroll-policy-options attribute for usage examples.

Default Value:

• 25

Names

Item	Name
Property	scrollPolicyOptions.fetchSize

scroll-policy-options.max-count :number

The maximum number of rows which will be displayed before fetching more rows will be stopped.

See the scroll-policy-options attribute for usage examples.

Default Value:

• 500

Names

Item	Name
Property	scrollPolicyOptions.maxCount

selection :Array.<Object>

Specifies the current selections in the table. Can be either an index or key value. When both are specified, the index is used as a hint. Returns an array of range objects, or an empty array if there's no selection.

Default Value:

• []

Supports writeback:

• true

Names

Item	Name
Property	selection
Property change event	selectionChanged
Property change listener attribute (must be of type function)	on-selection-changed

Examples

Initialize the table with the selection attribute specified:

<oj-table selection='[{"startIndex": {"row":1}, "endIndex":{"row":3}}]'></oj-table>

Get or set the selection property after initialization:

// Get one
var value = myTable.selection[0];

// Get all
var values = myTable.selection;

// Set all (There is no permissible "set one" syntax.)
myTable.selection = [{startIndex: {"row":1}, endIndex:{"row":3}},
                     {startIndex: {"row":7}, endIndex:{"row":9}}];

Set a row selection using index:

myTable.selection = [{startIndex: {"row":1}, endIndex:{"row":3}}];

Set a column selection using index:

myTable.selection = [{startIndex: {"column":2}, endIndex: {"column":4}}];

Set a row selection using key value:

myTable.selection = [{startKey: {"row":"10"}, endKey:{"row":"30"}}];

Set a column selection using key value:

myTable.selection = [{startKey: {"column": "column1"}, endKey: {"column": "column2"}}];

selection-mode :Object.<string, string>|null

The row and column selection modes. Both can be either single or multiple.

Default Value:

• null

Names

Item	Name
Property	selectionMode
Property change event	selectionModeChanged
Property change listener attribute (must be of type function)	on-selection-mode-changed

Examples

Initialize the Table, setting selection modes:

<!-- Using dot notation -->
<oj-table selection-mode.row='single' selection-mode.column='multiple'></oj-table>

<!-- Using JSON notation -->
<oj-table selection-mode='{"row":"single", "column":"multiple"}'></oj-table>

Get or set the selectionMode property after initialization:

// Get one
var value = myTable.selectionMode.row;

// Set one. Use the setProperty API for 
// subproperties so that a property change event is fired.
myTable.setProperty('selectionMode.row', 'single');

// Get all
var values = myTable.selectionMode;

// Set all
myTable.selectionMode = {
    row: 'single',
    column: 'multiple'
};

selection-mode.column :string

The selection mode for columns.

See the selection-mode attribute for usage examples. By default, this element does not allow any selection.

Supported Values:

Name	Type	Description
'multiple'	string	Allow multiple selections
'single'	string	Allow single selection

Names

Item	Name
Property	selectionMode.column

selection-mode.row :string

The selection mode for rows.

See the selection-mode attribute for usage examples. By default, this element does not allow any selection.

Supported Values:

Name	Type	Description
'multiple'	string	Allow multiple selections
'single'	string	Allow single selection

Names

Item	Name
Property	selectionMode.row

selection-required :boolean

Whether selection is required. If true, then at least one row will always remain selected.

Default Value:

• false

Names

Item	Name
Property	selectionRequired
Property change event	selectionRequiredChanged
Property change listener attribute (must be of type function)	on-selection-required-changed

Examples

Initialize the Table, setting selection required:

<!-- Using dot notation -->
<oj-table selection-required='true'></oj-table>

Get or set the selectionRequired property after initialization:

// Get one
var value = myTable.selectionRequired;

// Set one. Use the setProperty API for 
// subproperties so that a property change event is fired.
myTable.setProperty('selectionRequired', 'true');

translations :Object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names

Item	Name
Property	translations
Property change event	translationsChanged
Property change listener attribute (must be of type function)	on-translations-changed

Examples

Initialize the component, overriding some translated resources and leaving the others intact:

<!-- Using dot notation -->
<oj-some-element translations.some-key='some value' translations.some-other-key='some other value'></oj-some-element>

<!-- Using JSON notation -->
<oj-some-element translations='{"someKey":"some value", "someOtherKey":"some other value"}'></oj-some-element>

Get or set the translations property after initialization:

// Get one
var value = myComponent.translations.someKey;

// Set one, leaving the others intact. Always use the setProperty API for 
// subproperties rather than setting a subproperty directly.
myComponent.setProperty('translations.someKey', 'some value');

// Get all
var values = myComponent.translations;

// Set all.  Must list every resource key, as those not listed are lost.
myComponent.translations = {
    someKey: 'some value',
    someOtherKey: 'some other value'
};

translations.label-acc-selection-affordance-bottom :string

Label for the bottom selection affordance on touch devices.

See the translations attribute for usage examples.

Names

Item	Name
Property	translations.labelAccSelectionAffordanceBottom

translations.label-acc-selection-affordance-top :string

Label for the top selection affordance on touch devices.

See the translations attribute for usage examples.

Names

Item	Name
Property	translations.labelAccSelectionAffordanceTop

translations.label-disable-non-contiguous-selection :string

Provides properties to customize the context menu label for exiting non-contigous selection.

See the translations attribute for usage examples.

Since:

• 1.2.0

Names

Item	Name
Property	translations.labelDisableNonContiguousSelection

translations.label-edit-row :string

Edit row label.

See the translations attribute for usage examples.

Default Value:

• "Edit Row"

Names

Item	Name
Property	translations.labelEditRow

translations.label-enable-non-contiguous-selection :string

Provides properties to customize the context menu label for entering non-contigous selection.

See the translations attribute for usage examples.

Since:

• 1.2.0

Names

Item	Name
Property	translations.labelEnableNonContiguousSelection

translations.label-resize :string

Provides properties to customize the context menu label for column resize.

See the translations option for usage examples.

Since:

• 4.0.0

Names

Item	Name
Property	translations.labelResize

translations.label-resize-popup-spinner :string

Provides properties to customize the resize popup spinner label.

See the translations option for usage examples.

Since:

• 4.0.0

Names

Item	Name
Property	translations.labelResizePopupSpinner

translations.label-resize-popup-submit :string

Provides properties to customize the resize popup submit button.

See the translations option for usage examples.

Since:

• 4.0.0

Names

Item	Name
Property	translations.labelResizePopupSubmit

translations.label-select-and-edit-row :string

Select and Edit row label.

See the translations attribute for usage examples.

Default Value:

• "Select And Edit Row"

Names

Item	Name
Property	translations.labelSelectAndEditRow

translations.label-select-colum :string

Select column label.

See the translations attribute for usage examples.

Default Value:

• "Select Column"

Names

Item	Name
Property	translations.labelSelectColum

translations.label-select-row :string

Select row label.

See the translations attribute for usage examples.

Default Value:

• "Select Row"

Names

Item	Name
Property	translations.labelSelectRow

translations.label-sort :string

Context menu label for sort.

See the translations attribute for usage examples.

Default Value:

• "Sort"

Names

Item	Name
Property	translations.labelSort

translations.label-sort-asc :string

Context menu label for sort ascending.

See the translations attribute for usage examples.

Default Value:

• "Sort Ascending"

Names

Item	Name
Property	translations.labelSortAsc

translations.label-sort-dsc :string

Context menu label for sort descending.

See the translations attribute for usage examples.

Default Value:

• "Sort Descending"

Names

Item	Name
Property	translations.labelSortDsc

translations.msg-column-resize-width-validation :string

Column resize input width validation

See the translations option for usage examples.

Default Value:

• "Width value must be an integer."

Names

Item	Name
Property	translations.msgColumnResizeWidthValidation

translations.msg-fetching-data :string

Fetching data message.

See the translations attribute for usage examples.

Default Value:

• "Fetching Data..."

Names

Item	Name
Property	translations.msgFetchingData

translations.msg-initializing :string

Table initializing message.

See the translations attribute for usage examples.

Default Value:

• "Initializing..."

Names

Item	Name
Property	translations.msgInitializing

translations.msg-no-data :string

No data to display message.

See the translations attribute for usage examples.

Default Value:

• "No data to display."

Names

Item	Name
Property	translations.msgNoData

translations.msg-scroll-policy-max-count-detail :string

Warning message detail that maxCount has been reached for scrollPolicy=loadMoreOnScroll

See the translations attribute for usage examples.

Default Value:

• "Please reload with smaller data set."

Names

Item	Name
Property	translations.msgScrollPolicyMaxCountDetail

translations.msg-scroll-policy-max-count-summary :string

Warning message summary that maxCount has been reached for scrollPolicy=loadMoreOnScroll

See the translations attribute for usage examples.

Default Value:

• "Exceeded maximum rows for table scrolling."

Names

Item	Name
Property	translations.msgScrollPolicyMaxCountSummary

translations.msg-status-sort-ascending :string

Sort ascending status notification for accessibility

See the translations attribute for usage examples.

Default Value:

• "{0} sorted in ascending order."

Names

Item	Name
Property	translations.msgStatusSortAscending

translations.msg-status-sort-descending :string

Sort descending status notification for accessibility

See the translations attribute for usage examples.

Default Value:

• "{0} sorted in descending order."

Names

Item	Name
Property	translations.msgStatusSortDescending

vertical-grid-visible :string

Whether the vertical gridlines are to be drawn. Can be enabled or disabled. The default value of auto means it's determined by the display attribute.

Supported Values:

Name	Type	Description
"auto"	string	Determined by display attribute.
"disabled"	string	Disabled.
"enabled"	string	Enabled.

Default Value:

• "auto"

Names

Item	Name
Property	verticalGridVisible
Property change event	verticalGridVisibleChanged
Property change listener attribute (must be of type function)	on-vertical-grid-visible-changed

Context Objects

Each context object contains, at minimum, a subId property, whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.

Following are the valid subIds:

oj-table-cell

Context for the Table element's cells.

Properties:

Name	Type	Description
rowIndex	number	the zero based absolute row index
columnIndex	number	the zero based absolute column index
key	string	the row key

oj-table-footer

Context for the Table element's footers.

Properties:

Name	Type	Description
index	number	the zero based absolute column index

oj-table-header

Context for the Table element's headers.

Properties:

Name	Type	Description
index	number	the zero based absolute column index

Events

ojAnimateEnd

Triggered when the default animation of a particular action has ended. Note this event will not be triggered if application cancelled the default animation on animateStart. Row animations will only be triggered for rows in the current viewport and an event will be triggered for each cell in the animated row.

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
action	"add" | "remove" | "update"	the action that started the animation. See animation section for a list of actions.
element	Element	the target of animation. For row animations this will be the cell contents wrapped in a div.

Examples

Specify an ojAnimateEnd listener via the DOM attribute:

<oj-table on-oj-animate-end='[[listener]]'></oj-table>

Specify an ojAnimateEnd listener via the JavaScript property:

myTable.onOjAnimateEnd = listener;

Add an ojAnimateEnd listener via the addEventListener API:

myTable.addEventListener('ojAnimateEnd', listener);

ojAnimateStart

Triggered when the default animation of a particular action is about to start. The default animation can be cancelled by calling event.preventDefault. If the event listener calls event.preventDefault to cancel the default animation, it must call the event.detail.endCallback function when it finishes its own animation handling. Row animations will only be triggered for rows in the current viewport and an event will be triggered for each cell in the animated row.

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
action	"add" | "remove" | "update"	the action that starts the animation. See animation section for a list of actions.
element	Element	the target of animation. For row animations this will be the cell contents wrapped in a div.
endCallback	function():void	if the event listener calls event.preventDefault to cancel the default animation, it must call the endCallback function when it finishes its own animation handling and when any custom animation ends.

Examples

Specify an ojAnimateStart listener via the DOM attribute:

<oj-table on-oj-animate-start='[[listener]]'></oj-table>

Specify an ojAnimateStart listener via the JavaScript property:

myTable.onOjAnimateStart = listener;

Add an ojAnimateStart listener via the addEventListener API:

myTable.addEventListener('ojAnimateStart', listener);

ojBeforeCurrentRow

Triggered before the current row is changed via the currentRow property or via the UI.

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
currentRow	oj.ojTable.CurrentRow.<K>	the new current row
previousCurrentRow	oj.ojTable.CurrentRow.<K>	the previous current row

Examples

Specify an ojBeforeCurrentRow listener via the DOM attribute:

<oj-table on-oj-before-current-row='[[listener]]'></oj-table>

Specify an ojBeforeCurrentRow listener via the JavaScript property:

myTable.onOjBeforeCurrentRow = listener;

Add an ojBeforeCurrentRow listener via the addEventListener API:

myTable.addEventListener('ojBeforeCurrentRow', listener);

ojBeforeRowEdit

Triggered before the table is going to enter edit mode. To prevent editing the row, call event.preventDefault() in the listener.

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
rowContext	Object	the rowContext of the row that editing is going to be performed on.

Examples

Specify an ojBeforeRowEdit listener via the DOM attribute:

<oj-table on-oj-before-row-edit='[[listener]]'></oj-table>

Specify an ojBeforeRowEdit listener via the JavaScript property:

myTable.onOjBeforeRowEdit = listener;

Add an ojBeforeRowEdit listener via the addEventListener API:

myTable.addEventListener('ojBeforeRowEdit', listener);

ojBeforeRowEditEnd

Triggered before the table is going to exit edit mode. To prevent exit editing, call event.preventDefault() in the listener. There is a provided beforeRowEditEnd function, oj.DataCollectionEditUtils.basicHandleRowEditEnd, which can be specified. This function will handle canceling edits as well as invoking validation on input elements.

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
rowContext	Object	the rowContext of the row that editing is going to be performed on.
cancelEdit	Object	true if the edit should be negated based on actions (i.e. escape key).

Examples

Specify an ojBeforeRowEditEnd listener via the DOM attribute:

<oj-table on-oj-before-row-edit-end='[[listener]]'></oj-table>

Specify an ojBeforeRowEditEnd listener via the JavaScript property:

myTable.onOjBeforeRowEditEnd = listener;

Add an ojBeforeRowEditEnd listener via the addEventListener API:

myTable.addEventListener('ojBeforeRowEditEnd', listener);

ojSort

Triggered when a sort is performed on the table

Properties:

All of the event payloads listed below can be found under event.detail.

Name	Type	Description
header	Element	the key of the header which was sorted on
direction	'ascending' | 'descending'	the direction of the sort

Examples

Specify an ojSort listener via the DOM attribute:

<oj-table on-oj-sort='[[listener]]'></oj-table>

Specify an ojSort listener via the JavaScript property:

myTable.onOjSort = listener;

Add an ojSort listener via the addEventListener API:

myTable.addEventListener('ojSort', listener);

Methods

getContextByNode(node) → {Object|null}

Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.

Parameters:

Name	Type	Argument	Description
node	Element	<not nullable>	The child DOM node

Returns:

The context for the DOM node, or null when none is found.

Type

Object | null

Example

// Returns {'subId': 'oj-some-sub-id', 'componentSpecificProperty': someValue, ...}
var context = myComponent.getContextByNode(nodeInsideElement);

getDataForVisibleRow(rowIndex) → {Object|null}

Return the row data for a rendered row in the table.

Parameters:

Name	Type	Description
rowIndex	number	row index

Returns:

a compound object which has the structure below. If the row has not been rendered, returns null.

data	The raw row data
index	The index for the row
key	The key value for the row

Type

Object | null

Example

Invoke the getDataForVisibleRow method:

myTable.getDataForVisibleRow(2);

getProperty(property) → {any}

Retrieves a value for a property or a single subproperty for complex properties.

Parameters:

Name	Type	Description
property	string	The property name to get. Supports dot notation for subproperty access.

Since:

• 4.0.0

Returns:

Type

any

Example

Get a single subproperty of a complex property:

var subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh() → {void}

Refresh the table.

Returns:

Type

void

Example

Invoke the refresh method:

myTable.refresh();

refreshRow(rowIdx) → {Promise.<boolean>}

Refresh a row in the table.

Parameters:

Name	Type	Description
rowIdx	number	Index of the row to refresh.

Throws:

Type

Error

Returns:

Promise resolves when done to true if refreshed, false if not

Type

Promise.<boolean>

Example

Invoke the refreshRow method:

myTable.refreshRow(1);

setProperties(properties) → {void}

Performs a batch set of properties.

Parameters:

Name	Type	Description
properties	Object	An object containing the property and value pairs to set.

Since:

• 4.0.0

Returns:

Type

void

Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) → {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.

Parameters:

Name	Type	Description
property	string	The property name to set. Supports dot notation for subproperty access.
value	any	The new value to set the property to.

Since:

• 4.0.0

Returns:

Type

void

Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");

Type Definitions

ColumnSelectionEnd

end of one column selection, can be on index or key or both.

ColumnSelectionStart

start of one column selection, can be on index or key or both.

ColumnsRendererContext

context for columns.renderer callback function.

Properties:

Name	Type	Description
cellContext	Object	context of the cell containing properties Properties Name Type Description datasource oj.DataProvider.<K, D> | null The "data" attribute of the Table mode "edit" | "navigation" The mode of the row. It can be "edit" or "navigation". status oj.ojTable.ContextStatus.<K> Contains the rowIndex, rowKey, and currentRow
columnIndex	number	The column index
componentElement	Element	A reference to the Table root element
data	D	The cell data.
parentElement	Element	Empty rendered	element
row	Object	Key/value pairs of the row

ContextStatus

Properties:

Name	Type	Description
rowIndex	number	index of the row
rowKey	K	key of the row
currentRow	oj.ojTable.CurrentRow.<K>	current row.

CurrentRow

Table's current row can be on index and/or key value, when both are specified, the index is used as a hint.

DragRowContext

Context for table DnD on Rows

Properties:

Name	Type	Description
rows	Array.<Object>	An array of objects, with each object representing the data of one selected row in the structure below Properties Name Type Description data D The raw row data index number The index for the row key K The key value for the row

DropColumnContext

Properties:

Name	Type	Description
columnIndex	number	The index for the column

DropRowContext

Properties:

Name	Type	Description
rowIndex	number	The index for the row

FooterRendererContext

Properties:

Name	Type	Description
columnIndex	number	The column index
componentElement	Element	A reference to the Table root element
footerContext	Object	Context of the footer Properties Name Type Description datasource oj.DataProvider.<K, D> | null The "data" attribute of the Table
parentElement	Element	Empty rendered	element

HeaderRendererContext

Properties:

Name	Type	Description
columnIndex	number	The column index
columnHeaderDefaultRenderer	function(Object, function(object):void):void	If the column is not sortable then this function will be included in the context. The options parameter specifies the options (future use) for the renderer while the delegateRenderer parameter specifies the function which the developer would like to be called during rendering of the column header.
columnHeaderSortableIconRenderer	function(Object, function(Object):void):void	If the column is sortable then this function will be included in the context. The options parameter specifies the options (future use) for the renderer while the delegateRenderer parameter specifies the function which the developer would like to be called during rendering of the sortable column header. Calling the columnHeaderSortableIconRenderer function enables rendering custom header content while also preserving the sort icons.
componentElement	Element	A reference to the Table root element
data	string	The header text for the column
headerContext	Object	context for the header Properties Name Type Description datasource oj.DataProvider.<K, D> | null The "data" attribute of the Table
parentElement	Element	Empty rendered TH element

RowRendererContext

context object used by rowRenderer callback.

Properties:

Name	Type	Description
componentElement	Element	A reference to the Table root element
data	any	Key/value pairs of the row
parentElement	Element	Empty rendered TR element
rowContext	Object	contex of the row Properties Name Type Description datasource oj.DataProvider.<K, D> | null The "data" attribute of the Table mode "edit" | "navigation" The mode of the row. It can be "edit" or "navigation". status oj.ojTable.ContextStatus.<K> Contains the rowIndex, rowKey, and currentRow

RowSelectionEnd

end of one row selection, can be on index or key or both.

RowSelectionStart

start of one row selection, can be on index or key or both.