
# Changing screen display values

RealGrid provides several functions that can change the values displayed on the screen regardless of the actual data value.
This function only changes the values displayed on the screen, not the actual data values.  

`※ You should not perform time-consuming operations or value-changing operations such as setValue() inside displayCallback.`  

1. Change using regular expressions
2. Change using displayCallback
3. Change using lookupDisplay, which can change the code value to a label value and display it.

This demo only explains steps 1 and 2.
Please refer to the link below for the lookupDisplay function.

* [Lookup column](/guides/cell-components/lookup-column)
* [Lookup tree](/guides/cell-components/lookup-tree)
* Dropdown editor in [Dropdown editor](/guides/editor/dropdown-editor)

```js
const fields = [{
  "fieldName": "OrderID",
  "dataType": "text"
},
{
  "fieldName": "CustomerID",
  "dataType": "text"
},
{
  "fieldName": "EmployeeID",
  "dataType": "text"
},
{
  "fieldName": "OrderDate",
  "dataType": "datetime",
  "datetimeFormat": "yyyy-MM-dd",
  "amText": "AM",
  "pmText": "PM"
},
{
  "fieldName": "CompanyName",
  "dataType": "text"
},
{
  "fieldName": "Country",
  "dataType": "text"
},
{
  "fieldName": "Phone",
  "dataType": "text"
},
{
  "fieldName": "ProductName",
  "dataType": "text"
},
{
  "fieldName": "QuantityPerUnit",
  "dataType": "text"
},
{
  "fieldName": "Quantity",
  "dataType": "number"
},
{
  "fieldName": "UnitPrice",
  "dataType": "number"
}];

const columns = [{
  "name": "Country",
  "fieldName": "Country",
  "width": "100",
  "header": {
    "text": "Country"
  }
}, {
  "name": "CompanyName",
  "fieldName": "CompanyName",
  "width": "120",
  "header": {
    "text": "Company Name"
  }
}, {
  "name": "OrderID",
  "fieldName": "OrderID",
  "width": "150",
  "header": {
    "text": "Regex",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "editMask": "0000-0000-0000-0000"
    }
  },
  "textFormat": "([0-9]{4})([0-9]{4})([0-9]{4})([0-9]{4});$1-$2-$3-$4"
}, {
  "name": "OrderID1",
  "fieldName": "OrderID",
  "width": "150",
  "header": {
    "text": "displayCallback",
    "styleName": "orange-column"
  }, 
  "editor": {
    "mask": {
      "editMask": "0000-0000-0000-0000"
    }
  },
  "displayCallback": function(grid, index, value) {
    var tmp = '';
    tmp += value.substr(0, 4);
    tmp += '-';
    tmp += value.substr(4, 4);
    tmp += '-****-****';

    return tmp;
  }
}, {
  "name": "OrderDate",
  "fieldName": "OrderDate",
  "width": "130",
  "header": {
    "text": "Order Date"
  }
}, {
  "name": "CustomerID",
  "fieldName": "CustomerID",
  "width": "90",
  "header": {
    "text": "Customer ID"
  }
}, {
  "name": "EmployeeID",
  "fieldName": "EmployeeID",
  "width": "90",
  "header": {
    "text": "Employee ID"
  },
}, {
  "name": "Phone",
  "fieldName": "Phone",
  "width": "90",
  "renderer": {
    "type": "button"
  },
  "header": {
    "text": "Phone"
  }
}, {
  "name": "ProductName",
  "fieldName": "ProductName",
  "width": "200",
  "header": {
    "text": "Product Name"
  }
}, {
  "name": "QuantityPerUnit",
  "fieldName": "QuantityPerUnit",
  "width": "100",
  "header": {
    "text": "Quantity / Unit"
  }
}, {
  "name": "Quantity",
  "fieldName": "Quantity",
  "width": "100",
  "header": {
    "text": "Quantity"
  },
  "footer": {
    "expression": "sum",
    "numberFormat": "#,##0"
  }
}, {
  "name": "UnitPrice",
  "fieldName": "UnitPrice",
  "width": "100",
  "header": {
    "text": "Unit Price"
  },
  "footer": {
    "expression": "avg",
    "numberFormat": "#,##0.00"
  }
}];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  stateBar: {
    visible: false
  },
  footer: {
    height: 40
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data.slice(0, 10));
        
        grid.setValue(0, "OrderID", "4017956479311942");
        grid.setValue(1, "OrderID", "3537454864902429");
        grid.setValue(2, "OrderID", "3574848246092110");
        grid.setValue(3, "OrderID", "3571523163079340");
        grid.setValue(4, "OrderID", "3746227853102431");
        grid.setValue(5, "OrderID", "5602245880215027");
        grid.setValue(6, "OrderID", "6709735293733863");
        grid.setValue(7, "OrderID", "3573722642979827");
        grid.setValue(8, "OrderID", "6759123799705660");
        grid.setValue(9, "OrderID", "2016571419050795");
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```


#### Regular expression expression

```js
var columns = [
   ...
{
   "name": "OrderID",
   "fieldName": "OrderID",
   "width": "150",
   "header": {
     "text": "regular expression",
     "styleName": "orange-column"
   },
   "editor": {
     "mask": {
       "editMask": "0000-0000-0000-0000"
     }
   },
   "textFormat": "([0-9]{4})([0-9]{4})([0-9]{4})([0-9]{4});$1-$2- $3-$4"
}
   ...
];

gridView.setColumns(columns);
```

#### displayCallback

```js
var columns = [
   ...
{
   "name": "OrderID",
   "fieldName": "OrderID",
   "width": "150",
   "header": {
     "text": "regular expression",
     "styleName": "orange-column"
   },
   "editor": {
     "mask": {
       "editMask": "0000-0000-0000-0000"
     }
   },
   "displayCallback": function(grid, index, value) {
     var tmp = '';
     tmp += value.substr(0, 4);
     tmp += '-';
     tmp += value.substr(4, 4);
     tmp += '-****-****';

     return tmp;
   }
}
   ...
];

gridView.setColumns(columns);
```