Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
.gitignore
CONTRIBUTING.md
LICENSE.md
README.md
index.html
index.js
package.json
style.css
test.js

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