
# Import JSON data

RealGrid can read data in JSON format using the LocalDataProvider.fillJsonData() function.

#### JSON data

Data of JSON formats that can be entered into RealGrid's DataProvider has the same structure as array type data.

1. A structure that is a list of pure values, that is, an array of a value
2. Name: Arrangement of structures in a collection of properties consisting of values pairs

You can see that the above two types of data formats can be loaded into GridView using the LocalDataProvider.setRows() function in the left menu Array data import.

The data in the JSON format can be used to read the data more flexibly using the Localdataprovider.filljsondata () function. The arguments of the function include OPTIONS, which are data and dataFilloptions objects.

For options, check out the demo in the DataFilloptions area below.

#### name: array of value set structures

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { 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: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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 }
}, {
  fields
});

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

function fillJsonData() {
  const data = [
    {
      KorName: "Park Young-ho",
      Gender: "M",
      Age: "71",
      Phone: "(025)6563-2802",
      ProductId: "198160731-00008",
      KorCountry: "Mozambique",
      OrderDate: "2021-01-16",
      CardNumber: "5587-2139-9692-3644",
      Monetary: "EUR",
      StartDate: "2018-02-25",
      EndDate: "2021-08-12",
      ToMonth: "23",
      Month: "41",
      Year: "3",
      InterestRate: "0.15",
      SaveCost: "51000",
      SaveMaturity: "14950650",
      CurrentSave: "9304950",
      Rating: "5",
      BusinessProficiency: "59",
      Address: "45-89 Gonghang-dong, Gangseo-gu, Seoul"
    },
    {
      KorName: "Jo Il-hyeong",
      Gender: "M",
      Age: "62",
      Phone: "(093)8809-8696",
      ProductId: "571215854-00001",
      KorCountry: "Canada",
      OrderDate: "2019-07-29",
      CardNumber: "5348-5093-3750-0623",
      Monetary: "USD",
      StartDate: "2019-10-21",
      EndDate: "2022-12-11",
      ToMonth: "3",
      Month: "37",
      Year: "3",
      InterestRate: "0.38",
      SaveCost: "14000",
      SaveMaturity: "7801080",
      CurrentSave: "1108520",
      Rating: "3",
      BusinessProficiency: "53",
      Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
    }
  ];

  dataProvider.fillJsonData(data, { fillMode: "set" });
}

window.fillJsonData = fillJsonData;
```

```js
var data = [
   {
     Korname: "Park Young -ho",
     Gender: “Male”,
     Age: "71",
     Phone: "(025)6563-2802",
     ProductId: "198160731-00008",
     KorCountry: "Mozambique",
     OrderDate: "2021-01-16",
     CardNumber: "5587-2139-9692-3644",
     Monetary: "EUR",
     StartDate: "2018-02-25",
     EndDate: "2021-08-12",
     ToMonth: "23",
     Month: "41",
     Year: "3",
     InterestRate: "0.15",
     SaveCost: "51000",
     SaveMaturity: "14950650",
     CurrentSave: "9304950",
     Rating: "5",
     BusinessProficiency: "59",
     Address: "45-89, Airport-dong, Gangseo-gu, Seoul"
   },
   {
     KorName: "Cho Il-hyung",
     Gender: "M",
     AGE: "62",
     Phone: "(093) 8809-8696",
     ProductId: "571215854-00001",
     KorCountry: "Canada",
     OrderDate: "2019-07-29",
     CardNumber: "5348-5093-3750-0623",
     Monetary: "USD",
     StartDate: "2019-10-21",
     EndDate: "2022-12-11",
     ToMonth: "3",
     Month: "37",
     Year: "3",
     InterestRate: "0.38",
     SaveCost: "14000",
     SaveMaturity: "7801080",
     CurrentSave: "1108520",
     Rating: "3",
     BusinessProficiency: "53",
     Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
   }
];

