We can enable resize in oj-data-grid by adding the following html code to <oj-data-grid>:
<oj-data-grid
id="datagrid"
style="width:100%;height:400px"
aria-label="My Data Grid"
data='{{ salaryDataADP }}'
header.column.style="[[ headerColStyle ]]"
header.column.resizable.width="enable"
header.column.resizable.height="enable"
header.row.resizable.width="enable"
header.row.resizable.height="enable"
header.column.class-name="oj-helper-justify-content-flex-start"
cell.class-name="oj-helper-justify-content-flex-start"
>
<oj-menu slot="contextMenu" aria-label="Employee Edit">
<oj-option id="resizeWidth" value="Resize Width"
data-oj-command="oj-datagrid-resizeWidth"></oj-option>
<oj-option id="resizeHeight" value="Resize Height"
data-oj-command="oj-datagrid-resizeHeight"></oj-option>
<oj-option id="resizeFitToContent" value="Resize Fit To Content"
data-oj-command="oj-datagrid-resizeFitToContent"></oj-option>
</oj-menu>
</oj-data-grid>
The following attributes on the header will allow resizing. When hovering on a border, the user can resize the row or column height or width.
<oj-data-grid
header.column.resizable.width="enable"
header.column.resizable.height="enable"
header.row.resizable.width="enable"
header.row.resizable.height="enable"
>
</oj-data-grid>
To add an additional right-click menu, we can add the below code. The user can right-click and click on Resize width, and enter a desired width, like 100 or 200.
<oj-menu slot="contextMenu" aria-label="Employee Edit">
<oj-option id="resizeWidth" value="Resize Width"
data-oj-command="oj-datagrid-resizeWidth"></oj-option>
<oj-option id="resizeHeight" value="Resize Height"
data-oj-command="oj-datagrid-resizeHeight"></oj-option>
<oj-option id="resizeFitToContent" value="Resize Fit To Content"
data-oj-command="oj-datagrid-resizeFitToContent"></oj-option>
</oj-menu>
There are other commands available, like below ( see the jsdoc link for more information ). Few features are supported only in latest version of JET
Default Function | data-oj-command value |
---|---|
Resize menu (contains width and height resize) | oj-datagrid-resize |
Sort Row menu (contains ascending and descending sort) | oj-datagrid-sortRow |
Sort Column menu (contains ascending and descending sort) | oj-datagrid-sortCol |
Resize Width | oj-datagrid-resizeWidth |
Resize Height | oj-datagrid-resizeHeight |
Resize Fit To Content | oj-datagrid-resizeFitToContent |
Sort Row Ascending | oj-datagrid-sortRowAsc |
Sort Row Descending | oj-datagrid-sortRowDsc |
Sort Column Ascending | oj-datagrid-sortColAsc |
Sort Column Descending | oj-datagrid-sortColDsc |
Cut (for reordering) | oj-datagrid-cut |
Paste (for reordering) | oj-datagrid-paste |
CutCells (for data transferring) | oj-datagrid-cutCells |
CopyCells (for data transferring) | oj-datagrid-copyCells |
PasteCells (for data transferring) | oj-datagrid-pasteCells |
Fill | oj-datagrid-fillCells |
Select Multiple Cells on Touch Device | oj-datagrid-discontiguousSelection |
Freeze Columns | oj-datagrid-freezeCol |
Freeze Rows | oj-datagrid-freezeRow |
Unfreeze Columns | oj-datagrid-unfreezeColumn |
Unfreeze Rows | oj-datagrid-unfreezeRow |
Hide Columns | oj-datagrid-hideCol |
Unhide Columns | oj-datagrid-unhideCol |
Screenshots
![](https://i0.wp.com/khalil232.com/wp-content/uploads/2023/12/image.png?resize=652%2C467&ssl=1)
![](https://i0.wp.com/khalil232.com/wp-content/uploads/2023/12/image-1.png?resize=900%2C453&ssl=1)
Live application URL: https://khalil232.com/apps/ojet-apps/?ojr=data-grid-example
References:
helper classes: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/Helpers.html
jet cookbook: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataGrid&demo=resizing
link for oj-data-commands: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html#contextmenu-section