# Javascript Javascript (no framework)

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

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

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/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>
  or
<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>
    </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/preact →