Element: <oj-table>

Oracle® JavaScript Extension Toolkit (JET)
6.2.0

F13996-01

QuickNav

Attributes


Context Objects

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.


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

Version:
  • 6.2.0
Since:
  • 0.6
Module:
  • ojtable

JET Table

Description:

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


<oj-table
  aria-label="Departments Table"
  data='{{datasource}}'
  columns='[{"headerText": "Department Id", "field": "DepartmentId"},
            {"headerText": "Department Name", "field": "DepartmentName"},
            {"headerText": "Location Id", "field": "LocationId"},
            {"headerText": "Manager Id", "field": "ManagerId"}]' >
</oj-table>

Touch End User Information

Target Gesture Action
Cell Tap Focus on the row. If selectionMode for rows is enabled, selects the row as well. If multiple selection is enabled the selection handles will appear. Tapping a different row will deselect the previous selection.
Press & Hold Display context menu
Column Header Tap Focus on the header. If selectionMode for columns is enabled, selects the column as well.
Press & Hold Display context menu

Keyboard End User Information

Target Key Action
Cell Tab The first Tab into the Table moves focus to the first column header. The second Tab moves focus to the next focusable element outside of the Table.
If focus is on a row and the row is actionable then Tab moves focus to the next focusable element within the row. If focus is already on the last focusable element then focus will wrap to the first focusable element in the row.
If editMode is rowEdit, please see the section 'Cell in EditableRow'.
Shift+Tab The first Shift+Tab into the Table moves focus to the first column header. The second Shift+Tab moves focus to the previous focusable element outside of the Table.
If focus is on a row and the row is actionable then Shift+Tab moves focus to the previous focusable element within the row. If focus is already on the first focusable element then focus will wrap to the last focusable element in the row.
If editMode is rowEdit, please see the section 'Cell in EditableRow'.
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.
Enter If the table editMode is rowEdit then make the current row editable.
If the table editMode is none then toggle the current row to actionable mode if there exists a tabbable element in the row. Once toggled to actionable mode, focus will be moved to be first tabbable element in the row.
F2 If the table editMode is none then toggle the current row to actionable mode if there exists a tabbable element in the row. Once toggled to actionable mode, focus will be moved to be first tabbable element in the row.
If the table editMode is rowEdit then toggle the current row between editable and readonly.
Cell in Editable Row Tab Move focus to next editable cell or focusable element in the row.
If focus is on the last editable cell or focusable element in the row, make the next row editable and move focus to the first editable cell or focusable element in the next row.
If focus is on the last editable cell or focusable element in the last row, move focus to next focusable element on the page (outside table).
Shift+Tab Move focus to previous editable cell or focusable element in the row.
If focus is on the first editable cell or focusable element in the row, make the previous row editable and move focus to the last editable cell or focusable element in the previous row.
If focus is on the first editable cell or focusable element in the first row, move focus to previous focusable element on the page (outside table).
DownArrow Handled in the editable cell.
Shift+DownArrow Handled in the editable cell.
UpArrow Handled in the editable cell.
Shift+UpArrow Handled in the editable cell.
LeftArrow Handled in the editable cell.
RightArrow Handled by the editable cell.
Home Handled in the editable cell.
End Handled in the editable cell.
Space Handled in the editable cell.
Enter Make the next row editable and move focus to the editable cell in current column in the next row.
If last row is editable then make it readonly.
Shift+Enter Make the previous row editable and move focus to the editable cell in current column in the previous row.
If first row is editable then make it readonly.
F2 Toggle the current row between editable and readonly.
Esc Make the current row readonly.
Column Header 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.

Accessibility

Developers should always either specify the aria-label attribute or use other alternatives for the table element to conform to accessibility guidelines.

Styling

The following CSS classes can be applied by the page author as needed.

Class Description
oj-table-data-cell-no-padding

Used to style a table cell so that it has no padding. An app developer would likely use this in the case of editable tables when an editable cell content does not need the default cell padding.

The class is applied as follows:

  • The class must be applied to the table cell.
oj-table-data-cell-padding

Used to style a table cell so that it has the default padding. An app developer would likely use this in the case of editable tables when an editable cell content needs to maintain default cell padding.

The class is applied as follows:

  • The class must be applied to the table cell.
oj-table-hide-vertical-scrollbar

Used to explicitly hide the vertical scrollbar when the table body is scrollable.

The class is applied as follows:

  • The class must be applied to the oj-table custom element.

Performance

Data Set Size

As a rule of thumb, it's recommended that applications limit the amount of data to display. Displaying large numbers of items in Table makes it hard for users to find what they are looking for, but affects the rendering performance as well. If displaying large numbers of items is neccessary, consider use a paging control with Table to limit the number of items to display at a time. Also consider setting scrollPolicy to 'loadMoreOnScroll' to enable high-water mark scrolling to reduce the number of items to display initially .

Cell Content

Table allows developers to specify arbitrary content inside its cells. In order to minimize any negative effect on performance, you should avoid putting a large number of heavy-weight components inside a cell because as you add more complexity to the structure, the effect will be multiplied because there can be many items in the Table.

