Element: <oj-table>

Oracle® JavaScript Extension Toolkit (JET)
16.1.0
F92237-01

Since:
  • 0.6.0
Module:
  • ojtable

QuickNav

Slots

Attributes


Context Objects

Events

Methods

Type Definitions

Other Topics


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.
Shift+F10 Display context menu.
Ctrl+DownArrow Move focus to the column footer.
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.
Ctrl+UpArrow Move focus to the column header.
LeftArrow Move accessibility focus to the cell to the left (only applies when using a screen reader).
RightArrow Move accessibility focus to the cell to the right (only applies when using a screen reader).
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 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.
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.
Ctrl+DownArrow Handled in the editable cell.
UpArrow Handled in the editable cell.
Shift+UpArrow Handled in the editable cell.
Ctrl+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 Focus the next editable cell in the current column of the next editable 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 Handled in the editable cell.
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).
Shift+F10 Display context menu.
DownArrow Move focus to the first row.
Ctrl+DownArrow Move focus to the column footer.
UpArrow Do nothing.
Ctrl+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.
Enter Toggle the sort order of the column if the column is sortable.
Space Select column.
F2 Toggle the column header region to actionable mode if there exists a tabbable element in the region. Once toggled to actionable mode, focus will be moved to be first tabbable element in the region.
Esc Exit actionable mode.
Column Footer Tab Navigate to next focusable element on page (outside table).
Shift+Tab Navigate to previous focusable element on page (outside table).
Shift+F10 Display context menu.
DownArrow Do nothing.
Ctrl+DownArrow Do nothing.
UpArrow Move focus to the last row.
Ctrl+UpArrow Move focus to the column header.
LeftArrow Move focus to previous column footer.
Shift+LeftArrow Select and move focus to previous column footer.
RightArrow Move focus to next column footer.
Shift+RightArrow Select and move focus to next column footer.
Home Move focus to first column footer.
End Move focus to last column footer.
Space Select column.
F2 Toggle the column footer region to actionable mode if there exists a tabbable element in the region. Once toggled to actionable mode, focus will be moved to be first tabbable element in the region.
Esc Exit actionable mode.

Accessibility

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

Nesting collection components such as ListView, Table, TreeView, and Table inside of Table is not supported.

To facilitate drag and drop including row reordering using only keyboard, application must ensure that either to expose the functionality using context menu, and/or allow users to perform the functionality with the appropriate keystroke. You can find examples of how this can be done in the cookbook demos.

Hiding Column headers is not supported by table to avoid accessibility issues.

Custom Colours

Using colors, including background and text colors, is not accessible if it is the only way information is conveyed. Low vision users may not be able to see the different colors, and in high contrast mode the colors are removed. The Redwood approved way to show status is to use badge.

Performance

Data Set Size

As a rule of thumb, it's recommended that applications limit the amount of data displayed in a Table. Displaying a large number of items in a Table makes it hard for users to find what they are looking for, and affects the rendering performance as well. If displaying a large number of items is necessary, consider using a search control with the Table. This will allow the user to filter data and display only the rows desired. Also consider setting scrollPolicy to 'loadMoreOnScroll' to enable high-water mark scrolling to reduce the number of items to display initially.

Cell Content

The 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.

label-hint/label-edge are expected as attributes when oj-input-text is used for accessibility purpose in oj-form-layout. Since oj-table itself handles accessibility for cell content, user does not need to add attributes label-hint/label-edge when oj-input-text is used. But for read-only texts, it is a best practice to avoid using oj-input-text, prefer oj-bind-text or plain html instead.

Layout Attribute

The Table's layout attribute can have a significant effect on rendering performance. When set to contents (the default value), the Table's initial column widths are determined by the size of its rendered contents. Although this ensures column widths are appropriately sized in most cases, this convenience can lead to long initial render times depending on the number of rows and columns. When set to fixed, the Table's column widths are determined using the specified columns[].weight values. This is much more performant when rendering large numbers of columns and rows in the Table.

Sizing Behavior

Flex Layouts

By default, the Table does not support being rendered within flex layouts that specify a flex-basis value that is dependent on content sizes. To ensure that the Table renders correctly, applications should specify a real flex-basis value on any flex layouts containing a Table. If that is not possible, applications may choose to use the oj-table-stretch style class on the Table. This should enable the Table to render correctly within any flex layout, but requires that the Table's outer size is set to a non-auto value in the non-flex direction. For example, for a horizontal flex layout, the application must specify a height on the Table (400px, 50vh, etc.). For a vertical flex-layout, the application must specify a width on the Table (400px, 100%, etc.). A max-height or max-width is not sufficient.

Animation

Applications can customize animations triggered by actions in Table by overriding action specific style classes on the animated item. To disable animations for all tables, the CSS variable values can be modified to specify empty effects. See the documentation of AnimationUtils class for details.

The following are actions in which applications can use to customize animation effects.

Action Description
add When a new row is added to the TableDataSource associated with Table.
remove When an existing row is removed from the TableDataSource associated with Table.
update When an existing row is updated in the TableDataSource associated with Table.

Background Color

Depending on the Theme, the Table may have a solid default background color. If a different background color is desired, it can be changed by adding a background color class on the Table. See table background color demo for examples.

Context Menu

The Table has a context menu for accessibly performing operations such as column resize and sort. When defining a context menu, Table allows the app to use the built-in behavior for operations such as column resize and sort by specifying menu list items as follows. 


    <oj-option data-oj-command="oj-table-['commandname']"></oj-option>

The supported commands:

Default Function data-oj-command value
Resize Column oj-table-resize
Sort Ascending oj-table-sortAsc
Sort Descending oj-table-sortDsc

Custom Data Attributes

Table supports the following custom data attributes.

Name Description Example
data-oj-as Provides an alias for a specific template instance and has the same subproperties as the $current variable. 
<oj-table id="table">
  <template slot="cellTemplate" data-oj-as="cell">
  </template>
</oj-table>
data-oj-clickthrough

Specify on any element inside a cell where you want to control whether the Table should perform actions triggered by a click event originating from the element or one of its descendants.

For example, if you specify this attribute with a value of "disabled" on a button inside a cell, then the Table will not select or set the corresponding row as current when a user clicks on the button.

 
<oj-table id="table">
  <template slot="cellTemplate">
    <oj-button data-oj-clickthrough="disabled"></oj-button
  </template>
</oj-table>


Usage

Signature:

interface TableElement<K, D>

Generic Parameters
ParameterDescription
KType of key of the dataprovider
DType of data from the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { TableElement } from "ojs/ojtable";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojtable";

For additional information visit:

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.


Styling Classes

