# HTML HTML (Custom Elements)

npm version npm downloads Github issues Github repo

ActiveWidgets Datagrid as HTML Custom Elements.


This package requires dependencies under ⚠️ FREE TRIAL/COMMERCIAL license. You have to purchase a license for each developer in your team before including this package in your application.

The library is available as an NPM package and over ActiveWidgets CDN.

> npm install --save @activewidgets/html

# NPM package

The main module reqisteres the components as HTML5 CustomElements and exports tpl function. It does not expose the internal component classes.

import { tpl } from "@activewidgets/html";

The css files are imported as dependencies - your bundler/build script should be configured to process css imports.

# Separate JS, CSS

If you build js and css separately - use @activewidgets/html/js and @activewidgets/html/css modules.

import { tpl } from "@activewidgets/html/js";  // code
import "@activewidgets/html/css";  // stylesheets

# Bundle

There is also a bundle module, which includes stylesheets as a string inside the javascript code and automatically injects them as a <style> tag into the page <head>.

import { tpl } from "@activewidgets/html/bundle";

This is the simplest if your build script does not like css imports.

For quick prototyping the package is also availble over ActiveWidgets CDN -

<script src="https://cdn.activewidgets.com/html"></script>

or, if you prefer separate js/css -

<link href="https://cdn.activewidgets.com/html/ax.css" rel="stylesheet" />
<script src="https://cdn.activewidgets.com/html/ax.js"></script>

which redirect to the latest version -

<script src="https://cdn.activewidgets.com/html@3.0.0/bundle.js"></script>
<link href="https://cdn.activewidgets.com/html@3.0.0/ax.css" rel="stylesheet" />
<script src="https://cdn.activewidgets.com/html@3.0.0/ax.js"></script>

Use ActiveWidgets.HTML global namespace with CDN packages.

const { tpl } = ActiveWidgets.HTML;

# Exported functions

Export Description
tpl HTML Templates
h JSX createElement

# tpl

The tpl function produces the render functions (templates) used for custom cells or other datagrid parts.

function contact({data}){
    return tpl`<div>
        <div class="bold">${data.contactName}</div>
        <div class="small">${data.contactTitle}</div>

# h

Can be used for writing templates with JSX.

 /** @jsx h */
function contact({data}){
    return <div>
        <div class="bold">{data.contactName}</div>
        <div class="small">{data.contactTitle}</div>