Nutritious Pancake Mountain

    zinggrid
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    ZingGrid

    ZingGrid is a Javascript library for rendering grids and data tables. Our main focus is on fast, responsive, and customizable grids utilizing ES6 and native web components. Our goal is to solve the problem of creating a CRUD grid in under five minutes. With an appropriate REST endpoint, this is easily achievable.

    Include the library

    Include the library through script tag

    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>

    Include Library with NPM

    npm i zinggrid
    

    and include one of the following imports in your code:

    Import pollyfilled Version (Suggested)

    import ZingGrid from 'zinggrid';

    or

    Import No Pollyfills ES6 Version (Smallest)

    import ZingGrid from 'zinggrid/es6';

    or

    Import Pollyfills ES5 Version (Largest)

    import ZingGrid from 'zinggrid/es5';

    Getting Started CDN

    Open the examples/index.html file in your browser.

    <!DOCTYPE html>
    <html>
    <head>
      <!--Script Reference[1]-->
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    <body>
      <!--Grid Component Placement[2]-->
      <zing-grid
        caption="Hello Futurama"
        data='[
          { "firstName": "Philip", "lastName": "Fry"},
          { "firstName": "Turanga", "lastName": "Leela"},
          { "firstName": "Bender", "lastName": "Rodriguez"},
          { "firstName": "Amy", "lastName": "Wong"}
        ]'>
      </zing-grid>
    </body>
    </html>

    Getting Started with Script Modules

    1. Need to have a server running. http-server to fire up localhost a simple solution.
    • install with npm i http-server -g
    • run http-server from root folder
    • traverse to localhost:xxxx/examples/index-modules.html
    <!DOCTYPE html>
    <html>
    <head>
      <!--Script Reference[1]-->
      <script type="module" src="../index.js">
        // can use this 
        // import ZingGrid from '../index.js';
      </script>
      <!-- fallback for no module support -->
      <script nomodule src="../dist/zinggrid.min.js"></script>
    </head>
    <body>
      <!--Grid Component Placement[2]-->
      <zing-grid
        caption="Hello Futurama"
        data='[
          { "firstName": "Philip", "lastName": "Fry"},
          { "firstName": "Turanga", "lastName": "Leela"},
          { "firstName": "Bender", "lastName": "Rodriguez"},
          { "firstName": "Amy", "lastName": "Wong"}
        ]'>
      </zing-grid>
    </body>
    </html>

    Integrations

    ZingGrid requires NO wrapper for easy consumption with popular JS libraries and frameworks. In these frameworks you can typically include the library through native imports:

      import ZingGrid from 'zinggrid';

    Please check out the following hello world tutorials for frameworks:

    Support

    If you need any assistance or would like to report a bug, please contact us directly at support@zinggrid.com or through our website https://www.zinggrid.com/contact.

    © 2019 ZingSoft, Inc.

    Install

    npm i zinggrid

    DownloadsWeekly Downloads

    96

    Version

    1.2.7

    License

    none

    Unpacked Size

    4.64 MB

    Total Files

    21

    Last publish

    Collaborators

    • zingsoft-admin