Element: <oj-table>

Custom Colours

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

Performance

Data Set Size

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

Cell Content

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

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

Layout Attribute

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

Flex Layouts

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

Animation

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

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

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

Custom Data Attributes

Table supports the following custom data attributes. Description Example data-oj-as Provides an alias for a specific template instance and has the same subproperties as the $current variable.

<oj-table id="table">
  <template slot="cellTemplate" data-oj-as="cell">
  </template>
</oj-table>

data-oj-clickthrough

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

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

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

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:

Using JET Custom Elements

Using JET with TypeScript

JET Module Loading

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.

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>

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>

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>

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>

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.

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.

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.

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

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

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

$current - An object that contains information for the current cell being rendered (See the table below for a list of properties available on $current)

alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

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.

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

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

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

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

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.

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-accessibility-changed

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.

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-add-row-display-changed

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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-as-changed

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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-columns-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-columns-default-changed 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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-current-row-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-data-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-display-changed 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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-dnd-changed 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. 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. A callback function that receives the "drag" event as its argument.

function(event)

Parameters:

event : The DOM event object A callback function that receives the "dragend" event as its argument.

function(event)

Parameters:

event : The DOM event object
A callback function that receives the "dragstart" event and context information as its arguments.

function(event, context)

Parameters:

event : The DOM event object

context : oj.ojTable.DragRowContext object with the following properties:


    rows

: An array of objects, with each object representing the data of one selected row in the structure below: data The raw row data index The index for the row key The key value for the row This function can set its own data and drag image as needed. If dataTypes is specified, event.dataTransfer is already populated with the default data when this function is invoked. If dataTypes is not specified, this function must call event.dataTransfer.setData to set the data or else the drag operation will be cancelled. In either case, the drag image is set to an image of the selected rows visible on the table. 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


    rowIndex

: The index of the row being dropped on

See the dnd attribute for usage examples. A callback function that receives the "dragenter" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data can be accepted. Calling event.preventDefault() is required by HTML5 Drag and Drop to indicate acceptance of data.

If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. If there is a match, JET will call event.preventDefault() to indicate that the data can be accepted. A callback function that receives the "dragleave" event and context information as its arguments.

function(event, context) A callback function that receives the "dragover" event and context information as its arguments.

function(event, context)

Similar to dragEnter, this function should call event.preventDefault() to indicate the dragged data can be accepted. If dataTypes is specified, it will be matched against the drag data types to determine if the data is acceptable. A required callback function that receives the "drop" event and context information as its arguments.

function(event, context)

This function should call event.preventDefault() to indicate the dragged data is accepted.

If the application needs to look at the data for the row being dropped on, it can use the getDataForVisibleRow method. 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. 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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-edit-mode-changed The information about the row that is currently being edited. The value of this property contains:

rowKey - The key of the currently edited row.

rowIndex - The index of the currently edited row.

Note that the row the is currently being edited is also the current keyboard focus row. Therefore, when this value is updated, the value of currentRow is updated also. In addition, editRow update can be cancelled if beforeCurrentRow event is vetoed. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-edit-row-changed

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

key - the key of the first selected row.

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

If no rows are selected then this property will return an object with both key and data properties set to null. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-first-selected-row-changed

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-horizontal-grid-visible-changed

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.

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-layout-changed

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-row-changed

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

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-row-renderer-changed

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. 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". 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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-scroll-policy-changed

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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-scroll-policy-options-changed

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.

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.

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.

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. 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. 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. 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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-scroll-position-changed

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. 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". Table will only scroll to a position based on a row key if either the row has already been fetched or if the associated DataProvider supports 'immediate' iterationSpeed for 'fetchFirst' capability. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-scroll-to-key-changed

Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-select-all-control-changed

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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. )


   on-selected-changed

Specifies the current selections in the table. Can be either an index or key value. When both are specified, the index is used as a hint. Returns an array of range objects, or an empty array if there's no selection. Note that this attribute has been replaced by selected , and it is recommended that applications use the selected attribute going forward.

Selection range object has following subproperties: startIndex, startKey - In case of row selection, startIndex and startKey refers to first row(which is near to table header) in range selection.
In case of column selection, startIndex and startKey refers to first column in range selection. endIndex, endKey - In case of row selection, endIndex and endKey refers to last row(which is far from table header) in range selection.
In case of column selection, endIndex and endKey refers to last column in range selection. startIndex, startKey, endIndex and endKey are of type object. In case of row selection, these objects will have 'row' subpropety. In case of column selection, objects will have 'column' subproperty. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-selection-changed Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-selection-mode-changed

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

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

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

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

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

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

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

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

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

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

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

See selectionMode for information on how to enable or disable selection on the Table. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-selection-required-changed

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. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-translations-changed

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

