Element: <oj-c-table>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 17.1.0
Module:
  • table

QuickNav

Slots

Attributes

Events

Methods

Type Definitions

Other Topics


JET Table Component

Description: The Table component presents data in a tabular format with highly interactive features.

Data

The JET Table gets its data from a DataProvider.

Example of data provider content

<oj-c-table data="[[dataProvider]]"></oj-c-table>

Coming Features

These features will be available in forthcoming versions

  • Sorting
  • Column Resizing
  • Drag and Drop
  • Editing
  • Add Row
  • Page Scrolling
  • First Selected Row
  • Sticky Columns
  • Edge To Edge Padding
  • Tree Data
  • Context menu
  • Per Row Selectable
  • Group By Table

Keyboard End User Information

Target Key Action
Data Cell Tab Move browser focus to next tab stop on the page.
Shift + Tab Move browser focus to previous tab stop on the page.
F2 If there is focusable content in the current cell, move browser focus to the first focusable element in the current cell. No action otherwise.
Esc No action.
Up Arrow Focus the cell above the current cell.
Down Arrow Focus the cell below the current cell.
Left Arrow Focus the cell to the left of the current cell.
Right Arrow Focus the cell to the right of the current cell.
Shift + Up Arrow If multiple row selection is enabled, begin or extend a range selection to include the next row in the given direction without changing the currently focused cell. No action otherwise.
Shift + Down Arrow If multiple row selection is enabled, begin or extend a range selection to include the next row in the given direction without changing the currently focused cell. No action otherwise.
Space If row selection is enabled, toggle the selection state of the current row. Additionally, if row actions are enabled, trigger an ojRowAction event. No action otherwise.
Enter If there is focusable content in the current cell, move browser focus to the first focusable element in the current cell. Additionally, if row actions are enabled, trigger an ojRowAction event. No action otherwise.
Home Focus the first cell in the current row.
End Focus the last cell in the current row.
Ctrl/Cmd + Home Focus the first cell in the first row.
Ctrl/Cmd + End Focus the last cell in the last available row.
Header Cell Tab Move browser focus to next tab stop on the page.
Shift + Tab Move browser focus to previous tab stop on the page.
F2 If there is focusable content in the current header cell, move browser focus to the first focusable element in the current header cell. No action otherwise.
Esc No action.
Up Arrow No action.
Down Arrow Focus the cell below the current cell.
Left Arrow Focus the header cell to the left of the current cell.
Right Arrow Focus the header cell to the right of the current cell.
Shift + Left Arrow If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused header cell. No action otherwise.
Shift + Right Arrow If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused header cell. No action otherwise.
Space If column selection is enabled and the current column is selectable, toggle the selection state of the current column. No action otherwise.
Enter If there is focusable content in the current header cell, move browser focus to the first focusable element in the current header cell. No action otherwise.
Home Focus the first header cell.
End Focus the last header cell.
Ctrl/Cmd + Home Focus the first cell in the first row.
Ctrl/Cmd + End Focus the last cell in the last available row.
Footer Cell Tab Move browser focus to next tab stop on the page.
Shift + Tab Move browser focus to previous tab stop on the page.
F2 If there is focusable content in the current footer cell, move browser focus to the first focusable element in the current footer cell. No action otherwise.
Esc No action.
Up Arrow Focus the cell above the current cell.
Down Arrow No action.
Left Arrow Focus the footer cell to the left of the current cell.
Right Arrow Focus the footer cell to the right of the current cell.
Shift + Left Arrow If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused footer cell. No action otherwise.
Shift + Right Arrow If multiple column selection is enabled, begin or extend a range selection to include the next column in the given direction without changing the currently focused footer cell. No action otherwise.
Space If column selection is enabled and the current column is selectable, toggle the selection state of the current column. No action otherwise.
Enter If there is focusable content in the current footer cell, move browser focus to the first focusable element in the current footer cell. No action otherwise.
Home Focus the first footer cell.
End Focus the last footer cell.
Ctrl/Cmd + Home Focus the first cell in the first row.
Ctrl/Cmd + End Focus the last cell in the last available row.
No Data Cell Tab Move browser focus to next tab stop on the page.
Shift + Tab Move browser focus to previous tab stop on the page.
F2 If there is focusable content in the no data cell, move browser focus to the first focusable element in the no data cell. No action otherwise.
Esc No action.
Up Arrow Focus the first header cell.
Down Arrow If footer cells are rendered, focus the first footer cell. No action otherwise.
Left Arrow No action.
Right Arrow No action.
Space No action.
Enter If there is focusable content in the no data cell, move browser focus to the first focusable element in the no data cell. No action otherwise.
Focused Cell Content Tab Move browser focus to the next focusable element in the table. If that element is already focused, move browser focus to the first focusable element in the table.
Shift + Tab Move browser focus to the previous focusable element in the table. If that element is already focused, move browser focus to the last focusable element in the table.
F2 Restore focus to the current cell.
Esc Restore focus to the current cell.
Space No action.
Enter No action.