dataProvider.fillJsonData(data, { fillMode: "set" });
```

#### DataFillOptions

There are three functions for loading data into the grid.

- fillJsonData(data, options)
- fillXmlData(data, options)
- fillCsvData(data, options)

These functions commonly define a second argument called options of type DataFillOptions.

You can use DataFillOptions to set various options for loading data into the grid.

You can choose how to fill data with the fillMode property.

Clear all data in the grid and fill in the data below.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { 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: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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 }
}, {
  fields
});

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

const initialData = [
  {
    KorName: "Park Young-ho",
    Gender: "M",
    Age: "71",
    Phone: "(025)6563-2802",
    ProductId: "198160731-00008",
    KorCountry: "Mozambique",
    OrderDate: "2021-01-16",
    CardNumber: "5587-2139-9692-3644",
    Monetary: "EUR",
    StartDate: "2018-02-25",
    EndDate: "2021-08-12",
    ToMonth: "23",
    Month: "41",
    Year: "3",
    InterestRate: "0.15",
    SaveCost: "51000",
    SaveMaturity: "14950650",
    CurrentSave: "9304950",
    Rating: "5",
    BusinessProficiency: "59",
    Address: "45-89 Gonghang-dong, Gangseo-gu, Seoul"
  },
  {
    KorName: "Jo Il-hyeong",
    Gender: "M",
    Age: "62",
    Phone: "(093)8809-8696",
    ProductId: "571215854-00001",
    KorCountry: "Canada",
    OrderDate: "2019-07-29",
    CardNumber: "5348-5093-3750-0623",
    Monetary: "USD",
    StartDate: "2019-10-21",
    EndDate: "2022-12-11",
    ToMonth: "3",
    Month: "37",
    Year: "3",
    InterestRate: "0.38",
    SaveCost: "14000",
    SaveMaturity: "7801080",
    CurrentSave: "1108520",
    Rating: "3",
    BusinessProficiency: "53",
    Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
  }
];

dataProvider.fillJsonData(initialData, { fillMode: "set" });

function appendData() {
  const data = [
    {
      KorName: "Kim Deok-jung",
      Gender: "F",
      Age: "53",
      Phone: "(064)5483-6874",
      ProductId: "149115669-00009",
      KorCountry: "Canada",
      OrderDate: "2020-03-08",
      CardNumber: "5121-9931-3555-9853",
      Monetary: "HKD",
      StartDate: "2018-12-30",
      EndDate: "2022-01-16",
      ToMonth: "13",
      Month: "36",
      Year: "3",
      InterestRate: "0.32",
      SaveCost: "112000",
      SaveMaturity: "50480640",
      CurrentSave: "20805120",
      Rating: "3",
      BusinessProficiency: "14",
      Address: "115-15 whennwol-dong, Yangcheon-gu, Seoul"
    },
    {
      KorName: "Guk Young-seok",
      Gender: "M",
      Age: "63",
      Phone: "(044)7055-3032",
      ProductId: "738027655-00005",
      KorCountry: "Bouvet Island",
      OrderDate: "2020-05-01",
      CardNumber: "5571-3720-2975-7540",
      Monetary: "AUD",
      StartDate: "2019-08-15",
      EndDate: "2021-12-23",
      ToMonth: "5",
      Month: "28",
      Year: "2",
      InterestRate: "0.2",
      SaveCost: "84000",
      SaveMaturity: "15523200",
      CurrentSave: "4704000",
      Rating: "3",
      BusinessProficiency: "14",
      Address: "707-9 Yeoksam-dong, Gangnam-gu, Seoul"
    }
  ];

  dataProvider.fillJsonData(data, { fillMode: "append", start: 0, count: 1 });
}

window.appendData = appendData;
```