See the translations attribute for usage examples.

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

See the translations attribute for usage examples.

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

See the translations attribute for usage examples.

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

See the translations attribute for usage examples.

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

See the translations attribute for usage examples. Property change listener attribute ( must be of type function, see Events and Listeners for additional information. ) on-vertical-grid-visible-changed

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:

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. Triggered when the default animation of a particular action is about to start. The default animation can be cancelled by calling


   event.preventDefault

. If the event listener calls


   event.preventDefault

to cancel the default animation, it must call the


   event.detail.endCallback

function when it finishes its own animation handling. Row animations will only be triggered for rows in the current viewport and an event will be triggered for each cell in the animated row. 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. 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. 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. 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. 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. 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

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 .

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 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. 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. 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. A function that renders the content of the footer cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the footer data as a string.

The function should return one of the following:

An Object with the following property:

insert: HTMLElement | string - A string or a DOM element of the content inside the footer.

undefined: If the developer chooses to manipulate the footer element directly, the function should return undefined.

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

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

$current - An object that contains information for the current footer being rendered. (Refer the Table in FooterTemplateContext for a list of properties available on $current)

alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

A function that renders the content of the header. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the header data as a string.

The function should return one of the following:

An Object with the following property:

insert: HTMLElement | string - A string or a DOM element of the content inside the header.

undefined: If the developer chooses to manipulate the header element directly, the function should return undefined.

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

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

$current - an object that contains information for the current header being rendered. (Refer the Table in HeaderTemplateContext for a list of properties available on $current)

alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

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

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

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

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit. The string keyword 'auto' indicates that the minimum width will be determined by the theme and the layout attribute.

A function that renders the content of the cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the cell data as a string.

The function should return one of the following:

An Object with the following property:

insert: HTMLElement | string - A string or a DOM element of the content inside the cell.

undefined: If the developer chooses to manipulate the cell element directly, the function should return undefined.

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

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

$current - An object that contains information for the current cell being rendered (Refer the Table in CellTemplateContext for a list of properties available on $current)

alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

Specifies the relative sizing weight of the column. This must be a positive number greater than or equal to 1. It does not affect the ability to resize the column. When the Table's


   layout

attribute is set to


   fixed

, this value is used to determine the relative width of the column compared to the other columns. For example, a column with a weight of 2 will have twice as much space allocated to it as a column with a weight of 1. This value has no effect when the Table's


   layout

attribute is set to


   contents

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

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

A function that renders the content of the footer cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the footer data as a string.

The function should return one of the following:

An Object with the following property:

insert: HTMLElement | string - A string or a DOM element of the content inside the footer.

undefined: If the developer chooses to manipulate the footer element directly, the function should return undefined.

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

$current - An object that contains information for the current footer being rendered. (Refer the Table in FooterTemplateContext for a list of properties available on $current)

alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

Deprecated:

A function that renders the content of the header. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the header data as a string.

The function should return one of the following:

An Object with the following property:

insert: HTMLElement | string - A string or a DOM element of the content inside the header.

undefined: If the developer chooses to manipulate the header element directly, the function should return undefined.

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

$current - an object that contains information for the current header being rendered. (Refer the Table in HeaderTemplateContext for a list of properties available on $current)

alias - if data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

Deprecated:

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.

User can pass any size unit as part of string value(20rem, 30%, 10px, etc.). If units are not included or number value is aasigned then pixels will be used as the size unit. The string keyword 'auto' indicates that the default minimum width will be determined by the theme and the layout attribute.

A function that renders the content of the cell. The function takes a context argument, provided by the Table. If no renderer is specified, the Table will treat the cell data as a string.

The function should return one of the following:

An Object with the following property:

insert: HTMLElement | string - A string or a DOM element of the content inside the cell.

undefined: If the developer chooses to manipulate the cell element directly, the function should return undefined.

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

$current - An object that contains information for the current cell being rendered (Refer the Table in CellTemplateContext for a list of properties available on $current)

alias - If data-oj-as attribute was specified, the value will be used to provide an application-named alias for $current.

Deprecated:

Specifies the relative sizing weight of the column. This must be a positive number greater than or equal to 1. It does not affect the ability to resize the column. When the Table's


   layout

attribute is set to


   fixed


   layout

attribute is set to


   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 array of objects, with each object representing the data of one selected row in the structure below.

Properties

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. 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. Documentation generated by JSDoc 3.4.3 on Fri Jul 14 2023 17:43:58 GMT+0000 (Coordinated Universal Time)

Index

Concepts

Elements

Non-Element API

Modules

Non-Element Styling

Globals

Custom Colours

Data Set Size

Cell Content

Layout Attribute

Flex Layouts

Typescript Import Format

Example

Example

Example

Example

Properties:

Properties