Touch End User Information

Target Gesture Action
Data Cell Tap Focus the data cell. Additionally, if row selection is enabled and the current row is selectable, toggle the selection state of the current row. Additionally, if row actions are enabled, trigger an ojRowAction event.
Header Cell Tap Focus the header cell. Additionally, if column selection is enabled and the current column is selectable, toggle the selection state of the current column.
Footer Cell Tap Focus the footer cell. Additionally, if column selection is enabled and the current column is selectable, toggle the selection state of the current column.
No Data Cell Tap Focus the no data cell.

Accessibility

The Table implements the grid role for accessibility. This enables the Table to be compatible with the special 'table reading' commands that most assistive technologies provide in addition to the standard keyboard interactions described in the Keyboard End User Information section above.

An application is required to include contextual information to make the Table accessible for assistive technologies by providing one or more the following properties as appropriate:

  • aria-labelledby
  • aria-label

Additionally, an application should specify at least 1 accessible row header per row by providing a value for the row.accessible-row-header attribute. The information in the cell(s) specified will be used by assistive technologies to convey basic contextual information for the focused row. For example, if a user is arrowing up or down in an 'Amount Due' column, having something like '$500' read out does not provide any helpful information as to who or what that amount corresponds to. If an 'Account Holder' column is specified as an accessible row header, then something like 'Larry Ellison, $500' would be read out instead. Providing this additional row context is essential for creating accessible tables.

Managing Tab Stops

The Table does not manipulate the tabindex attribute of cell contents. For oj-c components specified as children of the Table, tabindex management will happen automatically. Otherwise, applications must specifically set the tabindex of tabbable child elements based on the isTabbable property of the template context.

However, there may be cases where applications do not have access to the tabbable elements themselves. For example, a third-party component that does not support JET's new tabindex management. In that case, applications can specify the data-oj-manage-tabs attribute on any tabbable elements (or any one of their ancestors) to ensure the Table remains a single tab stop for accessibility purposes.

Custom Colors

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

Background Color

The Table's background color is managed via the --oj-current-bg-color CSS variable. If a different background color is desired, one can be set by adding a background color class on the Table. The Table does not support background colors with transparencies. See the 'Background Color' cookbook demo for examples.

Custom Data Attributes

Table supports the following custom data attributes.

Name Description
data-oj-as

Provides an alias for a specific template instance and has the same subproperties as the $current variable.

<oj-c-table id="table">
  <template slot="cellTemplate" data-oj-as="cell">
  </template>
</oj-c-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, the Table will not select the row or trigger an action event when a user clicks on the button.

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

The Table does not manipulate the tabindex attribute of cell contents. For oj-c elements specified as children of the Table, tabindex management will happen automatically. Otherwise, applications must specifically set the tabindex of tabbable child elements based on the isTabbable property of the template context.