```js
var data = [
   {
     KorName: "Park Young-ho",
     Gender: "M",
     AGE: "71",
     Phone: "(025) 6563-2802",
     ProductId: "198160731-00008",
     KorCountry: "Mozambique",
     Orderdate: "2021-01-16",
     CardNumber: "5587-2139-9692-3644",
     Monetary: "Eur",
     Startdate: "2018-02-25",
     EndDate: "2021-08-12",
     Tomonth: "23",
     Month: "41",
     Year: "3",
     Interestrate: "0.15",
     SaveCost: "51000",
     SaveMaturity: "14950650",
     CurrentSave: "9304950",
     Rating: "5",
     BusinessProficiency: "59",
     Address: "45-89 Gonghang-dong, Gangseo-gu, Seoul"
   },
   {
     KorName: "Cho Il-hyung",
     Gender: “Male”,
     Age: "62",
     Phone: "(093)8809-8696",
     ProductId: "571215854-00001",
     KorCountry: "Canada",
     OrderDate: "2019-07-29",
     CardNumber: "5348-5093-3750-0623",
     Monetary: "USD",
     StartDate: "2019-10-21",
     EndDate: "2022-12-11",
     ToMonth: "3",
     Month: "37",
     Year: "3",
     InterestRate: "0.38",
     SaveCost: "14000",
     SaveMaturity: "7801080",
     CurrentSave: "1108520",
     Rating: "3",
     BusinessProficiency: "53",
     Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
   }
];

dataProvider.fillJsonData(data, { fillMode: "set" });
```

Append the first row of jsonData after the last row of the grid. To do this, use the start: 0, count: 1 properties of DataFillOptions.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { 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: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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 }
}, {
  fields
});

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

const initialData = [
  {
    KorName: "Park Young-ho",
    Gender: "M",
    Age: "71",
    Phone: "(025)6563-2802",
    ProductId: "198160731-00008",
    KorCountry: "Mozambique",
    OrderDate: "2021-01-16",
    CardNumber: "5587-2139-9692-3644",
    Monetary: "EUR",
    StartDate: "2018-02-25",
    EndDate: "2021-08-12",
    ToMonth: "23",
    Month: "41",
    Year: "3",
    InterestRate: "0.15",
    SaveCost: "51000",
    SaveMaturity: "14950650",
    CurrentSave: "9304950",
    Rating: "5",
    BusinessProficiency: "59",
    Address: "45-89 Gonghang-dong, Gangseo-gu, Seoul"
  },
  {
    KorName: "Jo Il-hyeong",
    Gender: "M",
    Age: "62",
    Phone: "(093)8809-8696",
    ProductId: "571215854-00001",
    KorCountry: "Canada",
    OrderDate: "2019-07-29",
    CardNumber: "5348-5093-3750-0623",
    Monetary: "USD",
    StartDate: "2019-10-21",
    EndDate: "2022-12-11",
    ToMonth: "3",
    Month: "37",
    Year: "3",
    InterestRate: "0.38",
    SaveCost: "14000",
    SaveMaturity: "7801080",
    CurrentSave: "1108520",
    Rating: "3",
    BusinessProficiency: "53",
    Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
  }
];

dataProvider.fillJsonData(initialData, { fillMode: "set" });

function appendData() {
  const data = [
    {
      KorName: "Kim Deok-jung",
      Gender: "F",
      Age: "53",
      Phone: "(064)5483-6874",
      ProductId: "149115669-00009",
      KorCountry: "Canada",
      OrderDate: "2020-03-08",
      CardNumber: "5121-9931-3555-9853",
      Monetary: "HKD",
      StartDate: "2018-12-30",
      EndDate: "2022-01-16",
      ToMonth: "13",
      Month: "36",
      Year: "3",
      InterestRate: "0.32",
      SaveCost: "112000",
      SaveMaturity: "50480640",
      CurrentSave: "20805120",
      Rating: "3",
      BusinessProficiency: "14",
      Address: "115-15 whennwol-dong, Yangcheon-gu, Seoul"
    },
    {
      KorName: "Guk Young-seok",
      Gender: "M",
      Age: "63",
      Phone: "(044)7055-3032",
      ProductId: "738027655-00005",
      KorCountry: "Bouvet Island",
      OrderDate: "2020-05-01",
      CardNumber: "5571-3720-2975-7540",
      Monetary: "AUD",
      StartDate: "2019-08-15",
      EndDate: "2021-12-23",
      ToMonth: "5",
      Month: "28",
      Year: "2",
      InterestRate: "0.2",
      SaveCost: "84000",
      SaveMaturity: "15523200",
      CurrentSave: "4704000",
      Rating: "3",
      BusinessProficiency: "14",
      Address: "707-9 Yeoksam-dong, Gangnam-gu, Seoul"
    }
  ];

  dataProvider.fillJsonData(data, { fillMode: "append", start: 0, count: 1 });
}

