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