However, there may be cases where applications do not have access to the tabbable elements themselves. For example, a third-party component that does not support JET's new tabindex management. In that case, applications can specify the data-oj-manage-tabs attribute on any tabbable elements (or any one of their ancestors) to ensure the Table remains a single tab stop for accessibility purposes.

<oj-c-table>
  <template slot="cellTemplate1" data-oj-as="cell">
    <a href="#" :tabindex="[[cell.isTabbable ? 0 : -1]]">Link</a>
  </template>
  <template slot="cellTemplate2" data-oj-as="cell">
    <some-tabbable-component data-oj-manage-tabs></some-tabbable-component>
  </template>
</oj-c-table>


Usage

Signature:

interface CTableElement<K extends string | number,D,C extends string>

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CTableElement } from "oj-c/table";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/table";

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.


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.

cellTemplate

The template for rendering each data cell in the table. When a column.template is specified that will take precedence over this template. The slot content must be a template element. The content of the template should not include the td element, only its contents. The template has access to the context CellTemplateContext via $current or the aliased name for $current set via data-oj-as.
Properties of $current:
Name Type Argument Description
columnKey C Column key
data D[keyof D] <optional>
 Data for the cell, derived from the column.field property
isTabbable boolean Whether the cell is in tabbable mode or not.
item Item.<K, D> Row item containing data and metadata

footerTemplate

The template for rendering each footer cell in the table. When a column.footerTemplate is specified that will take precedence over this template. The slot content must be a template element. The content of the template should not include the td element, only its contents. The template has access to the context FooterTemplateContext via $current or the aliased name for $current set via data-oj-as.
Properties of $current:
Name Type Argument Description
footerText string <optional>
 Column footer text
isTabbable boolean Whether the cell is in tabbable mode or not.
key C Column key

headerTemplate

The template for rendering each header cell in the table. When a column.headerTemplate is specified that will take precedence over this template. The slot content must be a template element. The content of the template should not include the th element, only its contents. The template has access to the context HeaderTemplateContext via $current or the aliased name for $current set via data-oj-as.
Properties of $current:
Name Type Argument Description
headerText string <optional>
 Column header text
isTabbable boolean Whether the cell is in tabbable mode or not.
key C Column key

noData

The template for rendering content when the table has an empty data set. The slot content must be a template element. If not specified then a default no data message will be displayed.
Properties of $current:
Name Type Description
isTabbable boolean Whether the cell is in tabbable mode or not.

DynamicSlots.CellTemplateContext (Dynamic)

Context passed into the cell template specified in the column.template property.

Note: For additional information see .

Properties of $current:
Name Type Argument Description
columnKey C Column key
data D[keyof D] <optional>
 Data for the cell, derived from the column.field property
isTabbable boolean Whether the cell is in tabbable mode or not.
item Item.<K, D> Row item containing data and metadata

DynamicSlots.FooterTemplateContext (Dynamic)

Context passed into the footer template specified in the column.footerTemplate property.

Note: For additional information see .

Properties of $current:
Name Type Argument Description
footerText string <optional>
 Column footer text
isTabbable boolean Whether the cell is in tabbable mode or not.
key C Column key

DynamicSlots.HeaderTemplateContext (Dynamic)

Context passed into the header template specified in the column.headerTemplate property.

Note: For additional information see .

Properties of $current:
Name Type Argument Description
headerText string <optional>
 Column header text
isTabbable boolean Whether the cell is in tabbable mode or not.
key C Column key

Attributes

column-order :Array<C>

Controls the displayed columns and their order. An array of column keys that represents the displayed columns and the order to display them in. If not set, all columns will be displayed in the order returned by Object.keys(columns).
Supports writeback:
  • true
Names
Item Name
Property columnOrder
Property change event columnOrderChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-order-changed

column-widths :Record<C, number>

The desired widths of the specified table columns. A record mapping columns keys to numbers representing pixel widths for each column. Values should only be provided when a specific width is desired for a column as values provided will override the Table's normal column sizing calculations. Applications should avoid setting widths for every column in most cases as doing so will likely result in a non-responsive layout.
Supports writeback:
  • true
