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
• License
• Usage
  • About typescript configs
  • Styles
  • Library Target
• Maintainer
• example
• Asking Questions

Install

npm i realgrid

License

The License file is required for proper use. More information, visit: http://service.realgrid.com/start

Usage

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

//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);
...

// 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
    }
]

//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

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

or check if the object exists.

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

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

styles

• The themes are located in './dist'

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

Library Target

• main.esm.js for ES
• main.js for umd

Maintainer

@zerosheepmoo.

Exmaple

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

Asking Questions

[email protected]