.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.
Example
<oj-table id="tableId" class='oj-table-data-cell-no-padding'>
</oj-table>
.oj-table-data-cell-padding
Used to style a table cell so that it has default 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.
Example
<oj-table id="tableId" class='oj-table-data-cell-padding'>
</oj-table>
.oj-table-hide-vertical-scrollbar
Used to explicitly hide the vertical scrollbar when the table body is scrollable.
An app developer would likely use this when synchronizing the vertical scrolling of the Table with another component, such as a Gantt chart. The class is applied as follows:

The class must be applied to the oj-table custom element.
Example
<oj-table id="tableId" class='oj-table-hide-vertical-scrollbar'>
</oj-table>
.oj-table-stretch

Note: This styleclass is not supported in the following themes: Alta

Used to notify the Table that it should stretch its inner contents to fill all available horizontal and vertical space. This requires that the Table's outer dimensions are controlled externally, either by its containing layout or by height and width values being set on it.
An app developer would likely use this when rendering a Table within a flex layout that specifies a content-based flex-basis value. The class is applied as follows:

The class must be applied to the oj-table custom element.
Example
<oj-table id="tableId" class='oj-table-stretch'>
</oj-table>

CSS Variables

See JET CSS Variables for additional details.
Table cell padding CSS
Name Type Description
--oj-table-cell-padding-horizontal <length> Table horizontal cell padding

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.

addRowCellTemplate

Named slot used to render add new row at the top of the table. The slot content must be a <template> element. The content of the template should not include the <td> element, only what's inside it.

Properties of $current:
Name Type Argument Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
submitAddRow function(boolean):void <optional>
 This function can be used to programatically submit or cancel row. Should pass true while canceling submit.

addRowTemplate

Named slot used to render add new row at the top of the table. The slot content must be a <template> element. The content of the template can include the <tr> element or the child of the <tr> element.

If using an addRowTemplate to configure the display of rows, the Table will handle any change in column reordering due to a dnd operation internally. Any application logic behind addRowTemplate definitions should not dynamically respond to 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes in logic needed for the addRowTemplate definitions must be handled by the application.

When providing inline template content that includes table-specific markup such as <tr> or <td> elements, applications are responsible for ensuring that the content provided is valid HTML. For example, providing an <oj-bind-if> element as the child of a <tr> is not valid HTML, and will not function as intended. To enable this type of dynamic template functionality, the entire Table can be defined within an <oj-module>, or an <oj-bind-dom> element can be provided as the child of an inline template.

Properties of $current:
Name Type Argument Description
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
submitAddRow function(boolean):void <optional>
 This function can be used to programatically submit or cancel row. Should pass true while canceling submit.

bottom

Named slot for the Table's bottom panel where applications can add content such as a paging control. The Table will render the content provided at the bottom of the Table element. The content specified should not include any styling that may conflict with the Table's positioning. Unsupported styling includes, but is not limited to, margins and absolute positioning.

Deprecated:
Since Description
13.0.0 This is an anti-pattern. Please use high-water mark scrolling and page layouts instead.

cellTemplate

Named slot for the Table's default cell template. The slot content must be a <template> element. The content of the template should not include the <td> element, only what's inside it.

If the value of any column's template, headerTemplate, or footerTemplate property conflicts with this named slot, this slot will only be used for that column. Similarly, if a value is supplied for the deprecated columns-default.template attribute, that named slot will be used as the default cell template slot instead of this named slot.

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 data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
data D[keyof D] The data for the current cell being rendered.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
index number The zero-based index of the current row during initial rendering. Note the index is not updated in response to row additions and removals.
item Item.<K, D> The Item for the row being rendered.
key any The key of the current cell being rendered.
Deprecated:
Since Description
10.0.0 Use CellTemplateContext.item.key instead.
mode "edit" | "navigation" The mode of the row containing the cell. It can be "edit" or "navigation".
row any The data for the row contained the current cell being rendered.
Deprecated:
Since Description
10.0.0 Use CellTemplateContext.item.data instead.
rowEditable "on" | "off" On if row is editable, off if editing has been disabled.

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.

footerTemplate

Named slot for the Table's default footer template. The slot content must be a <template> element. The content of the template should not include the <td> element, only what's inside it.

If the value of any column's template, headerTemplate, or footerTemplate property conflicts with this named slot, this slot will only be used for that column. Similarly, if a value is supplied for the deprecated columns-default.footer-template attribute, that named slot will be used as the default footer template slot instead of this named slot.

Properties of $current:
Name Type Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.

headerTemplate

Named slot for the Table's default header template. The slot content must be a <template> element. The content of the template should not include the <td> element, only what's inside it.

If the value of any column's template, headerTemplate, or footerTemplate property conflicts with this named slot, this slot will only be used for that column. Similarly, if a value is supplied for the deprecated columns-default.header-template attribute, that named slot will be used as the default header template slot instead of this named slot.

Properties of $current:
Name Type Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
data any The data object for the current header.
Deprecated:
Since Description
10.0.0 Use HeaderTemplateContext.headerText instead.
headerText string The text for the current header being rendered.

noData

The noData slot is used to specify the content to display when the table is empty. The slot content must be a <template> element. If not specified then a default no data message will be displayed.

rowTemplate

Named slot for the Table's default row template. The slot content must be a <template> element. The content of the template can include the <tr> element or the child of the <tr> element.

If using a rowTemplate to configure the display of rows, the Table will handle any change in column reordering due to a dnd operation internally. Any application logic behind rowTemplate definitions should not dynamically respond to 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes in logic needed for the rowTemplate definitions must be handled by the application.

When providing inline template content that includes table-specific markup such as <tr> or <td> elements, applications are responsible for ensuring that the content provided is valid HTML. For example, providing an <oj-bind-if> element as the child of a <tr> is not valid HTML, and will not function as intended. To enable this type of dynamic template functionality, the entire Table can be defined within an <oj-module>, or an <oj-bind-dom> element can be provided as the child of an inline template.

Properties of $current:
Name Type Description
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
data any The data for the current row being rendered.
Deprecated:
Since Description
10.0.0 Use RowTemplateContext.item.data instead.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
editable "on" | "off" On if row is editable, off if editing has been disabled.
index number The zero-based index of the current row during initial rendering. Note the index is not updated in response to row additions and removals.
item Item.<K, D> The Item for the row being rendered.
key any The key of the current row being rendered.
Deprecated:
Since Description
10.0.0 Use RowTemplateContext.item.key instead.
mode "edit" | "navigation" The mode of the row containing the cell. It can be "edit" or "navigation".
rowContext Object Context of the row.
Deprecated:
Since Description
10.0.0 Use Top level RowTemplateContext APIs instead.

Attributes

accessibility :Object|null

Accessibility attributes.
Names
Item Name
Property accessibility
Property change event accessibilityChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-accessibility-changed

accessibility.row-header :string|Array.<string>