Names
Item Name
Property columnWidths
Property change event columnWidthsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-widths-changed

columns :Record.<C, oj-c.Table.Column.<K, D>>

The set of columns that can be displayed in the Table. If no columns-order is specified, all columns specified will be displayed in the order returned by Object.keys(columns). Otherwise only the columns specified in the columns-order value will be displayed.
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

(readonly) current-cell :(oj-c.Table.NoDataCell|oj-c.Table.DataCell.<K, C>|oj-c.Table.HeaderCell.<C>|oj-c.Table.FooterCell.<C>)

The cell currently being used as the target for keyboard gestures made on the Table. This value will be updated as a user interacts with the Table. It will not be updated due to the Table losing browser focus alone, but may be updated due to the Table receiving browser focus. The current cell can be programatically updated by providing a new value for the current-cell-override attribute.
Supports writeback:
  • true
Names
Item Name
Property currentCell
Property change event currentCellChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-current-cell-changed

current-cell-override :(oj-c.Table.NoDataCell|oj-c.Table.DataCellRowOverride.<K, C>|oj-c.Table.DataCellColumnOverride.<K, C>|oj-c.Table.DataCellTypeOverride.<K, C>|oj-c.Table.HeaderCellColumnOverride.<C>|oj-c.Table.HeaderCellTypeOverride.<C>|oj-c.Table.FooterCellColumnOverride.<C>|oj-c.Table.FooterCellTypeOverride.<C>)

The cell override to apply to the current cell of the Table. In order for this property to be honored, a new object instance must be set. Any or all aspects of a valid DataCell, HeaderCell, or FooterCell can be overridden. For instance, if the current cell is a data cell in the third row and second column, providing an override with only type: 'header' will result in the second column's header cell becoming current. Providing an override with only columnKey: [fourth column key] instead will result in the data cell in the third row and fourth column becoming current.
Names
Item Name
Property currentCellOverride
Property change event currentCellOverrideChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-current-cell-override-changed

data :DataProvider.<K, D>

The data provider for Table.
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

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

Controls the display of the Table's horizontal gridlines.
Supported Values:
Value Description
disabled Do not display horizontal gridlines
enabled Display horizontal gridlines
Default Value:
  • "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"

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

row :{ accessibleRowHeader?: C | C[] | ((context: oj-c.Table.RowContext<K, D>) => C | C[]); }

A subset of attributes for controlling certain behaviors on a per row basis.
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

scroll-policy-options :{ fetchSize?: number; }

Options related to the Table's fetching and scrolling behaviors.
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

scroll-policy-options.fetch-size :number

The number of records the Table will request during each data fetch.
Default Value:
  • 25
Names
Item Name
Property scrollPolicyOptions.fetchSize

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

Controls the display of the Table's select all control when multiple row selection is enabled.
Supported Values:
Value Description
hidden Do not display the select all control
visible Display the select all control
Default Value:
  • "visible"
Names
Item Name
Property selectAllControl
Property change event selectAllControlChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-select-all-control-changed

selected :{ column?: ImmutableKeySet<C>; row?: ImmutableKeySet<K>; }

The selected rows and/or columns.
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

selection-mode :{ column?: 'none' | 'single' | 'multiple'; row?: 'none' | 'single' | 'multiple'; }

Specifies whether row and/or column selection gestures are enabled on the Table, and the cardinality of each (single/multiple/none). If single or multiple is specified, selection gestures will be enabled. Otherwise, selection gestures will be disabled. This attribute has no effect on the Table's selection styling as styling will be applied to any rows and/or columns specified by the selected attribute regardless of the type of selection gestures enabled. Changing the value of this attribute will not affect the value of the selected attribute.
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

selection-mode.column :"none"|"single"|"multiple"

