
# Lookup column

Instead of the actual value of the data field associated with the column, a cell can display a different value associated with that value.
For information related to the `dropdown` editor (selectbox), please see [Dropdown Editor](/guides/editor/dropdown-editor).

#### Setting values and labels

If you set the `lookupDisplay` property to true and specify a list of `values` and `labels` properties, the `labels` item corresponding to the position of the `values` value will be displayed.

Try entering one of the values set to `values` in the values/labels column.


```js
const fields = [
  {
    fieldName: "UserId"
  },
  {
    fieldName: "UserName"
  },
  {
    fieldName: "Age"
  },
  {
    fieldName: "Gender"
  },
  {
    fieldName: "MobilePhone"
  },
  {
    fieldName: "Email"
  },
  {
    fieldName: "AgeLabel"
  }
];

const columns = [
  {
    name: "UserId",
    fieldName: "UserId",
    width: "90",
    header: {
      text: "User ID"
    }
  },
  {
    name: "UserName",
    fieldName: "UserName",
    width: "170",
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    header: {
      text: "Values/Labels",
      styleName: "orange-column"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "130",
    lookupDisplay: true,
    labelField: "AgeLabel",
    header: {
      text: "Label Field"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "100",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Male",
      "Female"
    ],
    labels: [
      "<Male>",
      "<Female>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 2,
      domainOnly: true
    },
    header: {
      text: "Gender"
    }
  },
  {
    name: "MobilePhone",
    fieldName: "MobilePhone",
    width: "200",
    header: {
      text: "Mobile Phone"
    }
  },
  {
    name: "Email",
    fieldName: "Email",
    type: "data",
    width: "200",
    header: {
      text: "Email"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/demo_json1.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var columns = [{
...
}, {
     name: "UserName",
     fieldName: "UserName",
     width: "130",
     sortable: false;
     lookupDisplay: true;
     values: [
         "VINET",
         "HANAR",
         "SUPRD",
         "VICTE",
         "RATC",
         "WARTH"
     ],
     labels: [
         "Vins et alcools Chevalier",
         "Hanari Carnes",
         "Suprêmes délices",
         "Victuailles en stock",
         "Rattlesnake Canyon Grocery",
         "Wartian Herkku"
     ],
     header: {
         text: "Values/Labels",
         styleName: "orange-column"
     }
}, {
...
}];

grid.setColumns(columns);
```

#### lookupData

You can apply JSON format data at once using the lookupData property without entering the values of DataColumn and labels separately.

```js
const lookupDatas = [
  { value: "VINET", label: "Vins et alcools Chevalier" },
  { value: "HANAR", label: "Hanari Carnes" },
  { value: "SUPRD", label: "Suprêmes délices" },
  { value: "VICTE", label: "Victuailles en stock" },
  { value: "RATTC", label: "Rattlesnake Canyon Grocery" },
  { value: "WARTH", label: "Wartian Herkku" }
];

const fields = [
  {
    fieldName: "UserId"
  },
  {
    fieldName: "UserName"
  },
  {
    fieldName: "Age"
  },
  {
    fieldName: "Gender"
  },
  {
    fieldName: "MobilePhone"
  },
  {
    fieldName: "Email"
  },
  {
    fieldName: "AgeLabel"
  }
];

const columns = [
  {
    name: "UserId",
    fieldName: "UserId",
    width: "90",
    header: {
      text: "User ID"
    }
  },
  {
    name: "UserName",
    fieldName: "UserName",
    type: "data",
    width: "130",
    sortable: false,
    lookupDisplay: true,
    lookupData: lookupDatas,
    header: {
      text: "lookupDatas",
      styleName: "orange-column"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    type: "data",
    width: "130",
    lookupDisplay: true,
    labelField: "AgeLabel",
    header: {
      text: "Label Field"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    type: "data",
    width: "100",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Male",
      "Female"
    ],
    labels: [
      "<Male>",
      "<Female>"
    ],
    header: {
      text: "Gender"
    }
  },
  {
    name: "MobilePhone",
    fieldName: "MobilePhone",
    width: "200",
    header: {
      text: "Mobile Phone"
    }
  },
  {
    name: "Email",
    fieldName: "Email",
    type: "data",
    width: "200",
    header: {
      text: "Email"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/demo_json1.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var lookupDatas = [
     {value: "VINET", label: "Vins et alcools Chevalier"},
     {value: "HANAR", label: "Hanari Carnes"},
     {value: "SUPRD", label: "Suprêmes délices"},
     {value: "VICTE", label: "Victuailles en stock"},
     {value: "RATTC", label: "Rattlesnake Canyon Grocery"},
     {value: "WARTH", label: "Wartian Herkku"}
];

var columns = [
     {
         name: "UserName",
         fieldName: "UserName",
         width: "130",
         sortable: false;
         lookupDisplay: true;
         lookupData: lookupDatas,
         //If you want to change the property names of value and label, use as follows
         //lookupData: {value:"code", label:"text", list:[{code: "M", text: "Maeil Dairy"}, {code: "S", text: "Seoul Milk"}] },
         header: {
             text: "lookupDatas",
             styleName: "orange-column"
         }
     }
]
```


