uikernel
v1.0.0
Published
UI library
Downloads
7
Readme
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:
- 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
- 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')
);
- 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.