window.appendData = appendData;
```

```js
var data = [
   {
     KorName: "Kim Deok-jung",
     Gender: “Female”,
     Age: "53",
     Phone: "(064)5483-6874",
     ProductId: "149115669-00009",
     KorCountry: "Canada",
     OrderDate: "2020-03-08",
     CardNumber: "5121-9931-3555-9853",
     Monetary: "HKD",
     StartDate: "2018-12-30",
     EndDate: "2022-01-16",
     ToMonth: "13",
     Month: "36",
     Year: "3",
     InterestRate: "0.32",
     SaveCost: "112000",
     SaveMaturity: "50480640",
     CurrentSave: "20805120",
     Rating: "3",
     BusinessProficiency: "14",
     Address: "115-15, Sinwol-dong, Yangcheon-gu, Seoul"
   },
   {
     KorName: "Kook Young-seok",
     Gender: “Male”,
     Age: "63",
     Phone: "(044)7055-3032",
     ProductID: "738027655-00005",
     KORCOUNTRY: "Buffe Island",
     OrderDate: "2020-05-01",
     Cardnumber: "5571-3720-2975-7540",
     Monetary: “AUD”,
     StartDate: "2019-08-15",
     EndDate: "2021-12-23",
     ToMonth: "5",
     Month: "28",
     Year: "2",
     InterestRate: "0.2",
     SaveCost: "84000",
     Savematury: "15523200",
     CurrentSave: "4704000",
     Rating: "3",
     BusinessSproficiency: "14",
    
   }
];


```



```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { 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: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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 }
}, {
  fields
});

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

const initialData = [
  {
    KorName: "Park Young-ho",
    Gender: "M",
    Age: "71",
    Phone: "(025)6563-2802",
    ProductId: "198160731-00008",
    KorCountry: "Mozambique",
    OrderDate: "2021-01-16",
    CardNumber: "5587-2139-9692-3644",
    Monetary: "EUR",
    StartDate: "2018-02-25",
    EndDate: "2021-08-12",
    ToMonth: "23",
    Month: "41",
    Year: "3",
    InterestRate: "0.15",
    SaveCost: "51000",
    SaveMaturity: "14950650",
    CurrentSave: "9304950",
    Rating: "5",
    BusinessProficiency: "59",
    Address: "45-89 Gonghang-dong, Gangseo-gu, Seoul"
  },
  {
    KorName: "Jo Il-hyeong",
    Gender: "M",
    Age: "62",
    Phone: "(093)8809-8696",
    ProductId: "571215854-00001",
    KorCountry: "Canada",
    OrderDate: "2019-07-29",
    CardNumber: "5348-5093-3750-0623",
    Monetary: "USD",
    StartDate: "2019-10-21",
    EndDate: "2022-12-11",
    ToMonth: "3",
    Month: "37",
    Year: "3",
    InterestRate: "0.38",
    SaveCost: "14000",
    SaveMaturity: "7801080",
    CurrentSave: "1108520",
    Rating: "3",
    BusinessProficiency: "53",
    Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
  }
];

dataProvider.fillJsonData(initialData, { fillMode: "set" });