Animation

Applications can customize animations triggered by actions in Table by either listening for animateStart/animateEnd events or overriding action specific style classes on the animated item. To disable animations for specific table, please call event.preventDefault() from your listener. To disable animations for all tables, the sass variable values can be modified to specify empty effects. See the documentation of oj.AnimationUtils class for details.

The following are actions and their corresponding sass variables in which applications can use to customize animation effects.

Action Sass Variable Description
add $tableAddAnimation When a new row is added to the oj.TableDataSource associated with Table.
remove $tableRemoveAnimation When an existing row is removed from the oj.TableDataSource associated with Table.
update $tableUpdateAnimation When an existing row is updated in the oj.TableDataSource associated with Table.

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

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 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|null

Accessibility attributes.
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.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.
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.

Default Value:
  • null
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:
    dataThe raw row data
    indexThe index for the row
    keyThe 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
Names
Item Name
Property dnd.drag.rows

dnd.drop :Object

An object that describes drop functionlity.

See the dnd attribute for usage examples.

Default Value:
  • null
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.
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.
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

scroll-position :Object

The current scroll position of Table. The scroll position is updated when either the vertical or horizontal scroll position (or its scroller, as specified in scrollPolicyOptions.scroller) has changed. The value contains the x and y scroll position, the index and key information of the item closest to the top of the viewport, as well as horizontal and vertical offset from the position of the item to the actual scroll position.

The default value contains just the scroll position. Once data is fetched the row/column index and key sub-properties will be added. If there is no data then the row/column index and key sub-properties will not be available.

When setting the scrollPosition property, applications can change any combination of the sub-properties. If multiple sub-properties are set at once they will be used in key, index, pixel order where the latter serves as hints. If offsetX or offsetY are specified, they will be used to adjust the scroll position from the position where the key or index of the item is located.

If a sparse object is set the other sub-properties will be populated and updated once Table has scrolled to that position.

Also, if scrollPolicy is set to 'loadMoreOnScroll' and the scrollPosition is set to a value outside of the currently rendered region, then Table will attempt to fetch until the specified scrollPosition is satisfied or the end is reached (either at max count or there's no more items to fetch), in which case the scroll position will remain at the end. The only exception to this is when the row key specified does not exists and a DataProvider is specified for data, then the scroll position will not change (unless other sub-properties like row index or x/y are specified as well).

Lastly, when a re-rendered is triggered by a refresh event from the DataProvider, or if the value for data attribute has changed, then the scrollPosition will be adjusted such that the selection anchor (typically the last row selected by the user) prior to refresh will appear at the top of the viewport after refresh. If selection is disabled or if there are no selected rows, then the scrollPosition will remain at the top.

Properties:
Name Type Argument Description
x number <optional>
the horizontal position in pixel
y number <optional>
the vertical position in pixel
columnIndex number <optional>
the zero-based index of the cell at the origin of the table
rowIndex number <optional>
the zero-based index of the cell at the origin of the table. If scrollPolicy is set to 'loadMoreOnScroll and the row index is greater than maxCount set in scrollPolicyOptions, then it will scroll and fetch until the end of the table is reached and there are no more rows to fetch.
columnKey any <optional>
the key of the column. This corresponds to the identifier of the column specified in columns. If the column does not exists then the value is ignored.
rowKey any <optional>
the key of the row. If DataProvider is used for data and the key does not exists in the DataProvider, then the value is ignored. If DataProvider is not used then Table will fetch and scroll until the item is found or the end of the table is reached and there's no more items to fetch.
offsetX number <optional>
the horizontal offset in pixel relative to the column identified by columnKey/columnIndex.
offsetY number <optional>
the vertical offset in pixel relative to the row identified by rowKey/rowIndex.
Default Value:
  • {"x": 0, "y": 0}
Supports writeback:
  • true
Names
Item Name
Property scrollPosition
Property change event scrollPositionChanged
Property change listener attribute (must be of type function) on-scroll-position-changed
Examples

Initialize the Table with the scroll-position attribute specified:

<!-- Using dot notation -->
<oj-table scroll-position.row-index='10'></oj-table>

<!-- Using JSON notation -->
<oj-table scroll-position='{"rowIndex": 10}'></oj-table>

Get or set the scrollPosition property after initialization:

// Get one
var scrollPositionValue = myTable.scrollPosition.rowIndex;

// Set one, leaving the others intact
myTable.setProperty('scrollPosition.rowKey', 'row10key');

// Get all
var scrollPositionValues = myTable.scrollPosition;

// Set all.  Those not listed will be lost until the scroll completes and the remaining fields are populated.
myTable.scrollPosition = {x: 0, y: 150};

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.

Properties:
Name Type Description
subId string Sub-id string to identify a particular dom node.

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

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.

dataThe raw row data
indexThe index for the row
keyThe 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 Argument Description
columnIndex number The column index
columnHeaderDefaultRenderer function(Object, function(object):void):void <optional>
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 <optional>
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.