datagrid

On a data grid, we can use a function in the cell.class-name attribute to dynamically pass the class name based on row data.

“cellContext” will contain the required information. We can use console.log() to identify the structure.

This can be used for other attributes, like “header.column.class-name” as well on oj-data-grid

This can be used when we want show different style for different rows, like

If we want to highlight top performer in a data set,
or differently show calculated fields
or if we want to show different type with a different color

Sample HTML code:

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 ">
    <h5>Data grid</h5>
    <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="[[ cellClassNameFunc ]]"
      cell.style="width: 200px;">     
    </oj-data-grid>
  </div>
</div>

Sample JS code:

this.cellClassNameFunc = function (cellContext) {
  let cellRowIndex = cellContext.indexes.row;
  let classNameStr = "oj-helper-justify-content ";
  
  // to do styling based on index 
  // if (cellRowIndex % 3 === 0) {
  //   classNameStr += "oj-bg-success-10 oj-text-color-success";
  // } else if (cellRowIndex % 3 === 1) {
  //   classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  // } else {
  //   classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  // }
  
  let key = cellContext.key;
  console.log(cellContext);
  console.log(cellContext.datasource.data[cellRowIndex]);
  let rowData = cellContext.datasource.data.find((x) => x.id === key);
  if (rowData.city === "Delhi" || rowData.city === "Banglore") {
    classNameStr += "oj-bg-success-10 oj-text-color-success";
  } else if (rowData.city === "Hyderabad" || rowData.city === "Kolkata") {
    classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  } else if (rowData.city === "Mumbai" || rowData.city === "Nagpur") {
    classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  }
  
  cellContext.datasource[cellRowIndex];
  
  return classNameStr;
};

Screenshots

Choosing row background color and text color based on city

Choosing row background color and text color based on index

Live application URL ( row style based on city ): https://khalil232.com/apps/ojet-apps/?ojr=data-grid-example

References:

Datagrid js doc for identifying other attributes : https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html

CSS helpers used:

Background-color: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/BackgroundColor.html

Font color: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/Text.html

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