Datagrid component (no framework)
npm install @activewidgets/js
###
sh
> npm i --save @activewidgets/js
`
Usage
Import mount function into your app -
`js
import { mount } from "@activewidgets/js";
`
Now, assuming that you've added a placeholder ax-datagrid tag to the page
`html
Loading...
`
Mount an actual ActiveWidgets component at the placeholder position -
`js
const rows = [
{ message: 'Hello, World!' }
];
mount('ax-datagrid', { rows });
`
Live example | Source on github | Edit on stackblitz
CDN links
For quick prototyping the package is also available over ActiveWidgets CDN -
`html
`
In this case the mount function is available at ActiveWidgets.JS global namespace.
`js
var mount = ActiveWidgets.JS.mount;
var rows = [
{ framework: 'none', source: 'CDN', language: 'ES5'}
];
mount('ax-datagrid', { rows: rows });
`
Live example | Source on github | Edit on stackblitz
Mount function
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.
`js
mount('#grid1', { columns, rows });
`
The placeholder element tag must be ax-datagrid
`html
`
The mount function returns update and destroy methods.
`js
const { update } = mount('#my-grid', { columns, rows });
//...
update({ rows: newRows });
`
Data properties
You have to provide columns and rows properties to the datagrid to show some data. The properties of each column object define how the data will be rendered -
- field - where the cell data comes from (string|function)
- header - column header (string|object)
- width - column width (number, in pixels)
- align - cell text alignment (left|right|center)
- format - number/date format (string|function)
- fixed - fixed (true/false) for columns on the left or right side
The style (string|object) or className properties allow to change the styling of the column and cell elements.
`js
const columns = [
{ header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true },
{ header: 'Company Name', field: 'companyName', width: 160 },
{ header: 'Contact', field: 'contactName', width: 120 },
{ header: 'Title', field: 'contactTitle', width: 120 },
{ header: 'Address', field: 'address', width: 120, align: 'right' }
];
const rows = northwind.customers;
mount('ax-datagrid', { columns, rows });
`
Live example | Source on github | Edit on stackblitz
User events
In addition to the standard DOM keyboard and mouse events the datagrid emits composite
mouse event which makes it easier to find the elements affected by the user action -
`js
function onMouse({ row }){
alert(row ${ row.key } clicked!);
}
mount('ax-datagrid', { onMouse, columns, rows }); // put event handlers together with props
``