The column ids to be used as the row headers by screen readers. This can be a string if there is only one column id, or an array of strings if multiple column ids are desired.

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

add-row-display :"top"|"hidden"

Note: This attribute is not supported in the following themes: Alta

Specifies whether to show or hide add new row when addRowTemplate or addRowCellTemplate is present.
Supported Values:
Value Description
hidden Hide add new row.
top Display add new row at the top.
Default Value:
  • "top"
Names
Item Name
Property addRowDisplay
Property change event addRowDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-add-row-display-changed

as :string

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, see Events and Listeners for additional information.) on-as-changed

columns :(Array.<oj.ojTable.Column.<K, D>>|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, see Events and Listeners for additional information.) on-columns-changed

columns-default :(oj.ojTable.ColumnDefault.<K, D>|null)

Default values to apply to all column objects.
Names
Item Name
Property columnsDefault
Property change event columnsDefaultChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-columns-default-changed

current-row :(oj.ojTable.CurrentRow.<K>|null)

The row that currently has 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, see Events and Listeners for additional information.) on-current-row-changed

data :(DataProvider|TableDataSource|null) data :(DataProvider.<K, D>|null)

The data to bind to the element.

Must be of type DataProvider DataProvider or type TableDataSource TableDataSource

Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed

display :"list"|"grid"

Whether to display table in list or grid mode. Setting a value of grid will cause the table to display in grid mode.
Supported Values:
Value Description
grid Display table in grid mode. This is a more compact look than list mode.
list 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, see Events and Listeners for additional information.) on-display-changed

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, see Events and Listeners for additional information.) on-dnd-changed

(nullable) dnd.drag :Object

An object that describes drag functionality.

See the dnd attribute for usage examples.

Default Value:
  • null
Names
Item Name
Property dnd.drag

(nullable) 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>
 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.
drag function(DragEvent):void <optional>
 A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragEnd function(DragEvent):void <optional>
 A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event: The DOM event object
dragStart function(DragEvent, ojTable.DragRowContext<K,D>):void <optional>
 A callback function that receives the "dragstart" event and context information as its 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.
Names
Item Name
Property dnd.drag.rows

(nullable) dnd.drop :Object

An object that describes drop functionality.

See the dnd attribute for usage examples.

Default Value:
  • null
Names
Item Name
Property dnd.drop

(nullable) 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, ojTable.DropColumnContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its 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.
dragLeave function(DragEvent, ojTable.DropColumnContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojTable.DropColumnContext):void <optional>
 A callback function that receives the "dragover" event and context information as its 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.
drop function(DragEvent, ojTable.DropColumnContext):void A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.
Names
Item Name
Property dnd.drop.columns

(nullable) 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, ojTable.DropRowContext):void <optional>
 A callback function that receives the "dragenter" event and context information as its 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.
dragLeave function(DragEvent, ojTable.DropRowContext):void <optional>
 A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context)
dragOver function(DragEvent, ojTable.DropRowContext):void <optional>
 A callback function that receives the "dragover" event and context information as its 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.
drop function(DragEvent, ojTable.DropRowContext):void A required callback function that receives the "drop" event and context information as its 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

(nullable) dnd.reorder :Object

An object that describes reorder functionality.

See the dnd attribute for usage examples.

Names
Item Name
Property dnd.reorder

dnd.reorder.columns :"enabled"|"disabled"

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.

If using a rowTemplate, rowRenderer, or addRowTemplate to configure the display of rows, the Table will handle any change in column reordering due to a dnd operation internally. Any application logic behind rowTemplate, rowRenderer, or addRowTemplate definitions should not dynamically respond to 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes in logic needed for the rowTemplate, rowRenderer, or addRowTemplate definitions must be handled by the application.

See the dnd attribute for usage examples.

Supported Values:
Value Description
disabled Disable column reordering.
enabled Enable column reordering.
Default Value:
  • "disabled"
Names
Item Name
Property dnd.reorder.columns

edit-mode :"none"|"rowEdit"

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:
Value Description
none The table is read-only and is a single Tab stop.
rowEdit 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, see Events and Listeners for additional information.) on-edit-mode-changed

edit-row :(oj.ojTable.EditRow.<K>|null)

The information about the row that is currently being edited. The value of this property contains:
  • rowKey - The key of the currently edited row.
  • rowIndex - The index of the currently edited row.
Note that the row the is currently being edited is also the current keyboard focus row. Therefore, when this value is updated, the value of currentRow is updated also. In addition, editRow update can be cancelled if beforeCurrentRow event is vetoed.
Default Value:
  • {'rowKey': null, 'rowIndex': -1}
Supports writeback:
  • true
Names
Item Name
Property editRow
Property change event editRowChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-edit-row-changed

(readonly) first-selected-row :ojcommontypes.ItemContext.<K, D>

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.
Properties:
Name Type Description
data any The data for first selected row.
key any The key of first selected row.
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, see Events and Listeners for additional information.) on-first-selected-row-changed

horizontal-grid-visible :"auto"|"enabled"|"disabled"

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:
Value Description
auto Determined by display attribute.
disabled Horizontal gridlines are disabled.
enabled Horizontal gridlines are enabled.
Default Value:
  • "auto"
Names
Item Name
Property horizontalGridVisible
Property change event horizontalGridVisibleChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-horizontal-grid-visible-changed

layout :"contents"|"fixed"

Note: This attribute is not supported in the following themes: Alta

The column sizing method used for the Table and its columns.
Supported Values:
Value Description
contents
  • When specified, the default column sizing is determined by the contents of the data.
  • Does not require an overall width set on the Table.
  • Can have performance issues when large numbers of columns and/or rows are initially rendered.
fixed
  • When specified, the default column sizing is determined by column weights.
  • Requires an overall width set on the Table (width='100%', width='200rem', etc.)
  • Very performant when rendering large numbers of columns and/or rows.
Default Value:
  • "contents"
Names
Item Name
Property layout
Property change event layoutChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-layout-changed

row :Object

The row attribute contains a subset of attributes for controlling certain behaviors on a per row basis.
Since:
  • 13.1.0
Names
Item Name
Property row
Property change event rowChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-changed

(nullable) row.editable :((item: Item<K,D>) => 'on'|'off') | null)

A function that returns whether the row can be edited. See Item to see the object passed into the editable function. If no function is specified, and edit-mode is set to "rowEdit" then all the rows will be editable.
Default Value:
  • null
Since:
  • 13.1.0
Names
Item Name
Property row.editable

(nullable) row.selectable :((item: Item<K,D>) => 'on'|'off') | null)

