Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82821

[Annoucement] Reactive DataTables for MeteorJS

$
0
0
Hello Everyone,

I've spent some time over the past few weeks putting together a reactive DataTables component for MeteorJS that allows you to page, sort, and filter millions of records while maintaining meteor's awesome server / client reactivity.

The packages is hosted on Meteor's package repository [ AtmosphereJS ]( https://atmospherejs.com/package/luma-datatables )

[ Here is a Live Example ]( http://luma-datatables.meteor.com/ )

[ Here is the Annotated Source ]( http://lumapictures.github.io/luma-datatables/ )

Any input is appreciated, and pull requests are more than welcome!

Setting up the component is simple :

1. Define the component in your template

{{> dataTable
    selector=browsers.selector
    columns=browsers.columns
    collection=browsers.collection
    options=browsers.options
    subscription=browsers.subscription
    query=browsers.query
}}

2. Setup the data in your controller or as template helpers

if Meteor.isClient
  Template.home.browsers = 
      columns: [
        {
          sTitle: "Engine"
          mData: "engine"
        }
        {
          sTitle: "Browser"
          mData: "browser"
        }
        {
          sTitle: "Platform"
          mData: "platform"
        }
        {
          sTitle: "Version"
          mData: "version"
          sClass: "center"
        }
        {
          sTitle: "Grade"
          mData: "grade"
          sClass: "center"
          mRender: ( dataSource, call, rawData ) ->
            rawData ?= ""
            switch rawData.grade
              when "A" then return "<b>A</b>"
              else return rawData.grade
        }
        {
          sTitle: "Created"
          mData: "createdAt"
          mRender: ( dataSource, call, rawData ) ->
            rawData.createdAt ?= ""
            if rawData.createdAt
              return moment( rawData.createdAt ).fromNow()
            else return rawData.createdAt
        }
        {
          sTitle: "Counter"
          mData: "counter"
        }
      ]
      selector: "dataTable-browsers"
      collection: Browsers
      subscription: "all_browsers"
      options:
        oLanguage:
          sProcessing: "You must build construct additional pylons!"
      query:
        grade: "A"

3. Publish data on the server ( coffeescript )

if Meteor.isServer
  DataTable.debug = "true"
  DataTable.publish "all_browsers", Browsers

Viewing all articles
Browse latest Browse all 82821

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>