function insertData() {
  const data = [
    {
      KorName: "Kim Deok-jung",
      Gender: "F",
      Age: "53",
      Phone: "(064)5483-6874",
      ProductId: "149115669-00009",
      KorCountry: "Canada",
      OrderDate: "2020-03-08",
      CardNumber: "5121-9931-3555-9853",
      Monetary: "HKD",
      StartDate: "2018-12-30",
      EndDate: "2022-01-16",
      ToMonth: "13",
      Month: "36",
      Year: "3",
      InterestRate: "0.32",
      SaveCost: "112000",
      SaveMaturity: "50480640",
      CurrentSave: "20805120",
      Rating: "3",
      BusinessProficiency: "14",
      Address: "115-15 whennwol-dong, Yangcheon-gu, Seoul"
    },
    {
      KorName: "Guk Young-seok",
      Gender: "M",
      Age: "63",
      Phone: "(044)7055-3032",
      ProductId: "738027655-00005",
      KorCountry: "Bouvet Island",
      OrderDate: "2020-05-01",
      CardNumber: "5571-3720-2975-7540",
      Monetary: "AUD",
      StartDate: "2019-08-15",
      EndDate: "2021-12-23",
      ToMonth: "5",
      Month: "28",
      Year: "2",
      InterestRate: "0.2",
      SaveCost: "84000",
      SaveMaturity: "15523200",
      CurrentSave: "4704000",
      Rating: "3",
      BusinessProficiency: "14",
      Address: "707-9 Yeoksam-dong, Gangnam-gu, Seoul"
    }
  ];

  dataProvider.fillJsonData(data, {
    fillMode: "insert",
    start: 1,
    count: 1,
    fillPos: 0
  });
}

window.insertData = insertData;
```

```js
var data = [
   {
     KorName: "Kim Deok-jung",
     Gender: “Female”,
     Age: "53",
     Phone: "(064)5483-6874",
     ProductID: "149115669-00009",
     KorCountry: "Canada",
     OrderDate: "2020-03-08",
     Cardnumber: "5121-9931-3555-9853",
     Monetary: "HKD",
     StartDate: "2018-12-30",
     EndDate: "2022-01-16",
     ToMonth: "13",
     Month: "36",
     Year: "3",
     InterestRate: "0.32",
     SaveCost: "112000",
     SaveMaturity: "50480640",
     CurrentSave: "20805120",
     Rating: "3",
     BusinessProficiency: "14",
     Address: "115-15, Sinwol-dong, Yangcheon-gu, Seoul"
   },
   {
     KorName: "Kook Young-seok",
     Gender: “Male”,
     Age: "63",
     Phone: "(044)7055-3032",
     ProductId: "738027655-00005",
     KorCountry: "Bouvet Island",
     OrderDate: "2020-05-01",
     CardNumber: "5571-3720-2975-7540",
     Monetary: “AUD”,
     StartDate: "2019-08-15",
     EndDate: "2021-12-23",
     ToMonth: "5",
     Month: "28",
     Year: "2",
     InterestRate: "0.2",
     SaveCost: "84000",
     SaveMaturity: "15523200",
     CurrentSave: "4704000",
     Rating: "3",
     BusinessProficiency: "14",
     Address: "707-9 Yeoksam-dong, Gangnam-gu, Seoul"
   }
];