If selection-mode.row is 'multiple' or 'single', this callback will be invoked and allows apps to control selection on individual rows. See Item to see the object passed into the selectable function. If no function is specified then all the rows will be selectable, unless selection-mode.row is not set to "none". In addition, row.selectable does not impact column selection modes. If an AllKeySetImpl is set on the table the table will not show those rows as selected. However, the table will not add the non-selectable keys to AllKeySets's deletedValues set. If selection-mode.row = 'multiple', turning selection off for a particular row will remove the oj-selector and increase the span of the td in the first column by one for that row.
Default Value:
  • null
Since:
  • 13.1.0
Names
Item Name
Property row.selectable

(nullable) row.sticky :((item: Item<K,D>) => 'on'|'off') | null)

Note: This attribute is not supported in the following themes: Alta

A function that returns whether the row should be sticky. See Item to see the object passed into the sticky function. If no function is specified, no rows will be sticky.
Default Value:
  • null
Since:
  • 13.1.0
Names
Item Name
Property row.sticky

row-renderer :((context: ojTable.RowRendererContext<K,D>) => {insert: HTMLElement} | void) | null)

A function that renders the content of the row. The function takes a context argument, provided by the Table.
  • An Object with the following property:
    • insert: HTMLElement - A DOM element of the content inside the row.
  • undefined: If the developer chooses to manipulate the row element directly, the function should return undefined.

If using a rowRenderer to configure the display of rows, the Table will handle any change in column reordering due to a dnd operation internally. Any application logic behind rowRenderer definitions should not dynamically respond to 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes in logic needed for the rowRenderer definitions must be handled by the application.

Default Value:
  • null
Names
Item Name
Property rowRenderer
Property change event rowRendererChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-renderer-changed

scroll-policy :"auto"|"loadAll"|"loadMoreOnScroll"

Specifies the mechanism used to scroll the data inside the table. Possible values are: "auto", "loadMoreOnScroll", and "loadAll". When "loadMoreOnScroll" is specified, additional data are fetched when the user scrolls to the bottom of the table. When "loadAll" is specified, table will fetch all the data when it is initially rendered. If you are using Paging Control with the Table, please note that "loadMoreOnScroll" scroll-policy is not compatible with Paging Control "loadMore" mode.
Supported Values:
Value Description
auto Determined by element. The default is to have the same behavior as "loadMoreOnScroll" except when legacy TableDataSource is used, in which case the behavior is the same as "loadAll".
loadAll Fetch and render all data.
loadMoreOnScroll Additional data are fetched when the user scrolls to the bottom of the table. This option should be used only when table height is specified.
Not compatible when used with Paging Control "loadMore" mode.
Default Value:
  • "auto"
Names
Item Name
Property scrollPolicy
Property change event scrollPolicyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-policy-changed

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, see Events and Listeners for additional information.) on-scroll-policy-options-changed

(nullable) scroll-policy-options.fetch-size :number

The number of rows to fetch in each block of rows. The specified number is passed to the underlying data provider through the size attribute of the fetch first parameters. Note, the underlying data provider may not request that exact number from the back end.

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

Default Value:
  • 25
Names
Item Name
Property scrollPolicyOptions.fetchSize

(nullable) 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

(nullable) scroll-policy-options.scroller : | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap | string | null

Note: This attribute is not supported in the following themes: Alta

The CSS selector string to an element which Table uses to determine the scroll position as well as the maximum scroll position.
  • When specified, the Table will listen to the scroll events of the scroller element to determine when to load more data.
  • To specify the HTML body itself, set 'html' as the scroller element. (Most common on mobile devices).
  • The Table must not have a constrained height or width. It can have minimum sizes specified, but nothing that prevents it from growing in size in either direction.
  • The scroller element specified must have horizontal AND vertical scrolling enabled (ie. overflow: auto).
  • The scroller element must be an ancestor of the Table at some level in the DOM tree.
  • Applications should be aware that when using an external scroller, the Table can (and will) become wider than the viewport's width depending on the number of columns defined. When this occurs, other content on the page should be positioned in a way that handles this behavior gracefully.
  • Another potential option would be to setup the page content of an application to always stretch to match the width that the Table grows to. This would allow the page content to scroll horizontally when the Table becomes wider than the viewport, and may be preferred in some cases.
Default Value:
  • null
Names
Item Name
Property scrollPolicyOptions.scroller

(nullable) scroll-policy-options.scroller-offset-bottom :number|null

Note: This attribute is not supported in the following themes: Alta

The bottom offset value (in pixels) used for the Table's external scroller. This value is used to specify the location where the Table's footer region becomes 'sticky' when the 'scroller' attribute is specified.
Default Value:
  • null
Names
Item Name
Property scrollPolicyOptions.scrollerOffsetBottom

(nullable) scroll-policy-options.scroller-offset-end :number|null

Note: This attribute is not supported in the following themes: Alta

The end offset value (in pixels) used for the Table's external scroller. This value is used to specify the location where the Table's frozen 'end' columns (or frozen 'start' columns in RTL) become 'sticky' when the 'scroller' attribute is specified.
Default Value:
  • null
Names
Item Name
Property scrollPolicyOptions.scrollerOffsetEnd

(nullable) scroll-policy-options.scroller-offset-start :number|null

Note: This attribute is not supported in the following themes: Alta

The start offset value (in pixels) used for the Table's external scroller. This value is used to specify the location where the Table's frozen 'start' columns (or frozen 'end' columns in RTL) become 'sticky' when the 'scroller' attribute is specified.
Default Value:
  • null
Names
Item Name
Property scrollPolicyOptions.scrollerOffsetStart

(nullable) scroll-policy-options.scroller-offset-top :number|null

Note: This attribute is not supported in the following themes: Alta

The top offset value (in pixels) used for the Table's external scroller. This value is used to specify the location where the Table's header region becomes 'sticky' when the 'scroller' attribute is specified.
Default Value:
  • null
Names
Item Name
Property scrollPolicyOptions.scrollerOffsetTop

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
columnIndex number <optional>
 The zero-based index of the cell at the origin of the table.
columnKey string <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.
offsetX number <optional>
 The horizontal offset in pixels relative to the column identified by columnKey/columnIndex.
offsetY number <optional>
 The vertical offset in pixels relative to the row identified by rowKey/rowIndex.
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.
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.
x number <optional>
 The horizontal position in pixels.
y number <optional>
 The vertical position in pixels.
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, see Events and Listeners for additional information.) on-scroll-position-changed

scroll-to-key :"auto"|"capability"|"always"|"never"

Specifies the behavior when table needs to scroll to a position based on a row key. This includes the case where 1) a value of scrollPosition attribute is specified with a key property, 2) Table scrolls to the selection anchor after a refresh has occurred.
Supported Values:
Value Description
always Table will scroll to a position based on a row key as long as the key is valid.
auto The behavior is determined by the component. By default the behavior is the same as "capability" except when legacy TableDataSource is used, in which case the behavior is the same as "always".
capability Table will only scroll to a position based on a row key if the associated DataProvider supports 'immediate' iterationSpeed for 'fetchFirst' capability.
never Table will not change the scroll position if the request is based on a row key.
Default Value:
  • "auto"
