Skip to content

Commit a20b178

Browse files
jorritjorrit
committed
Functional demo
1 parent daa3d25 commit a20b178

File tree

10 files changed

+422
-63
lines changed

10 files changed

+422
-63
lines changed

‎.eslintrc.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "airbnb",
3+
"parser": "babel-eslint",
4+
"rules": {
5+
"react/jsx-filename-extension": 0,
6+
"import/no-extraneous-dependencies": 0
7+
}
8+
}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@
66
/umd
77
npm-debug.log*
88
package-lock.json
9+
.idea

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Prerequisites
22

3-
[Node.js](http://nodejs.org/) >= v4 must be installed.
3+
[Node.js](https://nodejs.org/) >= v4 must be installed.
44

55
## Installation
66

‎README.md‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,60 @@
11
# react-hyper-responsive-table
22

3-
[![Travis][build-badge]][build]
4-
[![npm package][npm-badge]][npm]
5-
[![Coveralls][coveralls-badge]][coveralls]
3+
A responsive container for displaying tables traditionally on wide screens and with headers prepended to each data cell on narrow screens.
64

7-
Describe react-hyper-responsive-table here.
5+
## Installation
86

9-
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
10-
[build]: https://travis-ci.org/user/repo
7+
`npm install react-hyper-responsive-table`
118

12-
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
13-
[npm]: https://www.npmjs.org/package/npm-package
9+
## Example
1410

15-
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
16-
[coveralls]: https://coveralls.io/github/user/repo
11+
```jsx
12+
const headers = {
13+
image: '',
14+
name: 'Name',
15+
role: 'Role',
16+
};
17+
18+
const rows = [
19+
{
20+
name: 'Marlon Brando',
21+
role: <a href="https://en.wikipedia.org/wiki/Vito_Corleone">Vito Corleone</a>,
22+
image: <img src="https://upload.wikimedia.org/wikipedia/en/2/21/Godfather15_flip.jpg" alt="Vito Corleone" />
23+
},
24+
];
25+
26+
const keyGetter = row => row.name;
27+
28+
<ReactHyperResponsiveTable
29+
headers={headers}
30+
rows={rows}
31+
keyGetter={keyGetter}
32+
breakpoint={578}
33+
tableStyling={({ narrow }) => (narrow ? 'narrowtable' : 'widetable')}
34+
/>
35+
```
36+
37+
## Properties
38+
39+
Some properties have multiple types.
40+
Properties marked with an asterisk (`*`) are required.
41+
42+
| Name | Type | Description |
43+
|--------|---------|-------------|
44+
| `headers` * | `object` | Object of strings or React elements to use as headers. Strings and elements can be used interchangeably. The keys of the object must correspond to the keys in the data objects. The order of the entries in the headers object determines display order. |
45+
| `rows` * | `array` | Array of data objects. These data objects can also be strings or React elements. Keys of data objects that are not in `headers` are ignored. |
46+
| `keyGetter` * | `function` | Function that should return a unique key when given a data object. |
47+
| `breakpoint` * | `number` | Minimum viewport width in which the wide table is displayed. |
48+
| | `string` | Media query that triggers the full width table. |
49+
| `tableStyling` | `string` | Class name to apply to the parent table tag. |
50+
| | `object` | CSS styles to apply to the parent table tag. |
51+
| | `function` | Function returning one of the above. The function receives a state object with boolean property narrow indicating if the current presentation is narrow or wide. |
52+
| `initialNarrow` | `bool` | Initially render the table in narrow mode when rendering serverside. Set to true when you expect the browser to be narrow to prevent rerendering client side. |
53+
54+
55+
## name
56+
57+
The purpose of this package is identical to the package
58+
[react-super-responsive-table](https://github.com/ua-oira/react-super-responsive-table).
59+
The main difference is that the responsiveness of react-hyper-responsive-table
60+
is based on javascript and not on CSS.

‎demo/src/demo.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
body {
2+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
3+
font-size: 18px;
4+
color: #333;
5+
}
6+
7+
table {
8+
border: 1px solid #EEE;
9+
border-collapse: collapse;
10+
}
11+
12+
table img {
13+
max-width: 150px;
14+
}
15+
16+
th {
17+
text-align: left;
18+
}
19+
20+
td, th {
21+
padding: 2px 5px;
22+
}
23+
24+
.narrowtable {
25+
font-size: 0.9em;
26+
}
27+
28+
.narrowtable th {
29+
min-width: 100px;
30+
}
31+
32+
.narrowtable td {
33+
min-width: 200px;
34+
}
35+
36+
.narrowtable tbody tr:first-child td,
37+
.narrowtable tbody tr:first-child th {
38+
padding-top: 10px;
39+
}
40+
41+
.narrowtable tbody tr:last-child td,
42+
.narrowtable tbody tr:last-child th {
43+
padding-bottom: 10px;
44+
border-bottom: 1px solid #EEE;
45+
}
46+
47+
.widetable {
48+
font-size: 1.1em;
49+
}
50+
51+
.widetable td,
52+
.widetable th {
53+
border-bottom: 1px solid #EEE;
54+
min-width: 200px;
55+
border-right: 1px solid #EEE;
56+
}
57+
58+

‎demo/src/index.js‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,62 @@
1-
import React, {Component} from 'react'
2-
import {render} from 'react-dom'
1+
import React, { Component } from 'react';
2+
import { render } from 'react-dom';
33

4-
import Example from '../../src'
4+
import './demo.css';
5+
import ReactHyperResponsiveTable from '../../src';
6+
7+
const headers = {
8+
image: '',
9+
name: 'Name',
10+
role: 'Role',
11+
};
12+
const rows = [
13+
{
14+
name: 'Marlon Brando',
15+
role: <a href="https://en.wikipedia.org/wiki/Vito_Corleone">Vito Corleone</a>,
16+
image: <img src="https://upload.wikimedia.org/wikipedia/en/2/21/Godfather15_flip.jpg" alt="Vito Corleone" />
17+
},
18+
{
19+
image: <img src="https://upload.wikimedia.org/wikipedia/en/d/df/Michaelcoreleone.jpg" alt="Al Pacino" />,
20+
name: 'Al Pacino',
21+
role: <a href="https://en.wikipedia.org/wiki/Michael_Corleone">Michael Corleone</a>,
22+
},
23+
{
24+
image: <img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Santino_corleone_2.jpg" alt="Santino Corleone" />,
25+
name: 'James Caan',
26+
role: <a href="https://en.wikipedia.org/wiki/Santino_Corleone">Santino Corleone</a>,
27+
},
28+
{
29+
image: <img src="https://upload.wikimedia.org/wikipedia/en/6/67/Tom_Hagen.jpg" alt="Tom Hagen" />,
30+
name: 'Robert Duvall',
31+
role: <a href="https://en.wikipedia.org/wiki/Tom_Hagen">Tom Hagen</a>,
32+
},
33+
{
34+
image: <img src="https://upload.wikimedia.org/wikipedia/en/e/e7/FredoCorleone.jpg" alt="Fredo Corleone" />,
35+
name: 'John Cazale',
36+
role: <a href="https://en.wikipedia.org/wiki/Fredo_Corleone">Fredo Corleone</a>,
37+
},
38+
{
39+
image: <img src="https://upload.wikimedia.org/wikipedia/tr/9/9c/Godf3Connie2.jpg" alt="Connie Corleone" />,
40+
name: 'Talia Shire',
41+
role: <a href="https://en.wikipedia.org/wiki/Connie_Corleone">Connie Corleone</a>,
42+
},
43+
];
44+
const keyGetter = row => row.name;
545

646
class Demo extends Component {
747
render() {
8-
return <div>
9-
<h1>react-hyper-responsive-table Demo</h1>
10-
<Example/>
11-
</div>
48+
return (<div>
49+
<h1>react-hyper-responsive-table demo</h1>
50+
<p>The breakpoint of this demo is set to 578 pixels.</p>
51+
<ReactHyperResponsiveTable
52+
headers={headers}
53+
rows={rows}
54+
keyGetter={keyGetter}
55+
breakpoint={578}
56+
tableStyling={({ narrow }) => (narrow ? 'narrowtable' : 'widetable')}
57+
/>
58+
</div>);
1259
}
1360
}
1461

15-
render(<Demo/>, document.querySelector('#demo'))
62+
render(<Demo />, document.querySelector('#demo'));

‎package.json‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,48 @@
11
{
22
"name": "react-hyper-responsive-table",
3-
"version": "1.0.0",
43
"description": "react-hyper-responsive-table React component",
5-
"main": "lib/index.js",
6-
"module": "es/index.js",
4+
"version": "1.0.0",
5+
"author": "Jorrit Schippers <jorrit@ncode.nl>",
6+
"dependencies": {},
7+
"devDependencies": {
8+
"babel-eslint": "^7.2.3",
9+
"eslint": "^4.5.0",
10+
"eslint-config-airbnb": "^15.1.0",
11+
"eslint-plugin-import": "^2.7.0",
12+
"eslint-plugin-jsx-a11y": "^5.1.1",
13+
"eslint-plugin-react": "^7.2.1",
14+
"nwb": "^0.18.10",
15+
"prop-types": "^15.5.10",
16+
"react": "^15.6.1",
17+
"react-dom": "^15.6.1"
18+
},
719
"files": [
8-
"css",
920
"es",
1021
"lib",
1122
"umd"
1223
],
24+
"homepage": "",
25+
"keywords": [
26+
"react",
27+
"react-component",
28+
"responsive",
29+
"table"
30+
],
31+
"license": "MIT",
32+
"main": "lib/index.js",
33+
"module": "es/index.js",
34+
"peerDependencies": {
35+
"react": "15.x",
36+
"prop-types": "*"
37+
},
38+
"repository": "",
1339
"scripts": {
1440
"build": "nwb build-react-component",
1541
"clean": "nwb clean-module && nwb clean-demo",
1642
"start": "nwb serve-react-demo",
1743
"test": "nwb test-react",
1844
"test:coverage": "nwb test-react --coverage",
19-
"test:watch": "nwb test-react --server"
20-
},
21-
"dependencies": {},
22-
"peerDependencies": {
23-
"react": "15.x"
24-
},
25-
"devDependencies": {
26-
"nwb": "0.18.x",
27-
"react": "^15.6.1",
28-
"react-dom": "^15.6.1"
29-
},
30-
"author": "",
31-
"homepage": "",
32-
"license": "MIT",
33-
"repository": "",
34-
"keywords": [
35-
"react-component"
36-
]
45+
"test:watch": "nwb test-react --server",
46+
"lint": "eslint src tests"
47+
}
3748
}

0 commit comments

Comments
 (0)