# Overview

In RealGrid2, fields and columns are used to display data.

- [DataField](/refs/Interface/DataField#datafield): An object that is responsible for a logical location for storing data.
- [DataColumn](/refs/Interface/DataColumn#datacolumn): An object that contains properties for displaying the information of DataField on the screen.

# Field Definition

When defining a field, it must be in the form of an object array, and each object consists of one field.

```js
gridView.setFields([
  {
    fieldName: "KorName",
    dataType: "text",
  },
  {
    fieldName: "Gender",
    dataType: "text",
  },
  {
    fieldName: "Age",
    dataType: "number",
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
  },
]);
```

## Basic settings

- fieldName: Specify the same name as the key value of the data to be imported.
- dataType: Define the data type of the data to be imported.

- Data type type:

text: Text (default)

number: Number

datetime: Date

boolean: Boolean

## Frequently used options

- [booleanFormat](/guides/data-manager/boolean-field): Format when the value is in Boolean format
- [datetimeFormat](/guides/data-manager/datetime-field): Format when the value is in date format
- [valueExpression](/guides/data-manager/calc-field): Formula to be used when it is a calculated field
- [valueCallback](/guides/data-manager/calc-field): Callback to be calculated by specifying the formula when it is a calculated field

# Column definition

When defining a column, it must have an object array format, and each object consists of one column.

```js
gridView.setColumns([
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: { text: "Name" },
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: { text: "Gender" },
  },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "B This" } },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: { text: "Phone number" },
  },
]);
```

## Frequently used properties

- [name](/guides/column/set-column): Set the column name to use.
- [fieldName](/guides/column/set-column): Set the field name to be linked to the column.
- [checked](/guides/header-and-footer/header-checkbox) : Whether the header checkbox is checked
- [fillWidth](/guides/column/grid-fitting) : Width within the column group
- [footer](/guides/header-and-footer/column-footer) : Column footer (first item if there are multiple)
- [footers](/guides/header-and-footer/column-footer) : Column footer collection object
- [groupFooter](/guides/row-group/row-grouping) : Group footer (first item if there are multiple)
- [groupFooters](/guides/row-group/row-grouping) : Group footer collection object.
- header : Column header
- [headerSummaries](/guides/header-and-footer/header-summary) : Header Summary collection object.
- [headerSummary](/guides/header-and-footer/header-summary) : Header Summary (first item if multiple)
- width : Column width
- [visible](/guides/column/column-properties) : Whether to display the column
- [renderer](/guides/renderer/text-renderer) : Renderer
- [styleName](/guides/grid-style/style-name) : Style class name
- [editButtonVisibility](/refs/Interface/ValueColumn#editbuttonvisibility) : How to display the cell editor button

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    editor: {
      type: "dropdown",
    },
    editButtonVisibility: "always", //always: Always display
  },
]);
```

- [editor](/tutorial/realgrid-editor) : Editor
- [exportStyleName](/guides/excels/export-style) : Style name to be used when exporting to Excel
- [numberFormat](/guides/editor/number-editor) : Format displayed when a value in the numeric format specified in the column is changed. Specify by separating the thousands symbol and decimal point with ;.
- [popupMenu](/guides/cell-components/popup-menu): Popup menu
- [button](/guides/cell-components/cell-button): Button to display on the right side of the data cell
- [buttonVisibility](/guides/cell-components/cell-button): How to display the column button
- [datetimeFormat](/guides/editor/date-editor): Format to display when the value is in the date format specified in the column. If undefined, the numberFormat specified in GridBase.formatOptions is applied.
- [labelField](/guides/cell-components/lookup-column): Field that specifies the list of values to be displayed in the column cell
- [labels](/guides/cell-components/lookup-column): List of values to be displayed in the column cell
- [lookupData](/guides/cell-components/lookup-column): Sets values and labels.
- [lookupDisplay](/guides/cell-components/lookup-column) : Whether to display the value of the labels item in the position corresponding to the cell value in the values list in the column cell
- [lookupKeyFields](/guides/cell-components/lookup-tree) : lookupKeyFields
- [lookupSourceId](/guides/cell-components/lookup-tree) : id of the registered lookupSourceTree
- readOnly : Whether to use readOnly

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    readOnly: true, // read-only
  },
]);
```

- [values](/guides/cell-components/lookup-column) : List of actual values in the column cell
- [editable](/guides/column/set-column): : Whether it is editable

## How to use buttons in the grid

The grid provides various buttons.

You can set the visibility for each button, and refer to the types and guides for each button below.

1. [editButtonVisibility](/refs/Interface/ValueColumn#editbuttonvisibility) : Grid drop-down button, date button, etc.

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    editor: {
      type: "dropdown", // or "date"
    },
    editButtonVisibility: "always", // Always display
  },
]);
```

Option types of editButtonVisibility property

- always: always visible
- default: visible only when the mouse is over the cell or when the cell is selected
- hidden: not visible
- rowfocused : Show when row is selected
- visible : Show when cell is selected

2. [buttonVisibility](/refs/Interface/ValueColumn#buttonvisibility) : Cell button, popup button

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    button: "action", // Apply cell button
    // button : "popup" // Apply popup button
    buttonVisibility: "always", // Always display
  },
]);
```