Names
Item Name
Property scrollToKey
Property change event scrollToKeyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-to-key-changed

select-all-control :"visible"|"hidden"

Note: This attribute is not supported in the following themes: Alta

Whether the select all control should be rendered.
Supported Values:
Value Description
hidden Select all control is hidden.
visible Select all control is visible.
Default Value:
  • "visible"
Names
Item Name
Property selectAllControl
Property change event selectAllControlChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-select-all-control-changed

selected :{row?: oj.KeySet<K>, column?: oj.KeySet<string>}

Specifies the current selected rows and/or columns in the table. Note that property change event for the deprecated selection property will still be fired when selected property has changed. In addition, AllKeySetImpl set can be used to represent select all state. In this case, the value for selection would have an 'inverted' property set to true, and would contain index/key of the rows that are not selected.
Default Value:
  • {row: new KeySetImpl(), column: new KeySetImpl()};
Supports writeback:
  • true
Names
Item Name
Property selected
Property change event selectedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selected-changed

selected.column :oj.KeySet<string>

Specifies the current selected columns in the table.
Default Value:
  • new oj.KeySetImpl();
Supports writeback:
  • true
Names
Item Name
Property selected.column

selected.row :oj.KeySet<K>

Specifies the current selected rows in the table.
Default Value:
  • new oj.KeySetImpl();
Supports writeback:
  • true
Names
Item Name
Property selected.row

selection :Array<ojTable.RowSelectionStart<K> & ojTable.RowSelectionEnd<K>> | Array<ojTable.ColumnSelectionStart & ojTable.ColumnSelectionEnd>

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. Note that this attribute has been replaced by selected, and it is recommended that applications use the selected attribute going forward.

Selection range object has following subproperties:

  • startIndex, startKey - In case of row selection, startIndex and startKey refers to first row(which is near to table header) in range selection.
    In case of column selection, startIndex and startKey refers to first column in range selection.
  • endIndex, endKey - In case of row selection, endIndex and endKey refers to last row(which is far from table header) in range selection.
    In case of column selection, endIndex and endKey refers to last column in range selection.
startIndex, startKey, endIndex and endKey are of type object. In case of row selection, these objects will have 'row' subpropety. In case of column selection, objects will have 'column' subproperty.

Deprecated:
Since Description
7.0.0 Use selected attribute instead.
Default Value:
  • []
Supports writeback:
  • true
Names
Item Name
Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed

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

Specifies whether row or column selections can be made, and the cardinality of each (single/multiple/none) selection in the Table.

Default Value:
  • null
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed

(nullable) selection-mode.column :string

The type of column selection behavior that is enabled on the Table. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the Table's selection styling will be applied to all columns specified by the selection and selected attributes. If none is specified, selection gestures will be disabled, and the Table's selection styling will not be applied to any columns specified by the selection and selected attributes.

Changing the value of this attribute will not affect the value of the selection or selected attributes.

See the selection-mode attribute for usage examples. By default, this element does not allow any selection. (As a note, the 'id' property of each column is required when column selection is enabled).

Supported Values:
Value Description
multiple Multiple columns can be selected at the same time.
none Selection is disabled.
single Only a single column can be selected at a time.
Names
Item Name
Property selectionMode.column

(nullable) selection-mode.row :string

The type of row selection behavior that is enabled on the Table. This attribute controls the number of selections that can be made via selection gestures at any given time.

If single or multiple is specified, selection gestures will be enabled, and the Table's selection styling will be applied to all rows specified by the selection and selected attributes. If none is specified, selection gestures will be disabled, and the Table's selection styling will not be applied to any rows specified by the selection and selected attributes.

Changing the value of this attribute will not affect the value of the selection or selected attributes.

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

Supported Values:
Value Description
multiple Multiple rows can be selected at the same time.
none Selection is disabled.
single Only a single row can be selected at a time.
Names
Item Name
Property selectionMode.row

selection-required :boolean

Specifies whether selection is required on the Table. When row selection is enabled, this attribute will take effect when at least one row is present. When true, the Table will ensure that at least one valid row is selected at all times. If no rows are specified by the selection or selected attributes, the first row in the Table will be added to the selection state during initial render. Additionally, selection gestures that would otherwise leave the Table with no selected rows will be disabled.

When true, the Table will also attempt to validate all rows specified by the selection and selected attributes. If any rows specified are not immediately available, the Table's underlying DataProvider will be queried. This will only occur if the data provider supports getCapability, and returns a fetchByKeys capability implementation of lookup. Any rows that fail this validation process will be removed from the selection and selected attributes. This guarantees that the Table's firstSelectedRow attribute is populated at all times.

Otherwise, when column selection is enabled, this attribute will take effect when at least one column is present. When true, the Table will ensure that at least one valid column is selected at all times. If no columns are specified by the selection or selected attributes, the first column in the Table will be added to the selection state during initial render. Additionally, selection gestures that would otherwise leave the Table with no selected columns will be disabled.

See selectionMode for information on how to enable or disable selection on the Table.

Default Value:
  • false
Names
Item Name
Property selectionRequired
Property change event selectionRequiredChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-required-changed

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, see Events and Listeners for additional information.) on-translations-changed

translations.accessible-add-row :string

Provides properties to customize the accessible text for the 'add row' row.

See the translations attribute for usage examples.

Since:
  • 13.1.0
Names
Item Name
Property translations.accessibleAddRow

translations.accessible-column-context :string

Provides properties to customize the accessible context for the column index.

See the translations attribute for usage examples.

Since:
  • 9.0.0
Names
Item Name
Property translations.accessibleColumnContext

translations.accessible-column-footer-context :string

Provides properties to customize the accessible context for the column footer index.

See the translations attribute for usage examples.

Since:
  • 10.0.0
Names
Item Name
Property translations.accessibleColumnFooterContext

translations.accessible-column-header-context :string

Provides properties to customize the accessible context for the column header index.

See the translations attribute for usage examples.

Since:
  • 9.0.0
Names
Item Name
Property translations.accessibleColumnHeaderContext

translations.accessible-columns-span :string

Provides properties to customize the accessible text when a cell spans multiple columns.

See the translations attribute for usage examples.

Since:
  • 13.1.0
Names
Item Name
Property translations.accessibleColumnsSpan

translations.accessible-contains-controls :string

Provides properties to customize the accessible text when a cell contains controls.

See the translations attribute for usage examples.

Since:
  • 12.1.0
Names
Item Name
Property translations.accessibleContainsControls

translations.accessible-row-context :string

Provides properties to customize the accessible context for the row index.

