infinite-table

An infinite scrolling table with editable features. No jQuery.

Usage

Minimum required setup:

var InfiniteScroll = require('infinite-table');
new InfiniteScroll('<table element ID>', {
    url: <url to get data from>,
    fields: {
        <returned data property> : {}
    }
});

For the spinner, include

<link rel="stylesheet" href="/css/style.css"/>

Options:

new InfiniteScroll('<table element ID>', {
    url: <url to get data from>,
    fields: {
        <returned data property> : {
            data: {
                <data-attribute>: ':<returned data property>:'
                // for example:
                id: ':id:' // will create a data-attribute like data-id="1"
            },
            // setup listener, e.g. "click" listener (set as many as you wish):
            listener: [{
                handle: (e) => {alert(e.target.innerHTML)}, // callback
                on: 'click' // listen for event
            }],
            // if editable is provided, the td will be given contenteditable attribute,
            // same signature as above for listeners
            editable: [{
                handle: (e) => {alert(e.target.innerHTML)},
                on: 'blur'
            }]
        }
    },
    perPage: 20, // how many entries should be fetched per "page"
    loadTiming: 2, // when should the loading happen (defaults to the penultimate tr)
    transport: 'ajax', // possible transports: ajax/websockets,
    spinner: 0 // possible 0, 1, 2
});

An ajax (default) / websockets GET request is made whenever you hit the trigger. The signature is:

<url>?skip=<skip>&limit=<limit>

So your backend only has to GET skip and limit to query for the data. Example query

SELECT * FROM `foo` LIMIT <limit> OFFSET <skip>

If you're using sails.js you're in luck - simply create the contoller and model, everything else works out of the box.

The scroller expects json data as returned object.

INCLUDED DEPENDENCIES

lodash, bluebird
included: SpinKit from https://github.com/tobiasahlin/SpinKit

LICENSE

MIT

 
 new InfiniteScroll('example', {
      transport: 'faker',  // switch to ajax
      url: '/example/exampleData.json',  // switch to url
          fields: {
              name:{
                  data: {
                      id: ':_id:'
                  },
                  listener: [{
                      handle: (e) => {alert('Attribute id: ' + e.target.getAttribute('data-id'))}, // callback
                      on: 'click' // listen for event
                  }]
              },
              balance:{
                  editable: [{
                      handle: (e) => {
                          alert('New balance: ' + e.target.innerHTML)
                      },
                      on: 'blur'
                  }]
              },
              phone:{
                  data: {
                      phone: ':phone:'
                  },
                  listener: [{
                      handle: (e) => {alert('Attribute phone: ' + e.target.getAttribute('data-phone'))},
                      on: 'click'
                  }]
              }
          }
 });

    

<div>
    <table id="<tableId>">
        <thead>
        <tr>
            <th>name</th>
            <th>balance</th>
            <th>phone</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>