dataProvider.fillJsonData(data, {
   fillMode: "insert",
   start: 1,
   count: 1,
   fillPos: 0
});
```

Among the newly imported data, two data are imported starting from the second data and overwritten (updated) starting from the second data of the current grid. To do this, we use the start: 1, count: 2, fillPos: 0 properties of DataFillOptions.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { 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: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

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) => {
    const data = [
      {
        KorName: "Park Young-ho",
        Gender: "M",
        Age: "71",
        Phone: "(025)6563-2802",
        ProductId: "198160731-00008",
        KorCountry: "Mozambique",
        OrderDate: "2021-01-16",
        CardNumber: "5587-2139-9692-3644",
        Monetary: "EUR",
        StartDate: "2018-02-25",
        EndDate: "2021-08-12",
        ToMonth: "23",
        Month: "41",
        Year: "3",
        InterestRate: "0.15",
        SaveCost: "51000",
        SaveMaturity: "14950650",
        CurrentSave: "9304950",
        Rating: "5",
        BusinessProficiency: "59",
        Address: "45-89 Gonghang-dong, Gangseo-gu, Seoul"
      },
      {
        KorName: "Jo Il-hyeong",
        Gender: "M",
        Age: "62",
        Phone: "(093)8809-8696",
        ProductId: "571215854-00001",
        KorCountry: "Canada",
        OrderDate: "2019-07-29",
        CardNumber: "5348-5093-3750-0623",
        Monetary: "USD",
        StartDate: "2019-10-21",
        EndDate: "2022-12-11",
        ToMonth: "3",
        Month: "37",
        Year: "3",
        InterestRate: "0.38",
        SaveCost: "14000",
        SaveMaturity: "7801080",
        CurrentSave: "1108520",
        Rating: "3",
        BusinessProficiency: "53",
        Address: "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
      },
      {
        KorName: "Kim Deok-jung",
        Gender: "F",
        Age: "53",
        Phone: "(064)5483-6874",
        ProductId: "149115669-00009",
        KorCountry: "Canada",
        OrderDate: "2020-03-08",
        CardNumber: "5121-9931-3555-9853",
        Monetary: "HKD",
        StartDate: "2018-12-30",
        EndDate: "2022-01-16",
        ToMonth: "13",
        Month: "36",
        Year: "3",
        InterestRate: "0.32",
        SaveCost: "112000",
        SaveMaturity: "50480640",
        CurrentSave: "20805120",
        Rating: "3",
        BusinessProficiency: "14",
        Address: "115-15 whennwol-dong, Yangcheon-gu, Seoul"
      },
      {
        KorName: "Guk Young-seok",
        Gender: "M",
        Age: "63",
        Phone: "(044)7055-3032",
        ProductId: "738027655-00005",
        KorCountry: "Bouvet Island",
        OrderDate: "2020-05-01",
        CardNumber: "5571-3720-2975-7540",
        Monetary: "AUD",
        StartDate: "2019-08-15",
        EndDate: "2021-12-23",
        ToMonth: "5",
        Month: "28",
        Year: "2",
        InterestRate: "0.2",
        SaveCost: "84000",
        SaveMaturity: "15523200",
        CurrentSave: "4704000",
        Rating: "3",
        BusinessProficiency: "14",
        Address: "707-9 Yeoksam-dong, Gangnam-gu, Seoul"
      }
    ];

    grid.getDataSource().fillJsonData(data, { fillMode: "set" });
  }
}, {
  fields
});

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

function updateData() {
  const data = [
    {
      KorName: "Jeon Woo-su",
      Gender: "F",
      Age: "73",
      Phone: "(051)2259-4592",
      ProductId: "969966274-00009",
      KorCountry: "Peru",
      OrderDate: "2019-12-27",
      CardNumber: "5255-8067-8768-5495",
      Monetary: "THB",
      StartDate: "2018-04-11",
      EndDate: "2022-08-22",
      ToMonth: "22",
      Month: "52",
      Year: "4",
      InterestRate: "0.4",
      SaveCost: "40000",
      SaveMaturity: "45344000",
      CurrentSave: "20384000",
      Rating: "3",
      BusinessProficiency: "100",
      Address: "600 Garak-dong, Songpa-gu, Seoul"
    },
    {
      KorName: "Lee Jun-won",
      Gender: "M",
      Age: "25",
      Phone: "(086)7381-3123",
      ProductId: "299037986-00005",
      KorCountry: "East Timor",
      OrderDate: "2019-06-14",
      CardNumber: "5182-7600-2022-5395",
      Monetary: "AUD",
      StartDate: "2018-06-02",
      EndDate: "2022-02-13",
      ToMonth: "20",
      Month: "44",
      Year: "3",
      InterestRate: "0.1",
      SaveCost: "152000",
      SaveMaturity: "36115200",
      CurrentSave: "20064000",
      Rating: "3",
      BusinessProficiency: "53",
      Address: "937 Daechi-dong, Gangnam-gu, Seoul"
    },
    {
      KorName: "Ahn Byung-eun",
      Gender: "M",
      Age: "46",
      Phone: "(018)2861-7855",
      ProductId: "048679773-00001",
      KorCountry: "Fiji",
      OrderDate: "2020-11-01",
      CardNumber: "5172-0915-3934-2048",
      Monetary: "VND",
      StartDate: "2019-05-30",
      EndDate: "2021-06-09",
      ToMonth: "8",
      Month: "24",
      Year: "2",
      InterestRate: "0.39",
      SaveCost: "170000",
      SaveMaturity: "42268800",
      CurrentSave: "16809600",
      Rating: "4",
      BusinessProficiency: "81",
      Address: "240-1 Galhyeon-dong, Eunpyeong-gu, Seoul"
    }
  ];

  dataProvider.fillJsonData(data, {
    fillMode: "update",
    start: 1,
    count: 2,
    fillPos: 1
  });
}

window.updateData = updateData;
```