See the translations attribute for usage examples.

Since:
  • 9.0.0
Names
Item Name
Property translations.accessibleRowContext

translations.accessible-sort-ascending :string

Provides properties to customize the accessible text when a header is sorted ascending.

See the translations attribute for usage examples.

Since:
  • 8.0.0
Names
Item Name
Property translations.accessibleSortAscending

translations.accessible-sort-descending :string

Provides properties to customize the accesible text when a header is sorted descending.

See the translations attribute for usage examples.

Since:
  • 8.0.0
Names
Item Name
Property translations.accessibleSortDescending

translations.accessible-sortable :string

Provides properties to customize the accessible text when a header is able to be sorted.

See the translations attribute for usage examples.

Since:
  • 9.2.0
Names
Item Name
Property translations.accessibleSortable

translations.accessible-state-selected :string

Provides properties to customize the accessible context when an item is selected.

See the translations attribute for usage examples.

Default Value:
  • "selected"
Since:
  • 9.0.0
Names
Item Name
Property translations.accessibleStateSelected

translations.accessible-state-unselected :string

Provides properties to customize the accessible context when an item is unselected.

See the translations attribute for usage examples.

Default Value:
  • "unselected"
Since:
  • 13.0.0
Names
Item Name
Property translations.accessibleStateUnselected

translations.accessible-summary-estimate :string

Provides properties to customize the accessible context read when the exact row count is unknown.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.accessibleSummaryEstimate

translations.accessible-summary-exact :string

Provides properties to customize the accessible context read when the exact row count is known.

See the translations attribute for usage examples.

Since:
  • 12.0.0
Names
Item Name
Property translations.accessibleSummaryExact

translations.editable-summary :string

Provides properties to customize the accessible context read when the Table is editable

See the translations attribute for usage examples.

Since:
  • 15.0.0
Names
Item Name
Property translations.editableSummary

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-column-width :string

Provides properties to customize the resize column input label.

See the translations option for usage examples.

Since:
  • 11.1.0
Names
Item Name
Property translations.labelColumnWidth

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

Provides properties to customize the context menu label for exiting non-contiguous 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-contiguous 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.

Deprecated:
Since Description
11.1.0 This option has been deprecated. Use labelResizeColumn option.
Names
Item Name
Property translations.labelResize

translations.label-resize-column :string

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

See the translations option for usage examples.

Since:
  • 11.1.0
Names
Item Name
Property translations.labelResizeColumn

translations.label-resize-column-dialog :string

Provides properties to customize the resize dialog title.

See the translations option for usage examples.

Since:
  • 11.1.0
Names
Item Name
Property translations.labelResizeColumnDialog

translations.label-resize-dialog-apply :string

Provides properties to customize the resize dialog apply button label.

See the translations option for usage examples.

Since:
  • 11.1.0
Names
Item Name
Property translations.labelResizeDialogApply

translations.label-resize-popup-cancel :string

Provides properties to customize the resize popup cancel button.

See the translations option for usage examples.

Since:
  • 8.0.0
Names
Item Name
Property translations.labelResizePopupCancel

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-all-rows :string

Select all rows label.

See the translations attribute for usage examples.

Default Value:
  • "Select All Rows"
Since:
  • 12.0.0
Names
Item Name
Property translations.labelSelectAllRows

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 and sort icon tooltip 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 and sort icon tooltip 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.

Deprecated:
Since Description
16.0.0 This option has been deprecated. This translation string is only used with the Alta theme.
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

(nullable) translations.tooltip-required :string

Used for the default required icon tooltip.

Default Value:
  • "Required"
Since:
  • 12.0.0
Names
Item Name
Property translations.tooltipRequired

vertical-grid-visible :"auto"|"enabled"|"disabled"

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:
Value Description
auto Determined by display attribute.
disabled Vertical gridlines are disabled.
enabled Vertical gridlines are enabled.
Default Value:
  • "auto"
Names
Item Name
Property verticalGridVisible
Property change event verticalGridVisibleChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) 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
columnIndex number the zero based absolute column index
key string the row key
rowIndex number the zero based absolute row index

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.
Deprecated:
Since Description
12.1.0 This web component no longer supports this event.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
action "add" | "remove" | "update" The action that triggered 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 an HTML div element.

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.
Deprecated:
Since Description
12.1.0 This web component no longer supports this event.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
action "add" | "remove" | "update" The action that triggers 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.

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. See Events and Listeners for additional information.

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

ojBeforeRowAddEnd

Triggered before the table is going to exit the insert row mode. To prevent exit inserting, call event.preventDefault() in the listener.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
accept function This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
cancelAdd boolean true if the insert should be negated based on actions (i.e. escape key).

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. See Events and Listeners for additional information.

Name Type Description
accept (acceptPromise:Promise<void>) => void This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
rowContext Object The rowContext of the row that editing is going to be performed on.
Properties
Name Type Description
componentElement Element A reference to the Table root element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
item Item.<K, D> The Item for the row being edited.
mode "edit" | "navigation" The mode of the row. It can be "edit" or "navigation".
parentElement Element Empty rendered TR element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
status ojTable.ContextStatus<K> Contains the rowIndex, rowKey, and currentRow
Deprecated:
Since Description
10.0.0 Use rowContext.item instead.

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. See Events and Listeners for additional information.

Name Type Description
accept (acceptPromise:Promise<void>) => void This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
cancelEdit boolean true if the edit should be negated based on actions (i.e. escape key).
rowContext Object The rowContext of the edited row.
Properties
Name Type Description
componentElement Element A reference to the Table root element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
item Item.<K, D> The Item for the row being edited.
mode "edit" | "navigation" The mode of the row. It can be "edit" or "navigation".
parentElement Element Empty rendered TR element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
status ojTable.ContextStatus<K> Contains the rowIndex, rowKey, and currentRow.
Deprecated:
Since Description
10.0.0 Use rowContext.item instead.
setUpdatedItem (param:Promise<{updatedItem: Item<K,D>}>) => void This method can be called with an application-created Promise to resolve with updated row item object. This method can be called in synchronous or asynchronous editing. In case of asynchronous editing this method should be involked before resolving accept promise. This is an optional method to prevent table from calling fetch on the dataprovider and also useful when application know about the no data change for the row. Note: If called more than once, only the most recent Promise provided will be honored.

ojRowAction

Triggered when user performs an action gesture on a row while Table is in navigation mode. The action gestures include:
  • User clicks anywhere in a row
  • User taps anywhere in a row
  • User pressed enter key while a row or a cell within the row or content within a cell has focus
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
context ojcommontypes.ItemContext.<K, D> The context information about the row where the action gesture is performed on.
originalEvent Event The DOM event that triggers the action.

ojSort

Triggered when a sort is performed on the table.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

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

