# RealGrid

RealGrid is a javascript data grid component with various powerful functions such as editing, row grouping, filtering, and sorting data on web environment.

## Table of Contents

- [Install](#install)
- [License](#license)
- [Usage](#usage)
    - [About typescript configs](#about-typescript-configs)
    - [Styles](#styles)
    - [Library Target](#library-target)
- [Maintainer](#maintainer)
- [example](#example)
- [Asking Questions](#asking-questions)

## Install

```
npm i realgrid
```

### License

> The License file is required for proper use. More information, visit: https://support.realgrid.com/download 

## Usage

> It's usage in typescript. If you want to use in javascript, just remove the type.

```ts
//index.ts
import { LocalDataProvider, GridView } from 'realgrid'
// or you can use default import ex) import RealGrid from 'realgrid';
// then it should be...ex) new RealGrid.GridView(container);

const container = document.createElement('div');
document.body.appendChild(container);
    
container.id = 'realgrid';
const ds = new LocalDataProvider(false);
const grid = new GridView(container);
grid.setDataSource(ds);

ds.setFields(fields);
grid.setColumns(columns);
ds.setRows(rows);
...

```

```ts
// fields
import {ValueType, DataFieldInput} from 'realgrid';

export const fields: DataFieldInput[] = [
    {
        "fieldName": "Name",
        "dataType": ValueType.TEXT
    },
    {
        "fieldName": "FullName",
        "dataType": ValueType.TEXT
    },
    {
        "fieldName": "Email",
        "dataType": ValueType.TEXT
    },
    {
        "fieldName": "Company",
        "dataType": ValueType.TEXT
    },
    {
        "fieldName": "Phone",
        "dataType": ValueType.TEXT
    }
]
```

```ts
//columns
export const columns = [{
    "name": "Name",
    "fieldName": "Name",
    "type": "data",
    "width": "80",
    "styles": {
        "textAlignment": "center"
    },
    "header": {
        "text": "Name",
        showTooltip: true,
        tooltip:'<span style="color: red;">이름</span>',
    },
    renderer: {
        type:"text",
        showTooltip:true
    }
}, {
    "name": "FullName",
    "fieldName": "FullName",
    "type": "data",
    "width": "150",
    "styles": {
        "textAlignment": "center"
    },
    "header": {
        "text": "Full Name"
    }
}, 
...
```

### About typescript configs

> **recommendation**: for convenient, set `strictNullChecks` option as `false` on `tsconfig.json`

```json
{
    "compilerOptions": {
        "strictNullChecks": false,
        ...
    }
}
```

or check if the object exists.

```ts
/// good!
if( grid.filteringOptions.automating) {
    grid.filteringOptions.automating.dateCategorize = false;
}

// error
grid.filteringOptions?.automating?.dateCategorize = false;
```

### styles

- The themes are located in './dist'

```ts
import 'realgrid/dist/realgrid-style.css';
```

### Library Target

- main.esm.js for ES
- main.js for umd

## Maintainer
[@zerosheepmoo](https://github.com/zerosheepmoo).

## Exmaple

> visit: https://github.com/realgrid/realgrid2-examples

## Asking Questions

> support@realgrid.com