Option types of buttonVisibility property

- always: always visible
- default: visible only when the mouse is over the cell or the cell is selected
- hidden: not visible
- rowfocused: visible when the row is selected
- visible: visible when the cell is selected

3. [Renderer Button](/guides/cell-components/cell-button#Button-Renderer)
   You can use the button renderer by specifying renderer.type = "button".

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    editable: false,
    renderer: {
      type: "button", // Apply renderer button
    },
  },
]);
```

When the button renderer is clicked, the onCellItemClicked event occurs.
Please implement the desired behavior through this event.

```js
gridView.onCellItemClicked = function (grid, index, clickData) {
  alert(clickData.value + " The button was clicked.");
  return true;
};
```

## Frequently used callback functions

### When you want to show cell buttons or pop-up buttons depending on conditions

If you want to hide or show cell buttons or pop-up buttons depending on conditions, you can use buttonVisibleCallback as shown below.

If you use buttonVisibleCallback, the buttonVisibility property is ignored, so you must set the conditions for showing the button directly within the callback function.

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    button: "action", // Apply cell button
    buttonVisibleCallback: function (grid, index, focused, mouseEntered) {
      return (
        grid.getValue(index.itemIndex, index.fieldName) === "AAA" &&
        (focused || mouseEntered)
      );
    },
  },
]);
```

### When applying styles to columns based on specific conditions

When applying CSS styles or properties such as editable to columns based on specific conditions, you can implement them through styleCallback.

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    styleCallback: (grid, dataCell) => {
      if (dataCell.value === "AAA") {
        return { styleName: "font-theme", editable: false };
      }
    },
  },
]);
```

### When setting the value displayed on the screen according to conditions

If you want to set the value displayed on the screen according to conditions, you can set it through displayCallback as follows.

```js
gridView.setColumns([
  {
    fieldName: "field1",
    name: "column1",
    displayCallback: (grid, index, value) => {
      if (value === "AAA") {
        return "Ax3";
      }
    },
  },
]);
```

# Click event

Callback that notifies that a grid cell has been clicked

- You can get the clicked location (type) through the second parameter of the event.
  [onCellClicked](/refs/Class/GridBase#oncellclicked)

```js
gridView.onCellClicked = function (grid, clickData) {
  console.log("onCellClicked: " + JSON.stringify(clickData));
};
```

Callback that notifies that a grid cell has been double-clicked

- You can get the clicked location (type) through the second parameter of the event. [onCellDblClicked](/refs/Class/GridBase#oncelldblclicked)

```js
gridView.onCellDblClicked = function (grid, clickData) {
  console.log("onCellDblClicked: " + JSON.stringify(clickData));
};
```

A callback that notifies that an element contained in a grid cell has been clicked

- You can get the clicked location (type) through the second parameter of the event.
  [onCellItemClicked](/refs/Class/GridBase#oncellitemclicked)

```js
gridView.onCellItemClicked = function (grid, index, clickData) {
  console.log("onCellItemClicked: " + JSON.stringify(clickData));
  return true;
};
```

A callback that notifies that the user clicked the Header of the checkBar to select or deselect all, or entered checkAll true / false to select or deselect all
[onItemAllChecked](/refs/Class/GridBase#onitemallchecked)

```js
gridView.onItemAllChecked = function (grid, checked) {
  console.log("onItemAllChecked: " + checked);
};
```

A callback that notifies that the user clicked the checkbox of the checkBar or called checkItem to change the check
[onItemChecked](/refs/Class/GridBase#onitemchecked)

```js
gridView.onItemChecked = function (grid, itemIndex, checked) {
  console.log("onItemChecked: " + checked + " at " + itemIndex);
};
```

A callback to notify that the user changed the check by clicking the checkbox in the checkBar or calling checkItem
[onItemsChecked](/refs/Class/GridBase#onitemschecked)

```js
gridView.onItemsChecked = function (grid, items, checked) {
  console.log("onItemChecked: " + items.join() + " are checked as " + checked);
};
```

A callback to notify that the button was clicked in [SearchCellEditor](/refs/Interface/SearchCellEditor)
[onSearchCellButtonClick](/refs/Class/GridBase#onsearchcellbuttonclick)

```js
gridView.onSearchCellButtonClick = function (grid, index, text) {
  console.log("onSearchCellButtonClick: " + " button was clicked!");
};
```

# How to set column order and direction

In RealGrid, setting column order and direction is called column layout (column grouping).

You can check detailed examples of layout [here](/guides/column/layout).

```js
const layout = [
  {
    name: "companyGroup",
    direction: "horizontal", // horizontal or vertical
    items: ["Country", "CompanyName"],
    header: {
      text: "Company",
    },
  },
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone",
];

gridView.setColumnLayout(layout);
```

![layout](/images/tutorials/layout.png)

## Frequently used properties when applying layouts

- column : Column name
- direction : Cell placement direction
- header : Header layout setting information
- hideChildHeaders : Whether to hide the header of the sub-layout
- items : Sub-layout items
- visible : Whether to display
- width : width
- name : layout name

## How to change column information

There are several ways to change the set column information.

```js
const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name",
    },
    editable: true,
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Sex",
    },
    editable: false,
  },
];
```

When the column is set as above

1. Change the column header text and editability with the column name (name)

```js
gridView.columnByName("KorName").header.text =
  "Change the name column header text";

