Negligent Parachute Maintainers

    @activewidgets/react

    3.2.0 • Public • Published

    ActiveWidgets/React • Datagrid

    npm version npm downloads Github issues Github repo

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

    Live demo / Developer guide / API reference

    Datagrid demo

    Installation

    Add @activewidgets/react to your project dependencies -

    > npm i --save @activewidgets/react

    Usage

    Now you can import ActiveWidgets component classes -

    import { Datagrid } from "@activewidgets/react";

    and use them as any standard React component.

    import React from "react";
    import ReactDOM from "react-dom";
    import { Datagrid } from "@activewidgets/react";
    
    const rows = [
        { message: 'Hello, World!' }
    ];
    
    function App(){
        return <Datagrid rows={rows} />
    }
    
    ReactDOM.render(<App />, document.getElementById("app"));

    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/react"></script>

    In this case you will find the components at ActiveWidgets.React global namespace.

    var Datagrid = ActiveWidgets.React.Datagrid;
    
    var rows = [
        { framework: 'React', source: 'CDN', language: 'ES5' }
    ];
    
    var App = React.createElement(Datagrid, { rows: rows });
    ReactDOM.render(App, document.getElementById("app"));

    Live example | Source on github | Edit on stackblitz

    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;
    
    function App(){
        return <Datagrid columns={columns} rows={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 -

    function onMouse({row, column}){
        alert(`row ${row.key} clicked!`);
    }
    
    function App(){
        return <Datagrid onMouse={onMouse} columns={columns} rows={rows} />
    }

    Live example | Source on github | Edit on stackblitz

    More info


    ActiveWidgets

    Install

    npm i @activewidgets/react

    DownloadsWeekly Downloads

    34

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    31.7 kB

    Total Files

    22

    Last publish

    Collaborators

    • xkam