#### labelField settings

Displays the value of the field specified in `labelField` in the same row as the cell of this field instead of the actual value in that column cell.
The 'Age' column below does not display the value of the 'Age' field, but the value of the invisible 'AgeLabel' field.

```js
const fields = [
  {
    fieldName: "UserId"
  },
  {
    fieldName: "UserName"
  },
  {
    fieldName: "Age"
  },
  {
    fieldName: "Gender"
  },
  {
    fieldName: "MobilePhone"
  },
  {
    fieldName: "Email"
  },
  {
    fieldName: "AgeLabel"
  }
];

const columns = [
  {
    name: "UserId",
    fieldName: "UserId",
    width: "90",
    header: {
      text: "User ID"
    }
  },
  {
    name: "UserName",
    fieldName: "UserName",
    width: "170",
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    header: {
      text: "Values/Labels"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "130",
    lookupDisplay: true,
    labelField: "AgeLabel",
    header: {
      text: "Label Field",
      styleName: "orange-column"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "100",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Male",
      "Female"
    ],
    labels: [
      "<Male>",
      "<Female>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 2,
      domainOnly: true
    },
    header: {
      text: "Gender"
    }
  },
  {
    name: "MobilePhone",
    fieldName: "MobilePhone",
    width: "200",
    header: {
      text: "Mobile Phone"
    }
  },
  {
    name: "Email",
    fieldName: "Email",
    width: "200",
    header: {
      text: "Email"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/demo_json1.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

function btnGetAge() {
  alert(dataProvider.getFieldValues("Age"));
}

function btnGetAgeLabel() {
  alert(dataProvider.getFieldValues("AgeLabel"));
}
```

```js
var columns = [{
...
}, {
     name: "Age",
     fieldName: "Age",
     width: "130",
     lookupDisplay: true;
     labelField: "AgeLabel", //Set field to use as label
     header: {
         text: "Label Field",
     }
}, {
...
}];

grid.setColumns(columns);
```

Check Label Field column value

```js
alert(dataProvider.getFieldValues("Age"));
```


Check labelField value

```js
alert(dataProvider.getFieldValues("AgeLabel"));
```


#### Check the value

Check the value of the current focus position.

```js
const fields = [
  {
    fieldName: "UserId"
  },
  {
    fieldName: "UserName"
  },
  {
    fieldName: "Age"
  },
  {
    fieldName: "Gender"
  },
  {
    fieldName: "MobilePhone"
  },
  {
    fieldName: "Email"
  },
  {
    fieldName: "AgeLabel"
  }
];

const columns = [
  {
    name: "UserId",
    fieldName: "UserId",
    width: "90",
    header: {
      text: "User ID"
    }
  },
  {
    name: "UserName",
    fieldName: "UserName",
    type: "data",
    width: "180",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "RATTC",
      "WARTH"
    ],
    labels: [
      "Vins et alcools Chevalier",
      "Hanari Carnes",
      "Suprêmes délices",
      "Victuailles en stock",
      "Rattlesnake Canyon Grocery",
      "Wartian Herkku"
    ],
    header: {
      text: "Values/Labels"
    },
    styleName: "orange-column"
  },
  {
    name: "Age",
    fieldName: "Age",
    type: "data",
    width: "130",
    lookupDisplay: true,
    labelField: "AgeLabel",
    header: {
      text: "Label Field"
    },
    styleName: "orange-column"
  },
  {
    name: "Gender",
    fieldName: "Gender",
    type: "data",
    width: "100",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Male",
      "Female"
    ],
    labels: [
      "<Male>",
      "<Female>"
    ],
    header: {
      text: "Gender"
    },
    styleName: "orange-column"
  },
  {
    name: "MobilePhone",
    fieldName: "MobilePhone",
    width: "200",
    header: {
      text: "Mobile Phone"
    }
  },
  {
    name: "Email",
    fieldName: "Email",
    type: "data",
    width: "200",
    header: {
      text: "Email"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/demo_json1.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

function btnGetValue() {
  var focusIndex = gridView.getCurrent().itemIndex;
  var focusField = gridView.getCurrent().fieldName;
  alert(gridView.getValue(focusIndex, focusField));
}
```

```js
var focusIndex = gridView.getCurrent().itemIndex;
var focusField = gridView.getCurrent().fieldName;
alert(gridView.getValue(focusIndex, focusField));
```