Narwhal Parade Maestro

    @activewidgets/jquery

    3.2.0 • Public • Published

    ActiveWidgets/jQuery • Datagrid

    npm version npm downloads Github issues Github repo

    ActiveWidgets is a multi-framework UI component library. This package provides datagrid component for jQuery.

    Live demo / Developer guide / API reference

    Datagrid demo

    Installation

    Add @activewidgets/jquery to your project dependencies -

    > npm i --save @activewidgets/jquery

    Usage

    Import the library into your app -

    import "@activewidgets/jquery";

    It will add mount function to jQuery. Now, assuming that you've added a placeholder ax-datagrid tag to the page

    <ax-datagrid>Loading...</ax-datagrid>

    Assign properties and mount an actual ActiveWidgets component at the placeholder position -

    const rows = [
        { message: 'Hello, World!' }
    ];
    
    $('ax-datagrid')
        .prop('rows', rows)
        .mount();

    Live example | Source on github | Edit on stackblitz

    CDN links

    For quick prototyping the package is also available over ActiveWidgets CDN -

    <script src="https://cdn.activewidgets.com/jquery"></script>

    Live example | Source on github | Edit on stackblitz

    Mount function

    The mount function does not require any arguments - it uses element tagName as a component ID.

    <ax-datagrid id="my-grid-1"> ... </ax-datagrid>

    You can apply any selector to find the placeholder element (but the tag must be ax-datagrid)

    $('#my-grid-1')
        .prop('rows', rows)
        .mount();

    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.

    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;
    
    $('ax-datagrid')
        .prop({ columns, rows })  // use $.prop() to assign properties
        .mount();

    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.

    function onMouse({row}){
        alert(`row ${row.key} clicked!`);
    }
    
    $('ax-datagrid')
        .prop({ columns, rows })
        .on('mouse', event => onMouse(event.detail))  // pass event.detail to your handler
        .mount();

    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.

    More info


    ActiveWidgets

    Install

    npm i @activewidgets/jquery

    DownloadsWeekly Downloads

    33

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    34.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • xkam