6.2.0 • Public • Published

    Smart Grid ElementTweet

      Price npm GitHub package version

    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


    Live Demos ↗ | Documentation ↗ | Installation ↗

    <smart-grid> 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.

    Grid Web Component

    Grid Web Component Dialog

    Grid Web Component Filtering

    Grid Web Component Merged Cells

    Getting Started

    Smart HTML Elements components documentation includes getting started, customization and api documentation topics.

    Getting Started Documentation |

    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.

    2. Make sure you have npm installed.

    3. When in the directory, run npm install

    4. 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 for linting JavaScript code.

    Creating a pull request

    • Make sure your code is compliant with ESLint
    • Submit a pull request with detailed title and description
    • Wait for response from one of our team members


    Commercial Professional and Free Community


    npm i @smarthtmlelements/smart-grid

    DownloadsWeekly Downloads






    Unpacked Size

    151 kB

    Total Files


    Last publish


    • bmarkov
    • smartcustomelements