gridView.columnByName("KorName").editable = false;
```

2. Change the column header text and editability with the field name (fieldName)

```js
gridView.columnByField("Gender").header.text =
  "Change the gender column header text";

gridView.columnByField("Gender").editable = true;
```

## Changing column width and order

When changing general column information, use the columnByName() mentioned above, and for information related to screen composition, you can change the column layout setting information through [layoutByName()](/refs/Class/GridBase#layoutbyname).

Changing column width

```js
gridView.layoutByName("Column1").cellWidth = 150;
```

Changing column order

```js
gridView.layoutByName("Column1").vIndex = 4;
```

## How to change the style of a column, such as background color and font size

You can set the style of a column (font size, background color, etc.) through the styleName property.

You can apply the style class defined in the style sheet or style tag to styleName as follows.

```js
// js
 gridView.setColumns([ { name: "Age", fieldName: "Age", width: "60", header: { text: "Age", }, styleName:'font-theme2' }, { name: "KorName", fieldName: "KorName", width: "60", header: { text: "Name", }, styleName:'font-theme1' }, ]);

// css
.font-theme1 {
    color: blue;
    text-align: right;
    background-color: pink;
}
.font-theme2 {
    color: red;
    text-align: left;
}
```

## How to change the editability of a column, css style, etc. depending on conditions

You can use styleCallback to apply various conditions such as column style, editability, etc.

For detailed guide, refer to [here](/guides/grid-style/column-dynamic-style).

```js
gridView.setColumns([
  {
    name: "Gender",
    fieldName: "Gender",
    width: "60",
    header: {
      text: "성별",
    },
    styleCallback: (grid, dataCell) => {
      if (dataCell.value === "남") {
        return { styleName: "font-theme1", editable: false };
      }
    },
  },
]);

// css
.font-theme1 {
    color: blue;
    text-align: right;
    background-color: pink;
}
```

## Change the displayed value of a column

You can use displayCallback to set the value displayed on the screen.
However, if the dataType of the field is number, you must initialize the applied numberFormat before using it.

For detailed guide, refer to [here](/guides/cell-components/display-value.ko).

### If dataType is text

```js
//
gridView.setColumns([
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name",
    },
    displayCallback: (grid, index, value) => {
      return value + " 님";
    },
  },
]);
```

### If dataType is number

1. If you simply want to add a string before or after the data value, you can set it through the prefix and suffix properties.

```js
//
gridView.setColumns([
  {
    name: "Amount",
    fieldName: "Amount",
    width: "60",
    header: {
      text: "금",
    },
    prefix: "$",
  },
]);
```

2. If you need to use displayCallback, you can initialize numberFormat to null as shown below and return it with the value you want to display.

```js
gridView.setColumns(
    [
        {
            name: "Age",
            fieldName: "Age",
            width: "60",
            header: {
                text: "Age",
            },
            numberFormat: null,
            displayCallback: (grid, index, value) => {
                return '만' value + '세'
            }
        },
    ]
);

```

## Adding fields and columns

If you add a column other than the ones that are set, you must also add the field of the column you want to add.

```js
let field = {
  fieldName: "EmployeeID",
  dataType: "text",
};

dataProvider.addField(field);

let col = {
  name: "EmployeeID",
  fieldName: "EmployeeID",
  width: "90",
  header: {
    text: "Employee ID",
  },
};

gridView.addColumn(col);
```

## Delete Column

In contrast to adding columns, you can also remove fields and columns using removeField() and removeColumn().

```js
gridView.removeColumn("EmployeeID");
dataProvider.removeField("EmployeeID");
```

## Get Column Information

If you want to get information on all created columns

```js
gridView.getColumns();
```

If you want to get information on only the columns currently displayed on the screen

```js
gridView.getDisplayColumns();
```

If you only get the column name

```js
gridView.getColumnNames();
```

If you get specific column props

```js
gridView.getColumnProperty("colName", "renderer");

// or

gridView.columnByName("colName").renderer;
```

## Column header and data line break

To make a line break in the data cell area, you can set the line break as follows using white-space css.
If the column header content is long, it will be automatically line broken.

```js
// js
gridView.setColumns([
    {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
        text: "Name"
    },
    styleName: "multiline-pre-line"
    },
]);

// css
// Automatic line break when data is long
.multiline-pre-line {
    white-space: pre-line;
}
// Line breaks only when explicitly using \n
.multiline-pre {
    white-space: pre;
}
```

## Hide column

You can set whether to show or hide the column using the visible property.

```js
//Get the current visible property value of the name (KorName) column
var visible = gridView.columnByName("KorName").visible;

//Do not show the name (KorName) column.
gridView.columnByName("KorName").visible = false;

//Show the name (KorName) column.
gridView.columnByName("KorName").visible = true;
```

For more information, refer to the [guide](/guides/column/column-properties).