```js
var data = [
   {
     KorName: "Jeonwoosu",
     Gender: “Female”,
     Age: "73",
     Phone: "(051)2259-4592",
     ProductId: "969966274-00009",
     KorCountry: "Peru",
     OrderDate: "2019-12-27",
     CardNumber: "5255-8067-8768-5495",
     Monetary: “THB”,
     StartDate: "2018-04-11",
     EndDate: "2022-08-22",
     ToMonth: "22",
     Month: "52",
     Year: "4",
     InterestRate: "0.4",
     SaveCost: "40000",
     SaveMaturity: "45344000",
     CurrentSave: "20384000",
     Rating: "3",
     BusinessProficiency: "100",
     Address: "600 Garak-dong, Songpa-gu, Seoul"
   },
   {
     KorName: "Lee Jun-won",
     Gender: “Male”,
     Age: "25",
     Phone: "(086)7381-3123",
     ProductId: "299037986-00005",
     KorCountry: "East Timor",
     OrderDate: "2019-06-14",
     CardNumber: "5182-7600-2022-5395",
     Monetary: “AUD”,
     StartDate: "2018-06-02",
     EndDate: "2022-02-13",
     ToMonth: "20",
     Month: "44",
     Year: "3",
     InterestRate: "0.1",
     SaveCost: "152000",
     SaveMaturity: "36115200",
     CurrentSave: "20064000",
     Rating: "3",
     BusinessProficiency: "53",
     Address: "937 Daechi-dong, Gangnam-gu, Seoul"
   },
   {
     KorName: "Ahn Byeong-eun",
     Gender: “Male”,
     Age: "46",
     Phone: "(018)2861-7855",
     ProductId: "048679773-00001",
     KorCountry: "Fiji",
     OrderDate: "2020-11-01",
     CardNumber: "5172-0915-3934-2048",
     Monetary: "VND",
     StartDate: "2019-05-30",
     EndDate: "2021-06-09",
     ToMonth: "8",
     Month: "24",
     Year: "2",
     InterestRate: "0.39",
     SaveCost: "170000",
     SaveMaturity: "42268800",
     CurrentSave: "16809600",
     Rating: "4",
     BusinessProficiency: "81",
     Address: "240-1 Galhyeon-dong, Eunpyeong-gu, Seoul"
   }
];

dataProvider.fillJsonData(data, {
   fillMode: "update", start: 1, count: 2, fillPos: 1
});
```