ActiveWidgets is a multi-framework UI component library. This package provides datagrid component as HTML5/CustomElement.
Live demo / Developer guide / API reference
Add @activewidgets/html to your project dependencies -
> npm i --save @activewidgets/htmlImport the library into your app to register the custom element tags -
import "@activewidgets/html";The ax-... tags will now function as ActiveWidgets components.
<ax-datagrid>Loading...</ax-datagrid>You can then assign properties and event handlers using standard DOM API.
const el = document.querySelector('ax-datagrid');
el.rows = [
{ message: 'Hello, World!' }
];Live example | Source on github | Edit on stackblitz
For quick prototyping the package is also available over ActiveWidgets CDN -
<script src="https://cdn.activewidgets.com/html"></script>Live example | Source on github | Edit on stackblitz
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.
const el = document.querySelector('ax-datagrid');
el.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' }
];
el.rows = northwind.customers;Live example | Source on github | Edit on stackblitz
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.
function onMouse({row}){
alert(`row ${row.key} clicked!`);
}
const el = document.querySelector('ax-datagrid');
el.columns = columns;
el.rows = rows;
el.addEventListener('mouse', event => onMouse(event.detail), true);Live example | Source on github | Edit on stackblitz
When assigning an event handler, note that the event data is passed in the event.detail property (we are using DOM CustomEvent class).
ActiveWidgets custom events do not bubble, so you should always add an event handler at the component itself, not at some parent element.
