npm package: @smarthtmlelements/smart-grid
Description: Grid Web Component - Grid Custom Element - https://www.HTMLElements.com
Author: https://www.htmlelements.com
Latest version: 6.2.0

# [Smart Grid Element](https://www.htmlelements.com)[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Get%20over%2020%20free%20custom%20elements%20based%20on%20SmartHTMLElements%20&url=https://www.htmlelements.com/&via=htmlelements&hashtags=bootstrap,design,templates,autocomplete,grid,typeahead,developers,webcomponents,customelements,polymer,material)

&nbsp;
[![Price](https://img.shields.io/badge/price-$399-0098f7.svg)](https://github.com/HTMLElements/smart-grid/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-grid.svg?style=flat)](https://www.npmjs.com/package/@smarthtmlelements/smart-grid)
[![GitHub package version](https://img.shields.io/github/package-json/v/HTMLElements/smart-grid.svg)](https://github.com/HTMLElements/smart-grid)
[![](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=www.htmlelements.com)](https://www.htmlelements.com)


The Best Grid Web Component in the World. Built with Javascript ES6, CSS3. Works with Angular, React and Vue. No dependencies and No learning curve.

### Grid Features Lists

* Reactivity Support
* Mobile-Ready
* Loading 300 000 records in 1sec
* Data Binding to Observable collection
* Sorting by one or multiple columns
* Filtering
* Grouping
* Cells Formatting
* Selection by Row or Multiple Rows
* Selection by Cell or Range of Cells
* Selection by Column
* Pagination with Pager displayed below or above the Grid
* Editing by Cell, Row, Dialog or with Static or Inline Command Command. Batch Editing
* Multiple built-in Editors for List Editing, Text Editing, Date Editing and Custom Editors
* Virtualization by Data and User Interface
* Frozen | Pinned Rows and Columns
* Merged Cells
* Custom Cell Styles
* Server-Side Data Loading, Filtering, Sorting, Pagination, Editing Operations 
* Live Stream Updates
* .xlsx Import/Export
* Export to PDF, CSV, TSV, HTML, XML, JSON

* Dark and Light Mode




# &lt;smart-grid&gt;

[Live Demos ↗](https://htmlelements.com/demos/)
|
[Documentation ↗](https://www.htmlelements.com/docs/)
|
[Installation ↗](https://www.npmjs.com/package/@smarthtmlelements/smarthtmlelements-core)

[&lt;smart-grid&gt;](https://htmlelements.com/demos/) is a Data Grid Web Component with multiple different features like: Data Binding, Data Sorting, Filtering, Pagination, Editing, Live Updates, Virtual Data Load and more. The Grid is part of the [Smart HTML Elements](https://htmlelements.com/).

[<img src="https://raw.githubusercontent.com/htmlelements/smart-grid/master/grid-web-component.png" alt="Grid Web Component">](https://htmlelements.com/demos/)

[<img src="https://raw.githubusercontent.com/htmlelements/smart-grid/master/grid-web-component-dialog.png" alt="Grid Web Component Dialog">](https://htmlelements.com/demos/)

[<img src="https://raw.githubusercontent.com/htmlelements/smart-grid/master/grid-web-component-filtering.png" alt="Grid Web Component Filtering">](https://htmlelements.com/demos/)

[<img src="https://raw.githubusercontent.com/htmlelements/smart-grid/master/grid-web-component-merged-cells.png" alt="Grid Web Component Merged Cells">](https://htmlelements.com/demos/)

## Getting Started

Smart HTML Elements components documentation includes getting started, customization and api documentation topics.

[Getting Started Documentation](https://www.htmlelements.com/docs/)
|

## The file structure for Smart HTML Elements

- `source/`

  Javascript files.

- `source/styles/`

  Component CSS Files.

- `demos/`

  Demo files

## Running demos in browser

1. Fork the repository and clone it locally.

1. Make sure you have [npm](https://www.npmjs.com/) installed.

1. When in the directory, run `npm install` 

1. Run a localhost and copy some of the demos from [https://www.htmlelements.com/demos/grid/overview/]


## Following the coding style

We are using [ESLint](http://eslint.org/) for linting JavaScript code. 

## Creating a pull request

  - Make sure your code is compliant with ESLint
  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
  - Wait for response from one of our team members


## License

Commercial Professional and Free Community