Class: ojTable

Oracle® Fusion Middleware Oracle JavaScript Extension Toolkit (JET)
12c (12.1.4)

E54107-01

QuickNav

oj. ojTable extends oj.baseComponent

Initializer

.ojTable()

The ojTable component enhances a HTML table element into one that supports all the features in JET Table.

Keyboard interaction

When existing focus is on a column header.
Key Use
Tab Navigate to next focusable element on page (outside table).
Shift+Tab Navigate to previous focusable element on page (outside table).
DownArrow Move focus to the first row.
UpArrow Do nothing.
LeftArrow Move focus to previous column header.
Shift+LeftArrow Select and move focus to previous column header.
RightArrow Move focus to next column header.
Shift+RightArrow Select and move focus to next column header.
Home Move focus to first column header.
End Move focus to last column header.
Space Select column.
When existing focus is on a row element.
Key Use
Tab Move focus to next focusable element in row.
If focus is on the last focusable element in the row, move focus to first focusable element in next row.
If focus is on the last focusable element in the last row, move focus to next focusable element on the page (outside table).
Shift+Tab Move focus to previous focusable element in row.
If focus is on the first focusable element in the row, move focus to last focusable element in previous row.
If focus is on the first focusable element in the first row, move focus to previous focusable element on the page (outside table).
DownArrow Move focus to the next row.
Shift+DownArrow Select and move focus to the next row.
UpArrow Move focus to the previous row. If at the first row then move to the column header.
Shift+UpArrow Select and move focus to the previous row.
LeftArrow Do nothing.
RightArrow Do nothing.
Home Move focus to first row.
End Move focus to last row.
Space Select row.

Support for knockout templates:

When knockout bindings are used, the following additional options are available to use knockout templates to customize JET Table.
  • columnTemplates

    An array of column templates. Each entry must contain the following parameters:
    columnId: Points to the column specified in the columns option with the referenced Id.
    type: Can be either 'cell' or 'header'.
    template: The name of the knockout template to use.

  • rowTemplate

    The name of the knockout template for each row to use.

Source:
Examples

Initialize the table via the JET ojComponent binding:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, columns:
     [{headerText: 'Department Id', field: 'DepartmentId'},
     {headerText: 'Department Name', field: 'DepartmentName'},
     {headerText: 'Location Id', field: 'LocationId'},
     {headerText: 'Manager Id', field: 'ManagerId'}]}">
     

Initialize the table with columnTemplates via the JET ojComponent binding:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, columns:
     [{headerText: 'Department Id', field: 'DepartmentId'},
     {headerText: 'Department Name', field: 'DepartmentName'},
     {headerText: 'Location Id', field: 'LocationId'},
     {headerText: 'Manager Id', field: 'ManagerId'}]},
     {id: 'column5'}],
     columnTemplates: [{columnId: 'column5', type: 'header', template: 'oracle_link_hdr'},
                       {columnId: 'column5', type: 'cell', template: 'oracle_link'}]}">
<script type="text/html" id="oracle_link_hdr">
   <th style="padding-left: 5px; padding-right: 5px;">
      Oracle Link
   </th>
</script>
<script type="text/html" id="oracle_link">
    <td>
        <a href="http://www.oracle.com">Oracle</a>
    </td>
</script>

Initialize the table with rowTemplate via the JET ojComponent binding:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, columns:
     [{headerText: 'Department Id', field: 'DepartmentId'},
     {headerText: 'Department Name', field: 'DepartmentName'},
     {headerText: 'Location Id', field: 'LocationId'},
     {headerText: 'Manager Id', field: 'ManagerId'}]},,
     rowTemplate: {template: 'row_tmpl'}}">
<script type="text/html" id="row_tmpl">
  <tr>
      <td data-bind="text: DepartmentId">
      </td>
      <td data-bind="text: DepartmentName">
      </td>
      <td data-bind="text: LocationId">
      </td>
      <td data-bind="text: ManagerId">
      </td>
  </tr>
</script>

Options

#accessibility

Accessibility options.

The following options are supported:

  • rowHeader: columnId
The td cells in the column specified by the rowHeader 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 screenReaders. By default the first column will be taken as the rowHeader.
Default Value:
  • null
Source:

#className

The CSS class to apply to the column cells
Default Value:
  • null
Source:

#className

The default CSS class for column cells
Default Value:
  • null
Source:

#columns

An array of column definitions.
Default Value:
  • null
Source:
Example

Initialize the table with the columns option specified:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, columns:
[{headerText: 'Department Id', field: 'DepartmentId'},
{headerText: 'Department Name', field: 'DepartmentName']}">

#columnsDefault

