# Introduction to RealGrid2

Woori Tech's **RealGrid2** is a web DataGrid UI library developed in TypeScript without external dependencies and is provided as a pure JavaScript file in ES5 format that can be used directly in modern web browsers.
Although the operation method has changed from Canvas method to DOM method in "RealGridJS 1.0", it is largely compatible with 1.0.

## Main concepts

To use RealGrid, you must understand RealGrid concepts. The image below is a schematic that briefly expresses the configuration of RealGrid.
RealGrid has a separate dataset called “DataProvider” for effective data management. The data to be placed in the grid is loaded into the DataProvider and used. Formats that can be stored in grid data sets include Json, XML, CSV, and Javascript Array formats. The advantage of RealGrid's MVC model is that you can connect multiple grid views to a single data set.

![loding](/images/concept/realgrid-concept.png)

## ItemModel

When you use the sort function in a grid, the order of the data displayed in the grid changes. RealGrid uses ItemModel to manage only the order information separately without changing the data order of the DataProvider. Therefore, the order in which they appear in the grid is referred to by ItemIndex, and when referencing data to the original DataProvider, the DataRow value is used. When using filters or paging functions as well as sorting, only the index of the data selected using the ItemModel is managed by the ItemModel.

## reference

- [Differences from previous versions of RealGridJS](/changelog/latest) ﹒﹒﹒ Check out the features that have changed from RealGridJS (version 1.0).