
# [Number Editor](/refs/Interface/NumberCellEditor#number)

[Number Editor](/refs/Interface/NumberCellEditor#number) is an editor that allows you to input numbers.

If you want to display thousands and millions separators when displayed on the screen, just set numberFormat to "#,##0", and when using a fixed decimal point, display "0" after the decimal point as many digits as necessary. , When using variable decimal points, use "#".
For example, if you use a thousand separator and 3 fixed decimal places, you can use "#,##0.000", and if you use 4 fixed decimal places, you can use "#,##0.0000".

When numberFormat is applied, only the value of the cell displayed on the screen is changed, and the **original value in the field of the dataProvider does not change**.

#### Specify Number Format

In Number Format, '0' means a fixed digit. '#' means variable digits.
For example, in the case of '#,##0.###', if the number to be displayed is an integer, only the integer will be displayed.

> In case of '#,##0.###'
> 100 -> 100
> 10000 -> 10,000
> 100.1 -> 100.1
> 1000.12 -> 1,000.12
> 1000.1234 -> 1,000.123
> 1000.1237 -> 1,000.124

> In case of '#,##0.000'
> 100 -> 100.000
> 10000 -> 10,000.000
> 100.1 -> 100.100
> 1000.12 -> 1,000.120
> 1000.1234 -> 1,000.123
> 1000.1237 -> 1,000.124

> In case of '#,##0.0##'
> 100 -> 100.0
> 10000 -> 10,000.0
> 100.1 -> 100.1
> 1000.12 -> 1,000.12
> 1000.1234 -> 1,000.123
> 1000.1237 -> 1,000.124

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

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "0.#########",
    header: {
      text: "Raw Value",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity1",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.###",
    header: {
      text: "#,##0.###",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity2",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.000",
    header: {
      text: "#,##0.000",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity3",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.0##",
    header: {
      text: "#,##0.0##",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        
        dataProvider.setValue(0, 'Quantity', 100);
        dataProvider.setValue(1, 'Quantity', 10000);
        dataProvider.setValue(2, 'Quantity', 100.1);
        dataProvider.setValue(3, 'Quantity', 1000.12);
        dataProvider.setValue(4, 'Quantity', 1000.1234);
        dataProvider.setValue(5, 'Quantity', 1000.1237);
        dataProvider.setValue(6, 'Quantity', 5544444.55555);
        dataProvider.setValue(7, 'Quantity', 12345.4423);
        gridView.refresh();
      });
  }
}, {
  fields
});

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

function btnNumberFormat() {
  gridView.setColumnProperty("Quantity","numberFormat","#,##0.##;,;.");
}
```
{/* ```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "0.#########",
    header: {
      text: "Raw Value",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity1",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.###",
    header: {
      text: "#,##0.###",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity2",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.000",
    header: {
      text: "#,##0.000",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity3",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.0##",
    header: {
      text: "#,##0.0##",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        
        dataProvider.setValue(0, 'Quantity', 100);
        dataProvider.setValue(1, 'Quantity', 10000);
        dataProvider.setValue(2, 'Quantity', 100.1);
        dataProvider.setValue(3, 'Quantity', 1000.12);
        dataProvider.setValue(4, 'Quantity', 1000.1234);
        dataProvider.setValue(5, 'Quantity', 1000.1237);
        dataProvider.setValue(6, 'Quantity', 5544444.55555);
        dataProvider.setValue(7, 'Quantity', 12345.4423);
        gridView.refresh();
      });
  }
}, {
  fields
});

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

function btnNumberFormat() {
  gridView.setColumnProperty("Quantity","numberFormat","#,##0.##;,;.");
}
``` */}

```js
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editor: {
     type: "number",
     textAlignment: "far",
     //Format applied when inputting (only up to 3 decimal places can be entered)
     editFormat: "#,##0.###",
     multipleChar: "+",
   },
   //Format displayed in grid cells (displayed up to one decimal place)
   numberFormat: "#,##0.#",
   header: {
     "text": "Number Edit"
   }
}
...
```

#### Formatting can also be applied when the user enters a key.

If editor.editFormat is specified as "#,##0.###", a maximum of 3 decimal places are entered.
(Note: If you write 0 as the decimal place in editFormat, it is treated the same as #.)

The example below is an example where up to 3 decimal places are entered when the user inputs, and only 1 decimal place is displayed in the cell displayed on the screen.

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

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.###",
      multipleChar: "+"
    },
    numberFormat: "#,##0.#",
    header: {
      text: "Number Edit",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
``` */}
```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat:"yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.###",
      multipleChar: "+"
    },
    numberFormat: "#,##0.#",
    header: {
      text: "Number Edit",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editor: {
     type: "number",
     textAlignment: "far",
     //Format applied when inputting (only up to 3 decimal places can be entered)
     editFormat: "#,##0.###",
     multipleChar: "+",
   },
   //Format displayed in grid cells (displayed up to one decimal place)
   numberFormat: "#,##0.#",
   header: {
     "text": "Number Edit"
   }
}
...
```