Default values to apply to all columns objects.
Default Value:
  • null
Source:
Example

Initialize the table with the columnsDefault option specified:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, columnsDefault: {headerStyle: 'text-align: left; white-space:nowrap;'}, columns:
[{headerText: 'Department Id', field: 'DepartmentId'},
{headerText: 'Department Name', field: 'DepartmentName']}">

#contextMenu :Object

JQ selector identifying the JET Menu that the component should launch as a context menu on right-click or Shift-F10. If specified, the browser's native context menu will be replaced by the specified JET Menu.

To specify a JET context menu on a DOM element that is not a JET component, see the ojContextMenu binding.

To make the page semantically accurate from the outset, applications are encouraged to specify the context menu via the standard HTML5 syntax shown in the below example. When the component is initialized, the context menu thus specified will be set on the component.

The JET Menu should be initialized before any component using it as a context menu.

Default Value:
  • null
Inherited From:
Source:
Examples

Initialize a JET component with a context menu:

// via recommended HTML5 syntax:
<div id="myComponent" contextmenu="myMenu" data-bind="ojComponent: { ... }>

// via JET initializer (less preferred) :
$( ".selector" ).ojFoo({ "contextMenu": "#myMenu" });

Get or set the contextMenu option, after initialization:

// getter
var menu = $( ".selector" ).ojFoo( "option", "contextMenu" );

// setter
$( ".selector" ).ojFoo( "option", "contextMenu", ".my-marker-class" );

Set a JET context menu on an ordinary HTML element:

<a href="#" id="myAnchor" contextmenu="myMenu" data-bind="ojContextMenu: {}">Some text

#data

The data to bind to the component.

Must be of type oj.TableDataSource oj.TableDataSource

Default Value:
  • null
Source:

#emptyText :String|null

The text to display when there are no data in the Table. If it is not defined, then a default empty text is extracted from the resource bundle.
Default Value:
  • "No data to display."
Source:
Example

Initialize the table with the emptyText option specified:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, emptyText: 'No data', columns:
[{headerText: 'Department Id', field: 'DepartmentId'},
{headerText: 'Department Name', field: 'DepartmentName']}">

#field

The data field this column refers to.
Default Value:
  • null
Source:

#field

The default data field for column.
Default Value:
  • null
Source:

#footerClassName

The CSS class to apply to the footer cell.
Default Value:
  • null
Source:

#footerClassName

The CSS class to apply to the footer cell.
Default Value:
  • null
Source:

#footerRenderer

The renderer function that renders the content of the footer. The function will be passed a context object which contains the following objects:
  • column: The column object
  • component: Instance of the component
  • datasource: Instance of the datasource used by the table
  • status: Contains the rowIndex, rowKey, and activeRow
  • parentElement: Empty rendered element
The function returns either a String or a DOM element of the content inside the footer. If the developer chooses to manipulate the footer element directly, the function should return nothing. If no renderer is specified, the Table will treat the footer data as a String.
Default Value:
  • null
Source:

#footerRenderer

The renderer function that renders the content of the footer. The function will be passed a context object which contains the following objects:
  • column: The column object
  • component: Instance of the component
  • datasource: Instance of the datasource used by the table
  • status: Contains the rowIndex, rowKey, and activeRow
  • parentElement: Empty rendered element
The function returns either a String or a DOM element of the content inside the footer. If the developer chooses to manipulate the footer element directly, the function should return nothing. If no renderer is specified, the Table will treat the footer data as a String.
Default Value:
  • null
Source:

#footerStyle

The CSS styling to apply to the footer cell.
Default Value:
  • null
Source:

#footerStyle

The CSS styling to apply to the footer cell.
Default Value:
  • null
Source:

#headerClassName

The CSS class to apply to the column header text.
Default Value:
  • null
Source:

#headerClassName

The default CSS class to apply to the column header text.
Default Value:
  • null
Source:

#headerRenderer

The renderer function that renders the content of the header. The function will be passed a context object which contains the following objects:
  • column: The column object
  • component: Instance of the component
  • parentElement: Empty rendered TH element
The function returns either a String or a DOM element of the content inside the header. If the developer chooses to manipulate the cell element directly, the function should return nothing. If no renderer is specified, the Table will treat the header data as a String.
Default Value:
  • null
Source:

#headerRenderer

The renderer function that renders the content of the header. The function will be passed a context object which contains the following objects:
  • column: The column object
  • component: Instance of the component
  • parentElement: Empty rendered TH element
The function returns either a String or a DOM element of the content inside the header. If the developer chooses to manipulate the cell element directly, the function should return nothing. If no renderer is specified, the Table will treat the header data as a String.
Default Value:
  • null