Specifies whether column selection gestures are enabled on the Table.
Supported Values:
Value Description
multiple Any number of columns can be selected via user gestures.
none Column selection gestures are disabled.
single A maximum of 1 column can be selected via user gestures.
Default Value:
  • "none"
Names
Item Name
Property selectionMode.column

selection-mode.row :"none"|"single"|"multiple"

Specifies whether row selection gestures are enabled on the Table.
Supported Values:
Value Description
multiple Any number of rows can be selected via user gestures.
none Row selection gestures are disabled.
single A maximum of 1 row can be selected via user gestures.
Default Value:
  • "none"
Names
Item Name
Property selectionMode.row

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

Controls the display of the Table's vertical gridlines.
Supported Values:
Value Description
disabled Do not display vertical gridlines
enabled Display vertical gridlines
Default Value:
  • "disabled"
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

Events

ojRowAction

Triggered when a user performs an action gesture on a row. Action gestures include when a user clicks (or taps) anywhere in a data cell, or presses the enter or space keys while a data cell or its content has browser 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 oj-c.Table.RowContext.<K, D> Row context

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void

Type Definitions

CellPadding

Specifies whether padding is enabled or disabled on specific sides of a cell.
Properties:
Name Type Argument Description
bottom "disabled" | "enabled" <optional>
 Specifies whether bottom padding is enabled or disabled.
end "disabled" | "enabled" <optional>
 Specifies whether end padding (right in ltr locales, left in rtl locales) is enabled or disabled.
start "disabled" | "enabled" <optional>
 Specifies whether start padding (left in ltr locales, right in rtl locales) is enabled or disabled.
top "disabled" | "enabled" <optional>
 Specifies whether top padding is enabled or disabled.

Column<K,D>

Specifies the properties of a column.
Properties:
Name Type Argument Description
field keyof D <optional>
 Specifies the field attribute of the row item data that is mapped to the column.
footerPadding string | oj-c.Table.CellPadding <optional>
 Specifies padding for the footer cell in this column. Valid string values include 'enabled' and 'disabled'. Setting either 'enabled' or 'disabled' will apply to all sides of the footer cell, while providing an instance of CellPadding will only apply to the specified sides of the footer cell.
footerTemplate string <optional>
 The name of the slot used to specify the template for rendering the footer cell in the column. The slot content must be a template element. The content of the template should not include the td element, only its contents. The template has access to the context FooterTemplateContext via $current or the aliased name for $current set via data-oj-as.
footerText string <optional>
 Text to display in the footer cell of the column
footerTooltip "disabled" | "enabled" <optional>
 Specifies whether the default tooltip is enabled for the footer cell in this column. Valid string values include 'enabled' and 'disabled'.
headerPadding string | oj-c.Table.CellPadding <optional>
 Specifies padding for the header cell in this column. Valid string values include 'enabled' and 'disabled'. Setting either 'enabled' or 'disabled' will apply to all sides of the header cell, while providing an instance of CellPadding will only apply to the specified sides of the header cell.
headerTemplate string <optional>
 The name of the slot used to specify the template for rendering the header cell in the column. The slot content must be a template element. The content of the template should not include the th element, only its contents. The template has access to the context HeaderTemplateContext via $current or the aliased name for $current set via data-oj-as.
headerText string <optional>
 Text to display in the header cell of the column.
headerTooltip "disabled" | "enabled" <optional>
 Specifies whether the default tooltip is enabled for the header cell in this column. Valid string values include 'enabled' and 'disabled'.
horizontalAlignment "center" | "end" | "start" | "left" | "right" <optional>
 The horizontal alignment of the column.
maxWidth number <optional>
 The maximum width in pixels of the column. This value is used during initial render, and does not affect the ability to resize the column. This value is applicable when either, layout='fixed' or layout='contents'.
minWidth number <optional>
 The minimum width in pixels of the column. This value is used during initial render, and does not affect the ability to resize the column. This value is applicable when either, layout='fixed' or layout='contents'. If not set and layout='fixed' a default minimum width will be determined by the theme.
