@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.
956 lines (933 loc) • 70.3 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<sup>®</sup> Essential<sup>®</sup> JS 2 - JavaScript UI Controls Library</span>
</a>
</h1>
<a href="https://www.npmjs.com/package/@syncfusion/ej2">
<img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm" style="height:20px;"></a> <a href="https://www.syncfusion.com/eula/es/"><img src="https://ej2.syncfusion.com/github/images/license.svg" alt="license"></a>
The Syncfusion<sup>®</sup> JavaScript UI controls library is the only suite that you will ever need to build an application since it contains over 70+ 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<sup>®</sup> Essential<sup>®</sup> 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<sup>®</sup> 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<sup>®</sup> 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/images/npm-logo.png" 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#/fluent2/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/images/npm-logo.png" 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#/fluent2/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-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/images/npm-logo.png" 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/#/fluent2/tree-grid/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/treegrid/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/images/npm-logo.png" 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/#/fluent2/spreadsheet/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/spreadsheet/getting-started/">Documentation</a>
</td>
</tr>
</table>
### File Viewers & Editors
<table>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-in-place-editor?utm_medium=listing&utm_source=github"><b>In-place Editor</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-inplace-editor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-inplace-editor" title="@syncfusion/ej2-inplace-editor" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-inplace-editor"><img src="https://ej2.syncfusion.com/badges/ej2-inplace-editor/coverage.svg" alt="code coverage of @syncfusion/ej2-inplace-editor" title="@syncfusion/ej2-inplace-editor" /></a>
</td>
<td>
<a href="controls/inplaceeditor/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/fluent2/inplace-editor/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/in-place-editor/getting-started/">Documentation</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer?utm_medium=listing&utm_source=github"><b>PDF Viewer</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-pdfviewer"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-pdfviewer" title="@syncfusion/ej2-pdfviewer" /></a> <a href="https://ej2.syncfusion.com/badges/ej2-pdfviewer"><img src="https://ej2.syncfusion.com/badges/ej2-pdfviewer/coverage.svg" alt="code coverage of @syncfusion/ej2-pdfviewer" title="@syncfusion/ej2-pdfviewer" /></a>
</td>
<td>
<a href="controls/pdfviewer/src">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/fluent2/pdfviewer/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/">Documentation</a>
</td>
</tr>
<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/images/npm-logo.png" 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#/fluent2/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/images/npm-logo.png" 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#/fluent2/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/images/npm-logo.png" 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#/fluent2/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://ej2.syncfusion.com/demos#/fluent2/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#/fluent2/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/#/fluent2/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-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#/fluent2/multi-select/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/multi-select/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://ej2.syncfusion.com/demos/#/fluent2/list-box/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/list-box/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Inputs
<table>
<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 rowspan="3">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/textbox">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/fluent2/textbox/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/textbox/getting-started/">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#/fluent2/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#/fluent2/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-radio-button?utm_medium=listing&utm_source=github"><b>Radio Button</b></a>
</td>
<td rowspan="2">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/radio-button">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/fluent2/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-checkbox?utm_medium=listing&utm_source=github"><b>Checkbox</b></a>
</td>
<td>
<a href="controls/buttons/src/check-box">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos/#/fluent2/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-color-picker?utm_medium=listing&utm_source=github"><b>Color Picker</b></a>
</td>
<td rowspan="3">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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#/fluent2/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#/fluent2/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-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#/fluent2/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-toggle-switch-button?utm_medium=listing&utm_source=github"><b>Toggle Switch Button</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/switch">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/fluent2/button/switch.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/switch/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Data Visualization
<table>
<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 rowspan="2">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/chart">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/fluent2/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-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/#/fluent2/stock-chart/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/stock-chart/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/images/npm-logo.png" 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#/fluent2/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/images/npm-logo.png" 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#/fluent2/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/images/npm-logo.png" 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#/fluent2/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-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/images/npm-logo.png" 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#/fluent2/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/images/npm-logo.png" 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#/fluent2/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-range-selector?utm_medium=listing&utm_source=github"><b>Range Selector</b></a>
</td>
<td rowspan="2">
<a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/range-navigator">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/fluent2/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#/fluent2/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-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/images/npm-logo.png" 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/#/fluent2/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-sparkline?utm_medium=listing&utm_source=github"><b>Sparkline Charts</b></a>
</td>
<td>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/sparkline">Source</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/demos#/fluent2/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-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/images/npm-logo.png" 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#/fluent2/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>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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/#/fluent2/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-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/images/npm-logo.png" 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/#/fluent2/kanban/overview.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/kanban/getting-started/">Documentation</a>
</td>
</tr>
</table>
### Calendars
<table>
<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/images/npm-logo.png" 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#/fluent2/schedule/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/schedule/getting-started/">Documentation</a>
</td>
</tr>
<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/images/npm-logo.png" 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#/fluent2/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#/fluent2/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#/fluent2/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#/fluent2/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#/fluent2/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/images/npm-logo.png" 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/#/fluent2/gantt/default.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/gantt/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/images/npm-logo.png" 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#/fluent2/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#/fluent2/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#/fluent2/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#/fluent2/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#/fluent2/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#/fluent2/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#/fluent2/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/images/npm-logo.png" 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/#/fluent2/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>
<a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" 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#/fluent2/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-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/images/npm-logo.png" 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#/fluent2/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#/fluent2/button/dropdown-button.html">Live demo</a>
</td>
<td>
<a href="https://ej2.syncfusion.com/documentation/drop-down-button/