Source:

#headerStyle

The CSS styling to apply to the column header text.
Default Value:
  • null
Source:

#headerStyle

The default CSS styling to apply to the column header text.
Default Value:
  • null
Source:

#headerText

Text to display in the header of the column.
Default Value:
  • null
Source:

#headerText

Default text to display in the header of the column.
Default Value:
  • null
Source:

#horizontalGridVisible

Whether the horizontal gridlines are to be drawn.
Default Value:
  • "enabled"
Source:

#id

The identifier for the column
Default Value:
  • null
Source:

#renderer

The renderer function that renders the content of the cell. The function will be passed a context object which contains the following objects:
  • data: The cell data
  • column: The column object
  • component: Instance of the component
  • datasource: Instance of the datasource used by the table
  • row: Key/value pairs of the row
  • status: Contains the rowIndex, rowKey, and activeRow
  • parentElement: Empty rendered element
The function returns either a String or a DOM element of the content inside the header. If the developer chooses to manipulate the cell element directly, the function should return nothing. If no renderer is specified, the Table will treat the cell data as a String.
Default Value:
  • null
Source:

#renderer

The renderer function that renders the content of the cell. The function will be passed a context object which contains the following objects:
  • data: The cell data
  • column: The column object
  • component: Instance of the component
  • datasource: Instance of the datasource used by the table
  • row: Key/value pairs of the row
  • status: Contains the rowIndex, rowKey, and activeRow
  • parentElement: Empty rendered element
The function returns either a String or a DOM element of the content inside the header. If the developer chooses to manipulate the cell element directly, the function should return nothing. If no renderer is specified, the Table will treat the cell data as a String.
Default Value:
  • null
Source:

#rootAttributes :Object|undefined

Attributes specified here will be set on the component's root DOM element at creation time. This is particularly useful for components like Dialog that wrap themselves in a root element at creation time.

The specified class and style are appended to the current class and style, respectively. All other attributes overwrite any existing value.

Setting this option after component creation has no effect.

Default Value:
  • undefined
Inherited From:
Source:
Example

Initialize a JET component, specifying a set of attributes to be set on the component's root DOM element:

$( ".selector" ).ojFoo({ "rootAttributes": {
  'id': 'myId', 
  'style': 'max-width:100%; color:blue;', 
  'class': 'my-class'
}});

#rowRenderer

The row renderer function to use.

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

  • component: Instance of the component
  • row: Key/value pairs of the row
  • status: Contains the rowIndex, rowKey, and activeRow
  • parentElement: Empty rendered TR element
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
Source:

#selectionMode

The row and column selection modes. Both can be either single or multiple.
Default Value:
  • null
Source:
Example

Initialize the table with the selectionMode option specified:

<table id="table" data-bind="ojComponent: {component: 'ojTable', data: datasource, selectionMode: {row: 'multiple', column: 'multiple'}, columns:
[{headerText: 'Department Id', field: 'DepartmentId'},
{headerText: 'Department Name', field: 'DepartmentName']}">

#sortable

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 "none" will disable sorting on the column.

Default Value:
  • "auto"
Source:

#sortable

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 "none" will disable sorting on the column.

Default Value:
  • "auto"
Source:

#sortProperty

This is the property that the framework uses to sort the Table's data.
Default Value:
  • null
Source:

#sortProperty

Default property that the framework uses to sort the Table's data.
Default Value:
  • null
Source:

#style

The CSS styling to apply to the column cells
Default Value:
  • null
Source:

#style

Default CSS styling to apply to the column cells
Default Value:
  • null
Source:

#verticalGridVisible

Whether the vertical gridlines are to be drawn.
Default Value:
  • "enabled"
Source:

Events

#activeRow

Triggered when the active row is changed via the activeRow() method or via the UI.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
newRowIndex number the new row index of the active row
oldRowIndex number the old row index of the active row
Source:
Examples

Initialize the table with the activeRow callback specified:

$( ".selector" ).ojTable({
    "activeRow": function( event, data ) {}
});

Bind an event listener to the ojactiverow event:

$( ".selector" ).on( "ojactiverow", function( event, data ) {} );

#preActiveRow

Triggered before the active row is changed via the activeRow() method or via the UI.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
newRowIndex number the new row index of the active row
oldRowIndex number the old row index of the active row
Source:
Examples

Initialize the table with the preActiveRow callback specified:

$( ".selector" ).ojTable({
    "preActiveRow": function( event, data ) {}
});

Bind an event listener to the ojpreactiverow event:

$( ".selector" ).on( "ojpreactiverow", function( event, data ) {} );

#scroll