padding string | oj-c.Table.CellPadding | (context: oj-c.Table.RowContext<K, D>) => "disabled" | "enabled" | oj-c.Table.CellPadding <optional>
 Specifies padding for the data cells in this column. Valid string values include 'enabled' and 'disabled'. Setting either 'enabled' or 'disabled' will apply to all sides of the data cells, while providing an instance of CellPadding will only apply to the specified sides of the data cells.
sticky "disabled" | "enabled" <optional>
 Whether this column should be prevented from scrolling out of view.
template string <optional>
 The name of the slot used to specify the template for rendering data cells in the column. The slot content must be a template element. The content of the template should not include the td element, only its contents. The template has access to the context CellTemplateContext via $current or the aliased name for $current set via data-oj-as.
tooltip string | (context: oj-c.Table.RowContext<K, D>) => "disabled" | "enabled" <optional>
 Specifies whether default tooltips are enabled for data cells in this column. Valid string values include 'enabled' and 'disabled'.
weight number <optional>
 Specifies the relative sizing weight of the column. If not set a default of 1 is assumed. This must be a positive number greater than or equal to 1. Its value 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.

DataCell<K,C>

Specifies a data cell.
Properties:
Name Type Description
columnKey string | C Specifies the column key of the cell. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
rowKey K Specifies the row key of the cell.
type "data" Specifies the the type of the cell.

DataCellColumnOverride<K,C>

Specifies a column override for a data cell. If only a columnKey is provided, using this as an override will attempt to keep the the current row the same and only change the current column. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
rowKey K <optional>
 Specifies the row key of the cell override.
type "data" <optional>
 Specifies the type of the cell override.

DataCellRowOverride<K,C>

Specifies a row override for a data cell. If only a rowKey is provided, using this as an override will attempt to keep the the current column the same and only change the current row. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C <optional>
 Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
rowKey K Specifies the row key of the cell override.
type "data" <optional>
 Specifies the type of the cell override.

DataCellTypeOverride<K,C>

Specifies a type override for a data cell. If only a type is provided, using this as an override will attempt to keep the the current column the same and change to the first data row. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C <optional>
 Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
rowKey K <optional>
 Specifies the row key of the cell override.
type "data" Specifies the type of the cell override.

FooterCell<C>

Specifies a footer cell.
Properties:
Name Type Description
columnKey string | C Specifies the column key of the cell. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
type "footer" Specifies the type of the cell.

FooterCellColumnOverride<C>

Specifies a column override for a footer cell. If only a columnKey is provided, using this as an override will only change the current column. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
type "footer" <optional>
 Specifies the type of the cell override.

FooterCellTypeOverride<C>

Specifies a type override for a footer cell. If only a type is provided, using this as an override will attempt to keep the the current column the same and make a footer cell current. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C <optional>
 Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
type "footer" Specifies the type of the cell override.

HeaderCell<C>

Specifies a header cell.
Properties:
Name Type Description
columnKey string | C Specifies the column key of the cell. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
type "header" Specifies the type of the cell.

HeaderCellColumnOverride<C>

Specifies a column override for a header cell. If only a columnKey is provided, using this as an override will only change the current column. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
type "header" <optional>
 Specifies the type of the cell override.

HeaderCellTypeOverride<C>

Specifies a type override for a header cell. If only a type is provided, using this as an override will attempt to keep the the current column the same and make a header cell current. See the current-cell-override attribute for more details.
Properties:
Name Type Argument Description
columnKey string | C <optional>
 Specifies the column key of the cell override. Valid values include 'oj-c-table_selection' when multiple row selection is enabled.
type "header" Specifies the type of the cell override.

NoDataCell

Specifies a no data cell.
Properties:
Name Type Description
type "noData" Specifies the type of the cell.

RowContext<K,D>

Context used to specify the row of a Table.
Properties:
Name Type Description
item Item.<K, D> Row item containing data and metadata