#### Thousands, and decimal points. change seats

In some countries, the thousands separator ',' and decimal point '.' are used in reverse (thousand separator '.', decimal point ',').
In this case, the format string is ; The first specifies the format for expressing numbers, the second specifies the decimal point symbol, and the third specifies the thousand separator.

`Number format; Decimal point symbol; Thousand separator symbol`

```
numberFormat: "#,##0.##;,;." //If 12345.67, displayed as 12.345,56
```

If you want to have the same format in the editor when inputting, just specify the same format.

```
editFormat: "#,##0.##;,;." //If 12345.67, displayed as 12.345,56
```

### Note
* If you change the separator for the thousands and decimal points, it will be displayed as changed in the grid, but when exporting to Excel, it will be displayed as a separator that matches the system country setting that opens the Excel file.  
* For example, even if you change the separator, it will be displayed as thousands and decimal points in Korea, and as German separators.  
* If you want to see the changed symbols in Korea as well as in the grid, you need to change the separator in the Windows system or change it in the options of Excel itself.
* Also, in the grid, you can set the separator for the thousands and decimal points differently for each column, but Excel cannot set the separator for each column differently as in the grid due to its characteristics.

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

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "0.#########",
    header: {
      text: "Raw Value",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity1",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.###;,;.",
      multipleChar: "+"
    },
    numberFormat: "#,##0.###;,;.",
    header: {
      text: "#.##0,###",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity2",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.000;,;.",
      multipleChar: "+"
    },
    numberFormat: "#,##0.000;,;.",
    header: {
      text: "#.##0,000",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity3",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.0##;,;.",
      multipleChar: "+"
    },
    numberFormat: "#,##0.0##;,;.",
    header: {
      text: "#.##0,0##",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        
        dataProvider.setValue(0, 'Quantity', 100);
        dataProvider.setValue(1, 'Quantity', 10000);
        dataProvider.setValue(2, 'Quantity', 100.1);
        dataProvider.setValue(3, 'Quantity', 1000.12);
        dataProvider.setValue(4, 'Quantity', 1000.1234);
        dataProvider.setValue(5, 'Quantity', 1000.1237);
        dataProvider.setValue(6, 'Quantity', 5544444.55555);
        dataProvider.setValue(7, 'Quantity', 12345.4423);
        gridView.refresh();
      });
  }
}, {
  fields
});

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

```js
var column = [
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editor: {
     type: "number",
     textAlignment: "far",
     editFormat: "#,##0.##;,;.",
     multipleChar: "+",
   },
   numberFormat: "#,##0.##;,;.",
   header: {
     "text": "Number Edit"
   }
}
...
];
```

#### Absolute value, round up, round down

The displayed value can be displayed as an absolute value or rounded up or down.
Only the value displayed on the screen is changed, and the value contained in the dataProvider is not changed.
(If nothing is specified, rounding is performed.)

After the format string specified with numberFormat, separate it with a semicolon (;) and then specify a, c, and f.

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

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "0.#########",
    header: {
      text: "Raw Value",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity1",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.###;a",
    header: {
      text: "#,##0.###;a",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity2",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.###;c",
    header: {
      text: "#,##0.###;c",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity3",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number"
    },
    numberFormat: "#,##0.###;f",
    header: {
      text: "#,##0.###;f",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        
        dataProvider.setValue(0, 'Quantity', 100);
        dataProvider.setValue(1, 'Quantity', 10000);
        dataProvider.setValue(2, 'Quantity', 100.1);
        dataProvider.setValue(3, 'Quantity', 1000.12);
        dataProvider.setValue(4, 'Quantity', 1000.1234);
        dataProvider.setValue(5, 'Quantity', 1000.1237);
        dataProvider.setValue(6, 'Quantity', 5544444.55555);
        dataProvider.setValue(7, 'Quantity', 12345.4423);
        dataProvider.setValue(8, 'Quantity', -100);
        dataProvider.setValue(9, 'Quantity', -10000);
        dataProvider.setValue(10, 'Quantity', -100.1);
        dataProvider.setValue(11, 'Quantity', -1000.12);
        dataProvider.setValue(12, 'Quantity', -1000.1234);
        dataProvider.setValue(13, 'Quantity', -1000.1237);
        dataProvider.setValue(14, 'Quantity', -5544444.55555);
        dataProvider.setValue(15, 'Quantity', -12345.4423);
        gridView.refresh();
      });
  }
}, {
  fields
});

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