Methods

getContextByNode(node) : {({subId: 'oj-table-cell', rowIndex: number, columnIndex: number, key: K}|{subId: ('oj-table-footer'|'oj-table-header'), index: number})}

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
({subId: 'oj-table-cell', rowIndex: number, columnIndex: number, key: K}|{subId: ('oj-table-footer'|'oj-table-header'), index: number})

getDataForVisibleRow(rowIndex: number) : {data: D, index: number, key: K} | 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

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
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:

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

refresh : {void}

Refresh the table.
Returns:
Type
void

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

Refresh a row in the table.
Parameters:
Name Type Description
rowIdx number Index of the row to refresh.
Deprecated:
Since Description
13.0.0 Use DataProvider mutations and update events instead.
Throws:
Type
Error
Returns:

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

Type
Promise.<boolean>

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
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 subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
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

AddRowCellTemplateContext<K,D>

Context passed into column specific add row template.
Properties:
Name Type Argument Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
submitAddRow function(boolean):void <optional>
 This function can be used to programatically submit or cancel row. Should pass true while canceling submit.

AddRowTemplateContext<K,D>

Context passed into add row template.
Properties:
Name Type Argument Description
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
submitAddRow function(boolean):void <optional>
 This function can be used to programatically submit or cancel row. Should pass true while canceling submit.

CellTemplateContext<K,D>

Context passed into default and column-specific cell templates.
Properties:
Name Type Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
data D[keyof D] The data for the current cell being rendered.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
index number The zero-based index of the current row during initial rendering. Note the index is not updated in response to row additions and removals.
item Item.<K, D> The Item for the row being rendered.
key any The key of the current cell being rendered.
Deprecated:
Since Description
10.0.0 Use CellTemplateContext.item.key instead.
mode "edit" | "navigation" The mode of the row containing the cell. It can be "edit" or "navigation".
row any The data for the row contained the current cell being rendered.
Deprecated:
Since Description
10.0.0 Use CellTemplateContext.item.data instead.
rowEditable "on" | "off" On if row is editable, off if editing has been disabled.

Column<K,D>

Object that defines Column properties
Properties:
Name Type Argument Default Description
className string | null <optional>
 null The CSS class to apply to the column cells.
field string | null <optional>
 null The data field that this column refers to.
footerClassName string | null <optional>
 null The CSS class to apply to the footer cell.
footerRenderer ?((context: ojTable.FooterRendererContext<K,D>) => {insert: HTMLElement | string} | void) | null <optional>
 null A function that renders the content of the footer cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the footer data as a string.

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.
footerStyle string | null <optional>
 null The CSS styling to apply to the footer cell.
footerTemplate string | null <optional>
 null The name of the slot used to specify the template for rendering the footer cell. The slot content 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. (Refer the Table in FooterTemplateContext for a list of properties available on $current)
  • alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
frozenEdge 'start' | 'end' | null <optional>
 null The edge that this column is frozen against. If present, the column will not be allowed to scroll past the specified edge of the Table.
headerClassName string | null <optional>
 null The CSS class to apply to the column header text.
headerRenderer ?((context: ojTable.HeaderRendererContext<K,D>) => {insert: HTMLElement | string} | void) | null <optional>
 null A function that renders the content of the header. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the header data as a string.

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.
headerStyle string | null <optional>
 null The CSS styling to apply to the column header text.
