1.1.14 • Published 2 years ago
celsior-grid v1.1.14
Celsior Grid
Celsior Grid is a fully-featured and highly customizable JavaScript data grid.
Features
In addition to the standard set of features you'd expect from any grid:
- Column Interactions (resize, reorder, and pin columns)
- Pagination
- Sorting
- Row Selection
Here are some of the features that make Celsior Grid stand out:
- paging *
Getting started
Install dependencies
$ npm install --save celsior-grid
Add a placeholder to HTML
<div id="myGrid" style="height: 150px; width: 600px" class="celsior-theme-default"></div>
Import the grid and styles
import { CelsiorGrid } from 'celsior-grid';
import 'celsior-grid/styles/celsior-grid.css';
import 'celsior-grid/styles/celsior-theme-default.css';
Set configuration
var gridOptions = {
columns: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rows: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
};
Initialise the grid
var eGridDiv = document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);
License
This project is licensed under the MIT license. See the LICENSE file for more info.