Usage
Signature:
interface TableElement<K, D>
Generic Parameters
Parameter Description K Type of key of the dataprovider D Type 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
-
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 programmatically 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 programmatically 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
, orfooterTemplate
property conflicts with this named slot, this slot will only be used for that column. Similarly, if a value is supplied for the deprecatedcolumns-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.
- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use CellTemplateContext.item.key instead. - Deprecated:
-
Since Description 10.0.0
Use CellTemplateContext.item.data instead.
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. 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. 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. 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
, orfooterTemplate
property conflicts with this named slot, this slot will only be used for that column. Similarly, if a value is supplied for the deprecatedcolumns-default.footer-template
attribute, that named slot will be used as the default footer template slot instead of this named slot.- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element.
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. -
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
, orfooterTemplate
property conflicts with this named slot, this slot will only be used for that column. Similarly, if a value is supplied for the deprecatedcolumns-default.header-template
attribute, that named slot will be used as the default header template slot instead of this named slot.- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use HeaderTemplateContext.headerText instead.
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. data
any The data object for the current header. 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.
- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use RowTemplateContext.item.data instead. - Deprecated:
-
Since Description 10.0.0
Use RowTemplateContext.item.key instead. - Deprecated:
-
Since Description 10.0.0
Use Top level RowTemplateContext APIs instead.
Properties of $current:
Name Type Description componentElement
Element The <oj-table> custom element. data
any The data for the current row being rendered. 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. mode
"edit" | "navigation" The mode of the row containing the cell. It can be "edit" or "navigation". rowContext
Object Context of the row.
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.
- Default Value:
"top"
Supported Values:
Value Description hidden
Hide add new row. top
Display add new row at the 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
-
column-resize-behavior :"redistribute"|"add"
-
Note: This attribute is not supported in the following themes:
Alta
-
The column resize behavior this Table will utilize when column resizing is enabled on a given column.
- Default Value:
"redistribute"
Supported Values:
Value Description add
Column resize gestures only affect the width of the column on the start side of the divider. redistribute
Column resize gestures affect the widths of columns on each side of the divider. Names
Item Name Property columnResizeBehavior
Property change event columnResizeBehaviorChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-resize-behavior-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.
- Default Value:
"list"
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. 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.
rows
: An array of objects, with each object representing the data of one selected row in the structure below:data The raw row data index The index for the row key The key value for the row
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 objectdragEnd
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:
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 callevent.preventDefault()
to indicate the dragged data can be accepted. Callingevent.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 callevent.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 callevent.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 callevent.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 callevent.preventDefault()
to indicate the dragged data can be accepted. Callingevent.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 callevent.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 callevent.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 callevent.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.
- Default Value:
"disabled"
Supported Values:
Value Description disabled
Disable column reordering. enabled
Enable column reordering. 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.
- Default Value:
"none"
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. 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.
- 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.
- Default Value:
{'key': null, 'data': null}
- Supports writeback:
true
Properties:
Name Type Description data
any The data for first selected row. key
any The key of first selected row. 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.
- Default Value:
"auto"
Supported Values:
Value Description auto
Determined by display attribute. disabled
Horizontal gridlines are disabled. enabled
Horizontal gridlines are enabled. 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.
- 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.
- 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"
Supported Values:
Value Description contents
fixed
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
- An Object with the following property:
-
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.
- Default Value:
"auto"
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.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.- Default Value:
{"x": 0, "y": 0}
- Supports writeback:
true
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. 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.
- Default Value:
"auto"
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. 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.
- Default Value:
"visible"
Supported Values:
Value Description hidden
Select all control is hidden. visible
Select all control is 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.
- 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
-
startIndex, startKey - In case of row selection, startIndex and startKey refers to first row(which is near to table header) in range selection.
-
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
ormultiple
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. Ifnone
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
ormultiple
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. Ifnone
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 oflookup
. 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.
- Default Value:
"auto"
Supported Values:
Value Description auto
Determined by display attribute. disabled
Vertical gridlines are disabled. enabled
Vertical gridlines are enabled. 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 -
oj-table-footer
-
Context for the Table element's footers.
Properties:
Name Type Description index
number the zero based absolute column index -
oj-table-header
-
Context for the Table element's headers.
Properties:
Name Type Description index
number the zero based absolute column index
Events
-
ojAnimateEnd
-
Triggered when the default animation of a particular action has ended. Note this event will not be triggered if application cancelled the default animation on animateStart. Row animations will only be triggered for rows in the current viewport and an event will be triggered for each cell in the animated row.
- 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. -
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 callsevent.preventDefault
to cancel the default animation, it must call theevent.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.- Deprecated:
-
Since Description 17.0.0
Use currentRowChanged instead.
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.- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use rowContext.item instead.
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. 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. status
ojTable.ContextStatus<K> Contains the rowIndex, rowKey, and currentRow -
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.- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use rowContext.item instead.
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. 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. status
ojTable.ContextStatus<K> Contains the rowIndex, rowKey, and currentRow. 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.
data The raw row data index The index for the row key The 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 programmatically 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 programmatically submit or cancel row. Should pass true while canceling submit. -
CellTemplateContext<K,D>
-
Context passed into default and column-specific cell templates.
- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use CellTemplateContext.item.key instead. - Deprecated:
-
Since Description 10.0.0
Use CellTemplateContext.item.data instead.
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. 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. 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. rowEditable
"on" | "off" On if row is editable, off if editing has been disabled. -
Column<K,D>
-
Object that defines Column properties
- 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.
- $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.
- 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.
- $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.
- 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.
- $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.
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:
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:
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:
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:
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'
andlayout='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'
andlayout='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 thelayout
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:
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:
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 tofixed
, 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'slayout
attribute is set tocontents
.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'
andlayout='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.
- An Object with the following property:
-
ColumnDefault<K,D>
-
Object that defines Column default properties
- 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.
- $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. - 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.
- $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. - 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.
- $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.
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:
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:
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:
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:
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'
andlayout='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'
andlayout='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 thelayout
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:
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:
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 tofixed
, 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'slayout
attribute is set tocontents
.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'
andlayout='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.
- An Object with the following property:
-
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<K>
-
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.
- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element.
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. -
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.
- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use HeaderTemplateContext.headerText instead.
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. data
any The data object for the current header. 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.
- Deprecated:
-
Since Description 10.0.0
Use HTMLDocument methods to retrieve this element. - Deprecated:
-
Since Description 10.0.0
Use RowTemplateContext.item.data instead. - Deprecated:
-
Since Description 10.0.0
Use RowTemplateContext.item.key instead. - Deprecated:
-
Since Description 10.0.0
Use Top level RowTemplateContext APIs instead.
Properties:
Name Type Description componentElement
Element The <oj-table> custom element. data
any The data for the current row being rendered. 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. mode
"edit" | "navigation" The mode of the row containing the cell. It can be "edit" or "navigation". rowContext
Object Context of the row.