headerTemplate string | null <optional>
 null The name of the slot used to specify the template for rendering the header cell. The slot content 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. (Refer the Table in HeaderTemplateContext for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
headerText string | null <optional>
 null Text to display in the header of the column.
id string | null <optional>
 The identifier for the column. This property is required when column selection is enabled.
maxWidth string | number | null <optional>
 null

The maximum width style string of the column. This value is used during initial render, and does not affect the ability to resize the column. This style is applicable when layout='fixed' and layout='contents'.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit.
minWidth 'auto' | string | number | null <optional>
 null

The minimum width style string of the column. This value is used during initial render, and does not affect the ability to resize the column. This style is applicable when layout='fixed' and layout='contents'.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit. The string keyword 'auto' indicates that the minimum width will be determined by the theme and the layout attribute.
renderer ?((context: ojTable.ColumnsRendererContext<K,D>) => {insert: HTMLElement | string} | void) | null <optional>
 null A function that renders the content of the cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the cell data as a string.

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 cell.
  • undefined: If the developer chooses to manipulate the cell element directly, the function should return undefined.
resizable "enabled" | "disabled" <optional>
 "disabled" Enable or disable width resizing along the column end headers.
showRequired boolean <optional>
 false Whether the column header should display a required icon. When set to true, the Table's default column header rendering, tooltip, and assistive text will convey this information to the user as per the specified theme. If a custom header renderer or header template is specified, the application is responsible for rendering the icon.
sortProperty string | null <optional>
 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.
sortable "auto" | "enabled" | "disabled" <optional>
 "auto" 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.

style string | null <optional>
 null The CSS styling to apply to the column cells.
template string | null <optional>
 null The name of the slot used to specify the template for rendering the cell. The slot content 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 (Refer the Table in CellTemplateContext for a list of properties available on $current)
  • alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
weight number | null <optional>
 null Specifies the relative sizing weight of the column. This must be a positive number greater than or equal to 1. It does not affect the ability to resize the column. When the Table's layout attribute is set to fixed, this value is used to determine the relative width of the column compared to the other columns. For example, a column with a weight of 2 will have twice as much space allocated to it as a column with a weight of 1. This value has no effect when the Table's layout attribute is set to contents.
width string | number | null <optional>
 null

The width style string of the column. This value is used during initial render, and does not affect the ability to resize the column. This style is applicable when layout='fixed' and layout='contents'.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit.

ColumnDefault<K,D>

Object that defines Column default properties
Properties:
Name Type Argument Default Description
className string | null <optional>
 null The CSS class to apply to the column cells.
field string | null <optional>
 null The data field that this column refers to.
footerClassName string | null <optional>
 null The CSS class to apply to the footer cell.
footerRenderer ?((context: ojTable.FooterRendererContext<K,D>) => {insert: HTMLElement | string} | void) | null <optional>
 null A function that renders the content of the footer cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the footer data as a string.

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.
footerStyle string | null <optional>
 null The CSS styling to apply to the footer cell.
footerTemplate string | null <optional>
 null The name of the slot used to specify the template for rendering the footer cell. The slot content 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. (Refer the Table in FooterTemplateContext for a list of properties available on $current)
  • alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Deprecated:
Since Description
7.0.0 Use the footerTemplate slot instead.
headerClassName string | null <optional>
 null The CSS class to apply to the column header text.
headerRenderer ?((context: ojTable.HeaderRendererContext<K,D>) => {insert: HTMLElement | string} | void) | null <optional>
 null A function that renders the content of the header. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the header data as a string.

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.
headerStyle string | null <optional>
 null The CSS styling to apply to the column header text.
headerTemplate string | null <optional>
 null The name of the slot used to specify the template for rendering the header cell. The slot content 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. (Refer the Table in HeaderTemplateContext for a list of properties available on $current)
  • alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Deprecated:
Since Description
7.0.0 Use the headerTemplate slot instead.
headerText string | null <optional>
 null Text to display in the header of the column.
maxWidth string | number | null <optional>
 null

The maximum width style string of the column. This value is used during initial render, and does not affect the ability to resize the column. This style is applicable when layout='fixed' and layout='contents'.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit.
minWidth 'auto' | string | number | null <optional>
 'auto'

The minimum width style string of the column. This value is used during initial render, and does not affect the ability to resize the column. This style is applicable when layout='fixed' and layout='contents'.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit. The string keyword 'auto' indicates that the default minimum width will be determined by the theme and the layout attribute.
renderer ?((context: ojTable.ColumnsRendererContext<K,D>) => {insert: HTMLElement | string} | void) | null <optional>
 null A function that renders the content of the cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the cell data as a string.

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 cell.
  • undefined: If the developer chooses to manipulate the cell element directly, the function should return undefined.
resizable "enabled" | "disabled" <optional>
 "disabled" Enable or disable width resizing along the column end headers.
showRequired boolean <optional>
 false Whether the column header should display a required icon. When set to true, the Table's default column header rendering, tooltip, and assistive text will convey this information to the user as per the specified theme. If a custom header renderer or header template is specified, the application is responsible for rendering the icon.
sortProperty string | null <optional>
 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.
sortable "auto" | "enabled" | "disabled" <optional>
 "auto" 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.

style string | null <optional>
 null The CSS styling to apply to the column cells.
template string | null <optional>
 null The name of the slot used to specify the template for rendering the cell. The slot content 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 (Refer the Table in CellTemplateContext for a list of properties available on $current)
  • alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.
Deprecated:
Since Description
7.0.0 Use the template slot instead.
weight number | null <optional>
 1 Specifies the relative sizing weight of the column. This must be a positive number greater than or equal to 1. It does not affect the ability to resize the column. When the Table's layout attribute is set to fixed, this value is used to determine the relative width of the column compared to the other columns. For example, a column with a weight of 2 will have twice as much space allocated to it as a column with a weight of 1. This value has no effect when the Table's layout attribute is set to contents.
width string | number | null <optional>
 null

The width style string of the column. This value is used during initial render, and does not affect the ability to resize the column. This style is applicable when layout='fixed' and layout='contents'.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit.

ColumnSelectionEnd

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

{endIndex:{column:number},endKey?:{column:string}}|{endIndex?:{column:number}, endKey:{column:string}}

ColumnSelectionStart

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

{startIndex:{column:number}, startKey?:{column:string}}|{startIndex?:{column:number}, startKey:{column:string}}

ColumnsRendererContext<K,D>

Context object passed into the columns[].renderer callback function.
Properties:
Name Type Description
cellContext Object Context of the cell containing properties.
Properties
Name Type Description
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
mode "edit" | "navigation" The mode of the row. It can be "edit" or "navigation".
rowEditable "on" | "off" On if row is editable, off if editing has been disabled.
status ojTable.ContextStatus.<K> Contains the rowIndex, rowKey, and currentRow.
columnIndex number The column index.
componentElement Element A reference to the Table root element.
data any The cell data.
parentElement Element Empty rendered <td> element.
row D Key/value pairs of the row.

ContextStatus

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

CurrentRow<K>

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

{rowIndex: number, rowKey?: K}|{rowIndex?: number, rowKey: K}

DragRowContext<K,D>

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.

EditRow<K>

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

{rowIndex: number, rowKey?: K}|{rowIndex?: number, rowKey: K}

FooterRendererContext<K,D>

Context object passed into the footerRenderer callback function.
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 DataProvider.<K, D> | null The "data" attribute of the Table.
parentElement Element Empty rendered element.

FooterTemplateContext<D>

Context passed into default and column-specific footer templates.
Properties:
Name Type Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.

HeaderRendererContext<K,D>

Context object passed into the headerRenderer callback function.
Properties:
Name Type Argument Description
columnHeaderDefaultRenderer function(Object, function(Element):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(Element):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.
columnIndex number The column index.
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 DataProvider.<K, D> | null The "data" attribute of the Table.
parentElement Element Empty rendered TH element.

HeaderTemplateContext<D>

Context passed into default and column-specific header templates.
Properties:
Name Type Description
columnIndex number The zero-based index of the current column during initial rendering.
columnKey keyof D The key of the current column being rendered.
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
data any The data object for the current header.
Deprecated:
Since Description
10.0.0 Use HeaderTemplateContext.headerText instead.
headerText string The text for the current header being rendered.

RowRendererContext<K,D>

Context object passed into the rowRenderer callback function.
Properties:
Name Type Description
componentElement Element A reference to the Table root element.
data D Key/value pairs of the row.
parentElement Element Empty rendered TR element.
rowContext Object context of the row
Properties
Name Type Description
datasource DataProvider.<K, D> | null The "data" attribute of the Table
editable "on" | "off" On if row is editable, off if editing has been disabled.
mode "edit" | "navigation" The mode of the row. It can be "edit" or "navigation".
status ojTable.ContextStatus.<K> Contains the rowIndex, rowKey, and currentRow.

RowSelectionEnd<K>

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

{endIndex: {row: number}, endKey?: {row: K}}|{endIndex?:{row: number}, endKey:{row: K}}

RowSelectionStart<K>

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

{startIndex: {row: number}, startKey?:{row: K}}|{startIndex?: {row: number}, startKey:{row: K}}

RowTemplateContext<K,D>

Context passed into default and row-specific templates.
Properties:
Name Type Description
componentElement Element The <oj-table> custom element.
Deprecated:
Since Description
10.0.0 Use HTMLDocument methods to retrieve this element.
data any The data for the current row being rendered.
Deprecated:
Since Description
10.0.0 Use RowTemplateContext.item.data instead.
datasource DataProvider.<K, D> | null The "data" attribute of the Table.
editable "on" | "off" On if row is editable, off if editing has been disabled.
index number The zero-based index of the current row during initial rendering. Note the index is not updated in response to row additions and removals.
item Item.<K, D> The Item for the row being rendered.
key any The key of the current row being rendered.
Deprecated:
Since Description
10.0.0 Use RowTemplateContext.item.key instead.
mode "edit" | "navigation" The mode of the row containing the cell. It can be "edit" or "navigation".
rowContext Object Context of the row.
Deprecated:
Since Description
10.0.0 Use Top level RowTemplateContext APIs instead.