# Javascript Javascript (no framework)

npm version npm downloads Github issues Github repo

ActiveWidgets Datagrid for the vanilla JS application, not using any UI framework.


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/js

# NPM package

The main module exports mount and tpl functions, does not expose internal component classes.

import { mount, tpl } from "@activewidgets/js";

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/js/js and @activewidgets/js/css modules.

import { mount, tpl } from "@activewidgets/js/js";  // code
import "@activewidgets/js/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 { mount, tpl } from "@activewidgets/js/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/js"></script>

or, if you prefer separate js/css -

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

which redirect to the latest version -

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

Use ActiveWidgets.JS global namespace with CDN packages.

const { mount, tpl } = ActiveWidgets.JS;

# Exported functions

Export Description
mount Mount function
tpl HTML Templates
h JSX createElement

# mount

The first argument for the mount function should be the target element (or selector). The second argument is a properties object. The target element tagName defines the component ID.

mount('#grid1', { columns, rows });

The placeholder element tag must be ax-datagrid

<ax-datagrid id="grid1"></ax-datagrid>

The mount function returns update and destroy methods.

const { update } = mount('#my-grid', { columns, rows });


update({ rows: newRows });

# 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>