Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neetjn/hyper-table
ReactTable port for HyperHTML
https://github.com/neetjn/hyper-table
events flow hyper-html hyper-table hyperhtml virtual-dom webapp webdev
Last synced: 2 days ago
JSON representation
ReactTable port for HyperHTML
- Host: GitHub
- URL: https://github.com/neetjn/hyper-table
- Owner: neetjn
- License: mit
- Created: 2018-10-11T19:49:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-27T14:46:35.000Z (almost 6 years ago)
- Last Synced: 2024-11-28T15:16:01.592Z (25 days ago)
- Topics: events, flow, hyper-html, hyper-table, hyperhtml, virtual-dom, webapp, webdev
- Language: JavaScript
- Size: 549 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hyper-table
[](https://travis-ci.org/neetjn/hyper-table/)
[](https://codecov.io/gh/neetjn/hyper-table)
[](https://nodei.co/npm/@neetjn/hyper-table/)
### About
**hyper-table** is a [ReactTable](https://github.com/react-tools/react-table) port for the HyperHTML framework. This project is relatively simple, and simply generates tables given a structured list of columns and a vector of data.
### Support
*This project was created with and for hyper-html 2.14.0, support for previous versions is not available.*
### Example
This project provides a generator to define a component instance:
```js
const Table = hyperTable(hyperHTML)
```
The **hyper-table** component consumes and expects two props:
* **columns**: Structured list of columns for table, provides header information and other functional details.
* **data**: Vector of data to be loaded in by order of defined columns.
```js
// columns will be rendered in order
const columns = [
{
// label for table header
Header: 'Name',
// alias for data vector object
accessor: 'name'
},
{
Header: 'Age',
accessor: 'age'
}
]
// data will be rendered by order of columns
const data = [
{
name: 'John Doe',
age: 23,
},
{
name: 'Jane Doe',
age: 26,
}
]
//
hyperHTML.bind(document.querySelector('#table'))`
User Table
${new Table({
columns,
data
})}
```
### Usage
To install via Bower, simply do the following:
```sh
bower install hyper-table
```
To install via NPM:
```sh
npm install hyper-table
```
For a quick start using jsdelivr:
```html
```
### Contributors
* John Nolette ([email protected])
Contributing guidelines are as follows,
* Any new features must include either a unit test, e2e test, or both.
* Branches for bugs and features should be structured like so, issue-x-username.
* Before putting in a pull request, be sure to verify you've built all your changes.
* Travis will build your changes before testing and publishing, but bower pulls from this repository directly.
* Include your name and email in the contributors list.
Be sure to run prettier using:
```sh
npm run pretty
```
Prior to committing any code changes.
---
Copyright (c) 2019 John Nolette Licensed under the MIT license.