README.md

data-grid

Simple & performant grid editor/viewer for tabular data.

Demo: sethvincent.com/data-grid

Status

This module is currently unfinished! It's being developed for use with flatsheet and dat.

API

var Grid = require('data-grid')

var grid = Cards([options])

Any options you can pass to the view-list and virtual-dom modules.

grid.render([data])

Examples

Example html output:

<ul class="data-grid-list">
  <li class="data-grid-row" data-key="[key]">
    <ul class="data-grid-properties">
      <li class="data-grid-property" data-key="[key]">
        <input type="text" class="data-grid-property-value data-type-string" data-type="string">
      </li>
    </ul>
  </li>
</ul>

Example: dat + data-grid

npm install
npm run example-dat

Example usage:

var through = require('through2')
var debounce = require('lodash.debounce')
var raf = require('raf')

var dataGrid = require('../index')({
  appendTo: document.body,
  height: window.innerHeight
})

dataGrid.on('click', function (e) {
  console.log('ya clicked')
})

dataGrid.on('input', function (e) {
  console.log('ya inputted')
})

var render = debounce(dataGrid.render.bind(dataGrid), 100)

var all = []
var model = through.obj(function (chunk, enc, cb) {
  this.push(chunk)
  cb()
})

model.on('data', function (data) {
  all.push(data)
  render(all)
})

for (var i=0;i<=100000;i++) {
  model.write({
    key: i,
    value: {
      title: 'this is title ' + i,
      description: 'this has long text that cuts off its cool this has long text that cuts off its cool this has long text that cuts off its cool this has long text that cuts off its cool this has long text that cuts off its cool ',
      someField: 'this is a field',
      another: '123123'
    }
  })
}

See also

• data-ui – a collection of resources & modules for building interfaces for managing data
• data-cards – a similar project that puts data into cards instead of a grid
• view-list – this project is a thin wrapper around the view-list module
• virtual-dom – data-grid & view-list are created using the virtual-dom module

Contributing

See the CONTRIBUTING.md file.

License

MIT