Triggered when the table scrollbars are scrolled via the scrollTop() method or via the UI.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
scrollLeft number the scrollLeft value in px
scrollTop number the scrollTop value in px
Source:
Examples

Initialize the table with the scroll callback specified:

$( ".selector" ).ojTable({
    "scroll": function( event, data ) {}
});

Bind an event listener to the ojscroll event:

$( ".selector" ).on( "ojscroll", function( event, data ) {} );

#select

Triggered when selection is changed via the selection() method or via the UI.
Properties:
Name Type Description
event Event jQuery event object
ui Object Parameters
Properties
Name Type Description
selection Array the table selection object
Source:
Examples

Initialize the table with the select callback specified:

$( ".selector" ).ojTable({
    "select": function( event, data ) {}
});

Bind an event listener to the ojselect event:

$( ".selector" ).on( "ojselect", function( event, data ) {} );

Methods

#activeRow(index) → {number}

Get or update the active row. If called with no arguments then returns the current active row index. If called iwth -1 then resets the activeRow. If selection argument is specified then sets the active row. A preactiverow event is fired before the active row is changed,. If that event results in an error then the actove row will not be changed.
Parameters:
Name Type Description
index number Row index.
Source:
Throws:
Type
Error
Returns:
Index of active row or -1 if no active row.
Type
number
Example

Invoke the activeRow method:

$( ".selector" ).ojTable( "activeRow", 1 );

#columnMetaData(columnIdx) → {Object|null}

Get the column metadata
Parameters:
Name Type Description
columnIdx number Column index of the column. Null returns all columns
Source:
Returns:
Column metadata or null if not found
Type
Object | null
Example

Invoke the columnMetaData method:

$( ".selector" ).ojTable( "columnMetaData", "columnId1" );

#getNodeBySubId(locator) → {Element|null}

Return the subcomponent node represented by the documented locator attribute values.
Parameters:
Name Type Description
locator Object An Object containing at minimum a subId property whose value is a string, documented by the component, that allows the component to look up the subcomponent associated with that string. It contains:

component: optional component name - in the future there may be more than one component contained within a page element

subId: the string, documented by the component, that the component expects in getNodeBySubId to locate a particular subcomponent.

Inherited From:
Source:
Returns:
the subcomponent located by the subId string passed in locator, if found.
Type
Element | null

#getSubIdByNode(node) → {string|null}

Return the subId string for the given child DOM node
Parameters:
Name Type Description
node Element child DOM node
Inherited From:
Source:
Returns:
- the subId for the DOM node or null when none is found
Type
string | null

#option(optionName, value) → {Object|undefined}

This method has several overloads, which gets and set component options.

The first overload accepts a single optionName param as a string, and returns the current value of that option.

The second overload accepts two params, an optionName string and a new value to which that option will be set.

The third overload accepts no params, and returns a map of key/value pairs representing all the component options and their values.

The fourth overload accepts a single map of option-value pairs to set on the component.

Parameters:
Name Type Argument Description
optionName string | Object <optional>
the option name (string, first two overloads), or the map (Object, last overload). Omitted in the third overload.
value Object <optional>
a value to set for the option. Second overload only.
Inherited From:
Source:
Returns:
The getter overloads return the retrieved value(s). When called via the public jQuery syntax, the setter overloads return the object on which they were called, to facilitate method chaining.
Type
Object | undefined
Examples

First overload: get one option:

var isDisabled = $( ".selector" ).ojFoo( "option", "disabled" ); // Foo is Button, Menu, etc.

Second overload: set one option:

$( ".selector" ).ojFoo( "option", "disabled", true ); // Foo is Button, Menu, etc.

Third overload: get all options:

var options = $( ".selector" ).ojFoo( "option" ); // Foo is Button, Menu, etc.

Fourth overload: set one or more options:

$( ".selector" ).ojFoo( "option", { disabled: true } ); // Foo is Button, Menu, etc.

#refresh()

Refresh the table.
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Example

Invoke the refresh method:

$( ".selector" ).ojTable( "refresh" );

#refreshRow(rowIdx) → {boolean}

Refresh a row in the table.
Parameters:
Name Type Description
rowIdx number Index of the row to refresh.
Source:
Throws:
Type
Error
Returns:
true if refreshed, false if not
Type
boolean
Example

Invoke the refreshRow method:

$( ".selector" ).ojTable( "refreshRow", 1 );

#scrollLeft(value) → {number|null}

Get or update scroll left position.
Parameters:
Name Type Description
value number ScrollLeft value.
Source:
Returns:
ScrollLeft value.
Type
number | null
Example

Invoke the scrollLeft method:

$( ".selector" ).ojTable( "scrollLeft", 100 );

#scrollTop(value) → {number|null}

Get or update scroll top position.
Parameters:
Name Type Description
value number ScrollTop value.
Source:
Returns:
ScrollTop value.
Type
number | null
Example

Invoke the scrollTop method:

$( ".selector" ).ojTable( "scrollTop", 100 );

#selection(selection) → {Array|null}

Get or update the table selection. If called with no arguments then returns the current selection which is an Array of ranges. Ranges consist of start and end objects which contain row and column indexes. If selection argument is specified then sets the selection.
Parameters:
Name Type Description
selection Array Array of range objects.
Source:
Returns:
array of Range objects or null if no selection
Type
Array | null
Example

Invoke the selection method:

$( ".selector" ).ojTable( "selection", mySelection );

Non-public Methods

Note: Extending JET components is not currently supported. Thus, non-public methods are for internal use only.

<protected> #_AfterCreate()

This method is called after _ComponentCreate. The JET base component does tasks here that must happen after the component (subclass) has created itself in its override of _ComponentCreate. Notably, the base component handles the rootAttributes and contextMenu options here, since those options operate on the component root node, which for some components is created in their override of _ComponentCreate.

Subclasses should override this method only if they have tasks that must happen after a superclass's implementation of this method, e.g. tasks that must happen after the context menu is set on the component.

Overrides of this method should call this._super first.

Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_ComponentCreate()

Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_GetReadingDirection() → {string}

Determines whether the component is LTR or RTL.

Component responsibilities:

  • All components must determine directionality exclusively by calling this protected superclass method. (So that any future updates to the logic can be made in this one place.)
  • Components that need to know the directionality must call this method from _create() and refresh(), and cache the value.
  • Components should not call this at other times, and should instead use the cached value. (This avoids constant DOM queries, and avoids any future issues if directional islands and component reparenting (e.g. popups) should coexist.)

App responsibilities:

  • The app specifies directionality by setting the HTML "dir" attribute on the <html> node. When omitted, the default is "ltr". (Per-component directionality / directional islands are not currently supported due to inadequate CSS support.)
  • As with any DOM change, the app must refresh() the component if the directionality changes dynamically. (This provides a hook for component housekeeping, and allows caching.)
Default Value:
  • "ltr"
Inherited From:
Source:
Returns:
the reading direction, either "ltr" or "rtl"
Type
string

<protected> #_GetSavedAttributes(element) → {Object}

Gets the saved attributes for the provided element. This is usually the original list of attributes set on the element.
Parameters:
Name Type Description
element Object jQuery selection, should be a single entry
Inherited From:
Source:
Returns:
savedAttributes - attributes that were saved for this element.
Type
Object

<protected> #_InitOptions()

This method is called before _ComponentCreate, at which point the component has not yet been rendered. Component options should be initialized in this method, so that their final values are in place when _ComponentCreate is called.

This includes getting option values from the DOM, where applicable, and coercing option values (however derived) to their appropriate data type. No other work should be done in this method. See below for details.

Overrides of this method should call this._super first.

Usage:

  • If the component has an option like disabled that can be set from the DOM at create time, then the "get from DOM" logic should live in this method. E.g. a typical override might say "if the disabled option still has its initial value of undefined (i.e., the option has not been set), then get the DOM property and set it on the option." (See also next bullet.)
  • For attributes that live on the component's root node, keep in mind that anything specified via the rootAttributes option will not be placed on the DOM until _AfterCreate. So when getting attributes from the root node, components must first look in the rootAttributes option, and then, only if the attribute is not found there, look on the component root (if it already exists).
  • For options that, unlike disabled, have no corresponding DOM property, and are not otherwise set from the DOM, there is nothing to do in this method.
  • Do NOT set anything on the DOM in this method (like the resolved disabled value, or any rootAttributes values). The resolved option values should be set on the DOM later, in _ComponentCreate, and the rootAttributes values are set in baseComponent._AfterCreate.
Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_RestoreAttributes()

Restores the saved element's attributes
Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_SaveAttributes(element)

Saves the element's attributes within an internal variable to be reset during the destroy function The JSON variable will be held as : [ { "element" : element[i], "attributes" : { attributes[m]["name"] : {"attr": attributes[m]["value"], "prop": $(element[i]).prop(attributes[m]["name"]) } } ]
Parameters:
Name Type Description
element Object jQuery selection to save attributes for
Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.

<protected> #_SetRootAttributes()

Reads the rootAttributes option, and sets the root attributes on the component's root DOM element.

class and style are appended to the current class and style, respectively. All other attributes overwrite any existing value.

Inherited From:
Source:
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.