data-cards
Let's interact with data in some way other than tables/spreadsheets.
Demo: sethvincent.com/data-cards
Status
This module is currently unfinished! It's being developed for use with flatsheet and dat.
Mostly this is an experiment. Expect it to be rewritten, redesigned, destroyed, & recreated. At least once or twice.
API
var Cards = require('data-cards')
var cards = Cards([opts])
options
titleField- optional
- default:
title
Any options you can pass to the view-list and virtual-dom modules.
cards.render([data])
Examples
Example html output:
<ul class="data-card-list">
<li class="data-card">
<h2 class="data-card-title">Example</h2>
<ul class="data-card-fields">
<li class="data-card-field [fieldname]">
<span class="field-key">[fieldname]:</span>
<span class="field-value">[fieldvalue]</span>
</li>
</ul>
</li>
</ul>Example usage:
var through = require('through2')
var debounce = require('lodash.debounce')
var raf = require('raf')
var dataCards = require('data-cards')({
appendTo: document.body,
height: window.innerHeight,
rowHeight: 200
})
var render = debounce(dataCards.render.bind(dataCards), 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-grid – a similar project except the data is in a spreadsheet-like grid
- view-list – this project is a thin wrapper around the view-list module
- virtual-dom – data-cards & view-list are created using the virtual-dom module
Contributing
See the CONTRIBUTING.md file.