@syncfusion/ej2
Version:
A modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies.
1,008 lines (982 loc) • 66.7 kB
Markdown
<h1>
<a href="https://www.syncfusion.com/javascript-ui-controls">
<img src="https://ej2.syncfusion.com/github/images/syncfusion.svg" alt="Syncfusion Inc." title="Syncfusion Inc." align="top" height="40px" />
<span>Syncfusion Essential JS 2 - JavaScript UI Controls Library</span>
</a>
</h1>
[](https://www.npmjs.com/package/@syncfusion/ej2) [](https://www.syncfusion.com/eula/es/)
The Syncfusion JavaScript UI controls library is the only suite that you will ever need to build an application since it contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package.
[](https://syncfusion.com/javascript-ui-controls/)
*Screens of [showcase applications](#showcase-applications) created using Syncfusion Essential JS 2 UI controls*
## Table of Contents
* [Framework highlights](#framework-highlights)
* [Control list](#control-list)
* [Grids](#grids)
* [Editors](#editors)
* [Dropdowns](#dropdowns)
* [Data Visualization](#data-visualization)
* [Calendars](#calendars)
* [Navigation](#navigation)
* [Buttons](#buttons)
* [Layout](#layout)
* [Notification](#notification)
* [Viewer](#viewer)
* [Resources](#resources)
* [Supported Frameworks](#supported-frameworks)
* [Showcase Applications](#showcase-applications)
* [Release Notes](#release-notes)
* [License](#license)
## Framework highlights
### Lightweight and user friendly
The entire Essential JS 2 framework is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires.
### Modular architecture
All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application.
### Built for performance
Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible.
### Responsive and touch friendly
All Essential JS 2 controls are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops.
### Stunning built-in themes
Pixel-perfect built-in themes are available in material, bootstrap and fabric design. In addition, it comes with Accessible high-contrast theme and an online tool "[Theme Studio](https://ej2.syncfusion.com/themestudio/)" to customize the provided built-in themes.
### Globalization simplified
Easily build applications to be used by a global audience in various language and culture settings.
### Stay current
With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed.
## Control List
### Grids
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-data-grid?utm_medium=listing&utm_source=github"><b>Data Grid</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-grids"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-grids" alt="npm package @syncfusion/ej2-grids" title="@syncfusion/ej2-grids" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-grids"><img src="https://ej2.syncfusion.com/badges/ej2-grids/coverage.svg" alt="code coverage of @syncfusion/ej2-grids" title="@syncfusion/ej2-grids" /></a>
</td>
<td>
<a href="controls/grids/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/grid/grid-overview.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/grid/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-pivot-table?utm_medium=listing&utm_source=github"><b>Pivot Table</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-pivotview"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-pivotview" alt="npm package @syncfusion/ej2-pivotview" title="@syncfusion/ej2-pivotview" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-pivotview"><img src="https://ej2.syncfusion.com/badges/ej2-pivotview/coverage.svg" alt="code coverage of @syncfusion/ej2-pivotview" title="@syncfusion/ej2-pivotview" /></a>
</td>
<td>
<a href="controls/pivotview/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/pivot-view/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/pivotview/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet?utm_medium=listing&utm_source=github"><b>Spreadsheet</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-spreadsheet"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-spreadsheet" alt="npm package @syncfusion/ej2-spreadsheet" title="@syncfusion/ej2-spreadsheet" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-spreadsheet"><img src="https://ej2.syncfusion.com/badges/ej2-spreadsheet/coverage.svg" alt="code coverage of @syncfusion/ej2-spreadsheet" title="@syncfusion/ej2-spreadsheet" /></a>
</td>
<td>
<a href="controls/spreadsheet/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/spreadsheet/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/spreadsheet/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-tree-grid?utm_medium=listing&utm_source=github"><b>Tree Grid</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-treegrid"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-treegrid" alt="npm package @syncfusion/ej2-treegrid" title="@syncfusion/ej2-treegrid" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-treegrid"><img src="https://ej2.syncfusion.com/badges/ej2-treegrid/coverage.svg" alt="code coverage of @syncfusion/ej2-treegrid" title="@syncfusion/ej2-treegrid" /></a>
</td>
<td>
<a href="controls/treegrid/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/tree-grid/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/treegrid/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Editors
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor?utm_medium=listing&utm_source=github"><b>Rich Text Editor</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-richtexteditor"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-richtexteditor" alt="npm package @syncfusion/ej2-richtexteditor" title="@syncfusion/ej2-richtexteditor" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-richtexteditor"><img src="https://ej2.syncfusion.com/badges/ej2-richtexteditor/coverage.svg" alt="code coverage of @syncfusion/ej2-richtexteditor" title="@syncfusion/ej2-richtexteditor" /></a>
</td>
<td>
<a href="controls/richtexteditor/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/rich-text-editor/tools.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-word-processor?utm_medium=listing&utm_source=github"><b>Word Processor</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-documenteditor"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-documenteditor" alt="npm package @syncfusion/ej2-documenteditor" title="@syncfusion/ej2-documenteditor" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-documenteditor"><img src="https://ej2.syncfusion.com/badges/ej2-documenteditor/coverage.svg" alt="code coverage of @syncfusion/ej2-documenteditor" title="@syncfusion/ej2-documenteditor" /></a>
</td>
<td>
<a href="controls/documenteditor/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/document-editor/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/document-editor/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Dropdowns
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-autocomplete?utm_medium=listing&utm_source=github"><b>AutoComplete</b></a>
</td>
<td rowspan="6">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-dropdowns"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-dropdowns" alt="npm package @syncfusion/ej2-dropdowns" title="@syncfusion/ej2-dropdowns" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-dropdowns"><img src="https://ej2.syncfusion.com/badges/ej2-dropdowns/coverage.svg" alt="code coverage of @syncfusion/ej2-dropdowns" title="@syncfusion/ej2-dropdowns" /></a>
</td>
<td>
<a href="controls/dropdowns/src/auto-complete">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/auto-complete/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/auto-complete/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-combobox?utm_medium=listing&utm_source=github"><b>ComboBox</b></a>
</td>
<td>
<a href="controls/dropdowns/src/combo-box">Source</a>
</td>
<td>
<a href="https://ej2syncfusion.com/demos#/material/combo-box/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/combo-box/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list?utm_medium=listing&utm_source=github"><b>Dropdown List</b></a>
</td>
<td>
<a href="controls/dropdowns/src/drop-down-list">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/drop-down-list/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree?utm_medium=listing&utm_source=github"><b>Dropdown Tree</b></a>
</td>
<td>
<a href="controls/dropdowns/src/drop-down-tree">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/drop-down-tree/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/drop-down-tree/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-listbox?utm_medium=listing&utm_source=github"><b>List Box</b></a>
</td>
<td>
<a href="controls/dropdowns/src/list-box">Source</a>
</td>
<td>
<a href="https://ej2syncfusion.com/demos/#/material/list-box/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/list-box/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown?utm_medium=listing&utm_source=github"><b>MultiSelect Dropdown</b></a>
</td>
<td>
<a href="controls/dropdowns/src/multi-select">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/multi-select/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/multi-select/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Inputs
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-checkbox?utm_medium=listing&utm_source=github"><b>Checkbox</b></a>
</td>
<td rowspan="3">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-buttons" alt="npm package @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>
</td>
<td>
<a href="controls/buttons/src/check-box">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/button/checkbox.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/check-box/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-radio-button?utm_medium=listing&utm_source=github"><b>Radio Button</b></a>
</td>
<td>
<a href="controls/buttons/src/radio-button">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/radio-button.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/radio-button/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-toggle-switch-button?utm_medium=listing&utm_source=github"><b>Toggle Switch Button</b></a>
</td>
<td>
<a href="controls/buttons/src/switch">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/switch.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/switch/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-color-picker?utm_medium=listing&utm_source=github"><b>Color Picker</b></a>
</td>
<td rowspan="7">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-inputs"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-inputs" alt="npm package @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-inputs"><img src="https://ej2.syncfusion.com/badges/ej2-inputs/coverage.svg" alt="code coverage of @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>
</td>
<td>
<a href="controls/inputs/src/color-picker">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/color-picker/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/color-picker/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-file-upload?utm_medium=listing&utm_source=github"><b>File Upload</b></a>
</td>
<td>
<a href="controls/inputs/src/uploader">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/uploader/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/uploader/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-form-validation?utm_medium=listing&utm_source=github"><b>Form Validation</b></a>
</td>
<td>
<a href="controls/inputs/src/form-validator">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/form-validator/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/form-validator/validation-rules/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-input-mask?utm_medium=listing&utm_source=github"><b>Input Mask</b></a>
</td>
<td>
<a href="controls/inputs/src/maskedtextbox">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/maskedtextbox/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/maskedtextbox/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-numeric-textbox?utm_medium=listing&utm_source=github"><b>Numeric Textbox</b></a>
</td>
<td>
<a href="controls/inputs/src/numerictextbox">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/numerictextbox/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/numerictextbox/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-range-slider?utm_medium=listing&utm_source=github"><b>Range Slider</b></a>
</td>
<td>
<a href="controls/inputs/src/slider">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/slider/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/range-slider/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-textbox?utm_medium=listing&utm_source=github"><b>TextBox</b></a>
</td>
<td>
<a href="controls/inputs/src/textbox">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/textbox/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/textbox/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Data Visualization
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-barcode?utm_medium=listing&utm_source=github"><b>Barcode Generator</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-barcode-generator"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-barcode-generator" alt="npm package @syncfusion/ej2-barcode-generator" title="@syncfusion/ej2-barcode-generator" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-barcode-generator"><img src="https://ej2.syncfusion.com/badges/ej2-barcode-generator/coverage.svg" alt="code coverage of @syncfusion/ej2-barcode-generator" title="@syncfusion/ej2-barcode-generator" /></a>
</td>
<td>
<a href="controls/barcodegenerator/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/javascript/demos/#/material/barcode/ean8.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/barcode/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge?utm_medium=listing&utm_source=github"><b>Circular Gauge</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-circulargauge"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-circulargauge" alt="npm package @syncfusion/ej2-circulargauge" title="@syncfusion/ej2-circulargauge" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-circulargauge"><img src="https://ej2.syncfusion.com/badges/ej2-circulargauge/coverage.svg" alt="code coverage of @syncfusion/ej2-circulargauge" title="@syncfusion/ej2-circulargauge" /></a>
</td>
<td>
<a href="controls/circulargauge/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/circular-gauge/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-diagram?utm_medium=listing&utm_source=github"><b>Diagram</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-diagrams"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-diagrams" alt="npm package @syncfusion/ej2-diagrams" title="@syncfusion/ej2-diagrams" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-diagrams"><img src="https://ej2.syncfusion.com/badges/ej2-diagrams/coverage.svg" alt="code coverage of @syncfusion/ej2-diagrams" title="@syncfusion/ej2-diagrams" /></a>
</td>
<td>
<a href="controls/diagrams/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/diagram/default-functionalities.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/diagram/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-heatmap-chart?utm_medium=listing&utm_source=github"><b>HeatMap Chart</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-heatmap"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-heatmap" alt="npm package @syncfusion/ej2-heatmap" title="@syncfusion/ej2-heatmap" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-heatmap"><img src="https://ej2.syncfusion.com/badges/ej2-heatmap/coverage.svg" alt="code coverage of @syncfusion/ej2-heatmap" title="@syncfusion/ej2-heatmap" /></a>
</td>
<td>
<a href="controls/heatmap/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/heatmap/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/heatmap-chart/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-kanban-board?utm_medium=listing&utm_source=github"><b>Kanban</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-kanban"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-kanban" alt="npm package @syncfusion/ej2-kanban" title="@syncfusion/ej2-kanban" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-kanban"><img src="https://ej2.syncfusion.com/badges/ej2-kanban/coverage.svg" alt="code coverage of @syncfusion/ej2-kanban" title="@syncfusion/ej2-kanban" /></a>
</td>
<td>
<a href="controls/kanban/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/kanban/overview.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/kanban/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-linear-gauge?utm_medium=listing&utm_source=github"><b>Linear Gauge</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-lineargauge"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-lineargauge" alt="npm package @syncfusion/ej2-lineargauge" title="@syncfusion/ej2-lineargauge" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-lineargauge"><img src="https://ej2.syncfusion.com/badges/ej2-lineargauge/coverage.svg" alt="code coverage of @syncfusion/ej2-lineargauge" title="@syncfusion/ej2-lineargauge" /></a>
</td>
<td>
<a href="controls/lineargauge/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/linear-gauge/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/linear-gauge/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-maps?utm_medium=listing&utm_source=github"><b>Maps</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-maps"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-maps" alt="npm package @syncfusion/ej2-maps" title="@syncfusion/ej2-maps" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-maps"><img src="https://ej2.syncfusion.com/badges/ej2-maps/coverage.svg" alt="code coverage of @syncfusion/ej2-maps" title="@syncfusion/ej2-maps" /></a>
</td>
<td>
<a href="controls/maps/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/maps/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/maps/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-treemap?utm_medium=listing&utm_source=github"><b>TreeMap</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-treemap"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-treemap" alt="npm package @syncfusion/ej2-treemap" title="@syncfusion/ej2-treemap" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-treemap"><img src="https://ej2.syncfusion.com/badges/ej2-treemap/coverage.svg" alt="code coverage of @syncfusion/ej2-treemap" title="@syncfusion/ej2-treemap" /></a>
</td>
<td>
<a href="controls/treemap/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/treemap/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/treemap/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart?utm_medium=listing&utm_source=github"><b>Bullet Chart</b></a>
</td>
<td rowspan="6">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-charts" alt="npm package @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-charts"><img src="https://ej2.syncfusion.com/badges/ej2-charts/coverage.svg" alt="code coverage of @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>
</td>
<td>
<a href="controls/charts/src/bullet-chart">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/bullet-chart/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/bullet-chart/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-charts?utm_medium=listing&utm_source=github"><b>Charts</b></a>
</td>
<td>
<a href="controls/charts/src/chart">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/chart/line.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/chart/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-range-selector?utm_medium=listing&utm_source=github"><b>Range Selector</b></a>
</td>
<td>
<a href="controls/charts/src/range-navigator">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/range-navigator/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/range-navigator/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-smith-chart?utm_medium=listing&utm_source=github"><b>Smith Chart</b></a>
</td>
<td>
<a href="controls/charts/src/smithchart">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/smith-chart/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/smithchart/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-sparkline?utm_medium=listing&utm_source=github"><b>Sparkline Charts</b></a>
</td>
<td>
<a href="controls/charts/src/sparkline">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/sparkline/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/sparkline/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-stock-chart?utm_medium=listing&utm_source=github"><b>Stock Chart</b></a>
</td>
<td>
<a href="controls/charts/src/stock-chart">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/stock-chart/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/stock-chart/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Calendars
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_medium=listing&utm_source=github"><b>Calendar</b></a>
</td>
<td rowspan="5">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-calendars"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-calendars" alt="npm package @syncfusion/ej2-calendars" title="@syncfusion/ej2-calendars" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-calendars"><img src="https://ej2.syncfusion.com/badges/ej2-calendars/coverage.svg" alt="code coverage of @syncfusion/ej2-calendars" title="@syncfusion/ej2-calendars" /></a>
</td>
<td>
<a href="controls/calendars/src/calendar">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/calendar/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/calendar/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-datepicker?utm_medium=listing&utm_source=github"><b>DatePicker</b></a>
</td>
<td>
<a href="controls/calendars/src/datepicker">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/datepicker/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/datepicker/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker?utm_medium=listing&utm_source=github"><b>DateRangePicker</b></a>
</td>
<td>
<a href="controls/calendars/src/daterangepicker">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/daterangepicker/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/daterangepicker/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker?utm_medium=listing&utm_source=github"><b>DateTime Picker</b></a>
</td>
<td>
<a href="controls/calendars/src/datetimepicker">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/datetimepicker/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/datetimepicker/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-timepicker?utm_medium=listing&utm_source=github"><b>TimePicker</b></a>
</td>
<td>
<a href="controls/calendars/src/timepicker">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/timepicker/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/timepicker/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart?utm_medium=listing&utm_source=github"><b>Gantt Chart</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-gantt"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-gantt" alt="npm package @syncfusion/ej2-gantt" title="@syncfusion/ej2-gantt" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-gantt"><img src="https://ej2.syncfusion.com/badges/ej2-gantt/coverage.svg" alt="code coverage of @syncfusion/ej2-gantt" title="@syncfusion/ej2-gantt" /></a>
</td>
<td>
<a href="controls/gantt/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/gantt/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/gantt/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-scheduler?utm_medium=listing&utm_source=github"><b>Scheduler</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-schedule"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-schedule" alt="npm package @syncfusion/ej2-schedule" title="@syncfusion/ej2-schedule" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-schedule"><img src="https://ej2.syncfusion.com/badges/ej2-schedule/coverage.svg" alt="code coverage of @syncfusion/ej2-schedule" title="@syncfusion/ej2-schedule" /></a>
</td>
<td>
<a href="controls/schedule/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/schedule/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/schedule/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Navigation
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_medium=listing&utm_source=github"><b>Accordion</b></a>
</td>
<td rowspan="7">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-navigations"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-navigations" alt="npm package @syncfusion/ej2-navigations" title="@syncfusion/ej2-navigations" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-navigations"><img src="https://ej2.syncfusion.com/badges/ej2-navigations/coverage.svg" alt="code coverage of @syncfusion/ej2-navigations" title="@syncfusion/ej2-navigations" /></a>
</td>
<td>
<a href="controls/navigations/src/accordion">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/accordion/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/accordion/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_medium=listing&utm_source=github"><b>Context Menu</b></a>
</td>
<td>
<a href="controls/navigations/src/context-menu">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/context-menu/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/context-menu/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_medium=listing&utm_source=github"><b>Menu Bar</b></a>
</td>
<td>
<a href="controls/navigations/src/menu">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/menu/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/menu/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_medium=listing&utm_source=github"><b>Sidebar</b></a>
</td>
<td>
<a href="controls/navigations/src/sidebar">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/sidebar/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/sidebar/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_medium=listing&utm_source=github"><b>Tabs</b></a>
</td>
<td>
<a href="controls/navigations/src/tab">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/tab/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/tab/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_medium=listing&utm_source=github"><b>Toolbar</b></a>
</td>
<td>
<a href="controls/navigations/src/toolbar">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/toolbar/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/toolbar/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_medium=listing&utm_source=github"><b>TreeView</b></a>
</td>
<td>
<a href="controls/navigations/src/treeview">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/treeview/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/treeview/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-file-manager?utm_medium=listing&utm_source=github"><b>File Manager</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-filemanager"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-filemanager" alt="npm package @syncfusion/ej2-filemanager" title="@syncfusion/ej2-filemanager" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-filemanager"><img src="https://ej2.syncfusion.com/badges/ej2-filemanager/coverage.svg" alt="code coverage of @syncfusion/ej2-filemanager" title="@syncfusion/ej2-filemanager" /></a>
</td>
<td>
<a href="controls/filemanager/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/file-manager/overview.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/file-manager/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Buttons
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-button?utm_medium=listing&utm_source=github"><b>Button</b></a>
</td>
<td rowspan="2">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-buttons" alt="npm package @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>
</td>
<td>
<a href="controls/buttons/src/button">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/button/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-chips?utm_medium=listing&utm_source=github"><b>Chips</b></a>
</td>
<td>
<a href="controls/buttons/src/chips">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/material/chips/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/chips/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-button-group?utm_medium=listing&utm_source=github"><b>Button Group</b></a>
</td>
<td rowspan="4">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-splitbuttons"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-splitbuttons" alt="npm package @syncfusion/ej2-splitbuttons" title="@syncfusion/ej2-splitbuttons" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-splitbuttons"><img src="https://ej2.syncfusion.com/badges/ej2-splitbuttons/coverage.svg" alt="code coverage of @syncfusion/ej2-splitbuttons" title="@syncfusion/ej2-splitbuttons" /></a>
</td>
<td>
<a href="controls/splitbuttons/src/button-group">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/button-group.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/button-group/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-menu?utm_medium=listing&utm_source=github"><b>Dropdown Menu</b></a>
</td>
<td>
<a href="controls/splitbuttons/src/drop-down-button">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/dropdown-button.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/drop-down-button/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-progress-button?utm_medium=listing&utm_source=github"><b>Progress Button</b></a>
</td>
<td>
<a href="controls/splitbuttons/src/progress-button">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/progress-button.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/progress-button/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-split-button?utm_medium=listing&utm_source=github"><b>Split Button</b></a>
</td>
<td>
<a href="controls/splitbuttons/src/split-button">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/button/split-button.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/split-button/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Layout
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-avatar?utm_medium=listing&utm_source=github"><b>Avatar</b></a>
</td>
<td rowspan="4">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-layouts"><img src="https://ej2.syncfusion.com/github-badges?package=@syncfusion/ej2-layouts" alt="npm package @syncfusion/ej2-layouts" title="@syncfusion/ej2-layouts" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-layouts"><img src="https://ej2.syncfusion.com/badges/ej2-layouts/coverage.svg" alt="code coverage of @syncfusion/ej2-layouts" title="@syncfusion/ej2-layouts" /></a>
</td>
<td>
<a href="controls/layouts/styles/avatar">Styles</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/avatar/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/avatar/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-card?utm_medium=listing&utm_source=github"><b>Card</b></a>
</td>
<td>
<a href="controls/layouts/styles/card">Styles</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/material/card/basic.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/card/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout?utm_medium=listing&utm_source=github"><b>Dashboard Layout</b></a>
</td>
<td>
<a href="controls/layouts/src/dashboard-layout">Source</a>
</td>
<td>