UIKernel is a comprehensive React.js UI library for building forms, editable grids and reports with drilldowns and filters, based on simple unified record model with client-side and server-side validations and data bindings.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
examples
gulp
scripts
src
themes/base
.babelrc
.editorconfig
.eslintrc
.flowconfig
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
browser.js
gulpfile.babel.js
main.js
package.json

README.md

UIKernel

UIKernel is a lib, built in React, with a CRUD wrapper for building complex admin dashboards.

UIKernel tries to avoid unnecessary abstractions, giving you the opportunity to define a model as you want. Nevertheless, it includes basic implementation examples that work with client data and models linking server and client interface using API.

Features

  • Data Grid

    • Interact with data. You can set up grid not only to display data but to add new records, update or delete them.

    • Filtering. UIKernel grid supports filtering by different fields.

    • Sorting & pagination. Sort data by default order or by user choice and paginate the data.

    • Data export. Export grid data in JSON or CSV formats for further interaction.

    • Bulk operations.

  • Forms

    • Form management. FormService and @connectForm decorator simplify development of forms.

    • Grid to Form model adapters. You can use Grid models in forms.

  • Validation. Use UIKernel validators to check fields on client, or both on client and the server. Also supports custom validation rules.

  • Data source. Pass data from a static array, a REST service or any other source to the UIKernel model.

  • Convenient inputs. Each form input or grid cell can be edited, including: a date picker, suggest box, number, select, checkbox.

  • Synchronize multiple components. Automatic synchronization of multiple forms and grids with a shared data model.

Documentation

You can find the full documentation on the website.

Examples

We have examples on the website.

Getting Started

To get started:

  1. Setup Create React App in terminal
# Setup React boilerplate
npm install -g create-react-app
create-react-app react-app
cd react-app

# Install UIKernel
npm i uikernel
  1. Open up src/index.js and replace all with:
 import React from 'react';
 import ReactDOM from 'react-dom';
 import UIKernel from 'uikernel';
 import 'uikernel/themes/base/main.css';

 // You can implement own data source with GridModel interface
 const model = new UIKernel.Models.Grid.Collection({
   data: [
     [1, {
       name: 'Pace',
       surname: 'White',
       age: 20
     }],
     [2, {
       name: 'Evangeline',
       surname: 'Terrell',
       age: 72
     }],
     [3, {
       name: 'Roach',
       surname: 'Potts',
       age: 14
     }]
   ]
 });

 const columns = {
   name: {
     name: 'First Name',
     render: ['name', record => record.name]
   },
   surname: {
     name: 'Last Name',
     render: ['surname', record => record.surname]
   },
   age: {
     name: 'Age',
     render: ['age', record => record.age]
   }
 };

 ReactDOM.render(
   <UIKernel.Grid cols={columns} model={model}/>,
   document.getElementById('root')
 );
  1. Try it out using npm start

As you can see, we've passed UIKernel.Grid two props: cols and model. We've defined these props in the columns and model script parts as you can see in comments.

Then, to create a grid model, we've used UIKernel.Models.Grid.Collection.

And that's all. Here's the live demo and code.