Element: <oj-data-grid>

Oracle® JavaScript Extension Toolkit (JET)
15.0.0
F75903-01

DOM Interface: DataGridElement

Version:
  • 15.0.0
Since:
  • 0.6.0

Category: align-items

Use this class on cells' and headers' className property to align your content vertically.
By default the alignment is center on cells and headers, see other possibilities in the Flex Layout align section for size and flexalign options.

Class template:

.oj-[size]-align-items(-flexalign)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-flexalign)

Value (optional) Name Description
-flex-start Flex Start Flex items are packed toward the start of the line.
-flex-end Flex End Flex items are packed toward the end of the line.
-center Center Flex items are packed toward the center of the line.
-baseline Baseline All participating flex items on the line are aligned such that their baselines align

Category: justify-content

Use this class on cells' and headers' className property to align your content horizontally.
By default the alignment is flex-end on cells and varies on headers, see other possibilities in the Flex Layout justify section for size and flexjustify options.

Class template:

.oj-[size]-justify-content(-flexjustify)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-flexjustify)

Value (optional) Name Description
-flex-start Flex Start Items are at the start.
-flex-end Flex End Items are at the end.
-center Center Items are centered.
-space-between Space Between Space is distributed between items.
-space-around Space Around Space is distributed around items.

Category: depth

Used to style the default header widths and heights. By default the datagrid supports up to depth 7.
If you have headers width depth greater than 7 specify the defaults using the class name description or use apply custom style rules to the headers.

Class template:

.oj-datagrid-depth-[1-7]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [1-7]

Value (required) Name Description
1 1 Datagrid Depth level 1
2 2 Datagrid Depth level 2
3 3 Datagrid Depth level 3
4 4 Datagrid Depth level 4
5 5 Datagrid Depth level 5
6 6 Datagrid Depth level 6
7 7 Datagrid Depth level 7

Category: direction

Direction can be left or right. Use this class on cells' and headers' className property to align your content horizontally to the left or right.
See the Helpers section for details.
This handles the always one direction case that flexjustify does not.

Class template:

.oj-helper-justify-content-[left|right]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [left|right]

Value (required) Name Description
left Left Justify content to left
right Right Justify content to right

Category: padding

Used to style a datagrid cell so that it has no padding or default padding.

Classes:

.oj-datagrid-cell-no-padding
.oj-datagrid-cell-padding

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-data-grid-column-width <length> Data grid column width