```js
numberFormat: "#,##0.###;a" //Display as absolute value
numberFormat: "#,##0.###;c" //Round up to display
numberFormat: "#,##0.###;f" //Round down to display

numberFormat: "#,##0.###;,;.;a" //Thousands, and decimal point. Change the position of and display it as an absolute value
numberFormat: "#,##0.###;,;.;c" //Thousands, and decimal point. Change the position of and display by rounding up.
numberFormat: "#,##0.###;,;.;f" //Thousands, and decimal point. Change the position of and display by rounding down
```

#### Step button

You can manipulate numeric values by displaying step buttons in cells.

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

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "Quantity1",
    fieldName: "Quantity",
    width: "150",
    sortable: false,
    editButtonVisibility: "always",
    editor: {
      type: "number",
      showStepButton: true,
      direction: "horizontal",
      editFormat: "#,##0.##",
      step: 1,
      delay: 100
    },
    numberFormat: "#,##0.##",
    header: {
      text: "Step Button",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var column = [
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editButtonVisibility: "always",
   editor: {
     type: "number",
     showStepButton: true, //Whether to display the number edit button
     direction: "horizontal", //Set the button display direction, vertical when set to "vertical"
     step: 1, // unit of increase/decrease value when button is clicked
     //min: 20, //minimum value
     //max: 999, //maximum value
     //delay: 100 //Interval for applying value when button is pressed
   },
   numberFormat: "#,##0",
   header: {
     "text": "Number Edit"
   }
}
...
];
```

#### Controlling the visibility of the step button

Set the display method by specifying `always`, `default`, `hidden`, `rowfocused`, and `visible` in column.[editButtonVisibility](/refs/realgrid#buttonvisibility).

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

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "Quantity1",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editButtonVisibility: "always",
    editor: {
      type: "number",
      showStepButton: true,
      direction: "vertical",
      editFormat: "#,##0.##",
      step: 1,
      delay: 100
    },
    numberFormat: "#,##0.##",
    header: {
      text: "always",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity2",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editButtonVisibility: "default",
    editor: {
      type: "number",
      showStepButton: true,
      direction: "vertical",
      editFormat: "#,##0.##",
      step: 1,
      delay: 100
    },
    numberFormat: "#,##0.##",
    header: {
      text: "default",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity3",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editButtonVisibility: "hidden",
    editor: {
      type: "number",
      showStepButton: true,
      direction: "vertical",
      editFormat: "#,##0.##",
      step: 1,
      delay: 100
    },
    numberFormat: "#,##0.##",
    header: {
      text: "hidden",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity4",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editButtonVisibility: "rowfocused",
    editor: {
      type: "number",
      showStepButton: true,
      direction: "vertical",
      editFormat: "#,##0.##",
      step: 1,
      delay: 100
    },
    numberFormat: "#,##0.##",
    header: {
      text: "rowfocused",
      styleName: "orange-column"
    }
  },
  {
    name: "Quantity5",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editButtonVisibility: "visible",
    editor: {
      type: "number",
      showStepButton: true,
      direction: "vertical",
      editFormat: "#,##0.##",
      step: 1,
      delay: 100
    },
    numberFormat: "#,##0.##",
    header: {
      text: "visible",
      styleName: "orange-column"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "오스트리아",
      "벨기에",
      "브라질",
      "핀란드",
      "프랑스",
      "독일",
      "아일랜드",
      "이탈리아",
      "멕시코",
      "스페인",
      "스웨덴",
      "스위스",
      "영국",
      "미국",
      "베네수엘라"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editor: {
      type: "date",
      datetimeFormat: "yyyy.MM.dd"
    },
    header: {
      text: "Date Edit"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "표시할 데이타가 없습니다."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    visible: false
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var column = [
...
//Column settings
{
   name: "Quantity",
   fieldName: "Quantity",
   width: 100,
   sortable: false;
   editButtonVisibility: "always", //default, hidden, rowfocused, visible
   editor: {
     type: "number",
     showStepButton: true, //Whether to display the number edit button
     direction: "vertical", //Set the button display direction, horizontal when set to "horizontal"
     step: 1, // unit of increase/decrease value when button is clicked
     //min: 20, //minimum value
     //max: 999, //maximum value
     //delay: 100 //Interval for applying value when button is pressed
   },
   numberFormat: "#,##0",
   header: {
     "text": "always"
   }
}
...
];
```