# HTML HTML (Custom Elements)

npm version (opens new window) npm downloads (opens new window) Github issues (opens new window) Github repo (opens new window)

ActiveWidgets Datagrid as HTML Custom Elements.

ATTENTION!

This package requires dependencies under ⚠️ FREE TRIAL/COMMERCIAL license. You have to purchase a license (opens new window) 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>
  or
<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>
    </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>
    </div>;
}

← @activewidgets/jquery →