Skip to content

Commit c935487

Browse files
eddywashereeddywashere
authored
feat(Tables): Add Table component (#47)
* feat(Tables): Add Table component * docs(Table): add Table docs
1 parent fd14292 commit c935487

15 files changed

Lines changed: 575 additions & 2 deletions

‎docs/lib/Components/TablesPage.jsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
import React from 'react';
3+
import { PrismCode } from 'react-prism';
4+
import Helmet from 'react-helmet';
5+
6+
import TableExample from '../examples/Table';
7+
import TableBorderedExample from '../examples/TableBordered';
8+
import TableHoverExample from '../examples/TableHover';
9+
import TableInverseExample from '../examples/TableInverse';
10+
import TableReflowExample from '../examples/TableReflow';
11+
import TableResponsiveExample from '../examples/TableResponsive';
12+
import TableSizingExample from '../examples/TableSizing';
13+
import TableStripedExample from '../examples/TableStriped';
14+
15+
const TableExampleSource = require('!!raw!../examples/Table.jsx');
16+
const TableBorderedExampleSource = require('!!raw!../examples/TableBordered.jsx');
17+
const TableHoverExampleSource = require('!!raw!../examples/TableHover.jsx');
18+
const TableInverseExampleSource = require('!!raw!../examples/TableInverse.jsx');
19+
const TableReflowExampleSource = require('!!raw!../examples/TableReflow.jsx');
20+
const TableResponsiveExampleSource = require('!!raw!../examples/TableResponsive.jsx');
21+
const TableSizingExampleSource = require('!!raw!../examples/TableSizing.jsx');
22+
const TableStripedExampleSource = require('!!raw!../examples/TableStriped.jsx');
23+
24+
export default class TablesPage extends React.Component {
25+
render() {
26+
return (
27+
<div>
28+
<Helmet title="Tables"/>
29+
<h3>Tables</h3>
30+
<hr/>
31+
<div className="docs-example">
32+
<TableExample/>
33+
</div>
34+
<pre>
35+
<PrismCode className="language-jsx">
36+
{TableExampleSource}
37+
</PrismCode>
38+
</pre>
39+
<h4>Properties</h4>
40+
<pre>
41+
<PrismCode className="language-jsx">
42+
{`Card.propTypes = {
43+
// Pass in a Component to override default element
44+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
45+
size: PropTypes.string,
46+
bordered: PropTypes.bool,
47+
striped: PropTypes.bool,
48+
inverse: PropTypes.bool,
49+
hover: PropTypes.bool,
50+
reflow: PropTypes.bool,
51+
responsive: PropTypes.bool
52+
};`}
53+
</PrismCode>
54+
</pre>
55+
<h3>Inverse table</h3>
56+
<div className="docs-example">
57+
<TableInverseExample/>
58+
</div>
59+
<pre>
60+
<PrismCode className="language-jsx">
61+
{TableInverseExampleSource}
62+
</PrismCode>
63+
</pre>
64+
<h3>Striped rows</h3>
65+
<div className="docs-example">
66+
<TableStripedExample/>
67+
</div>
68+
<pre>
69+
<PrismCode className="language-jsx">
70+
{TableStripedExampleSource}
71+
</PrismCode>
72+
</pre>
73+
<h3>Bordered table</h3>
74+
<div className="docs-example">
75+
<TableBorderedExample/>
76+
</div>
77+
<pre>
78+
<PrismCode className="language-jsx">
79+
{TableBorderedExampleSource}
80+
</PrismCode>
81+
</pre>
82+
<h3>Hoverable rows</h3>
83+
<div className="docs-example">
84+
<TableHoverExample/>
85+
</div>
86+
<pre>
87+
<PrismCode className="language-jsx">
88+
{TableHoverExampleSource}
89+
</PrismCode>
90+
</pre>
91+
<h3>Small table</h3>
92+
<div className="docs-example">
93+
<TableSizingExample/>
94+
</div>
95+
<pre>
96+
<PrismCode className="language-jsx">
97+
{TableSizingExampleSource}
98+
</PrismCode>
99+
</pre>
100+
<h3>Responsive table</h3>
101+
<div className="docs-example">
102+
<TableResponsiveExample/>
103+
</div>
104+
<pre>
105+
<PrismCode className="language-jsx">
106+
{TableResponsiveExampleSource}
107+
</PrismCode>
108+
</pre>
109+
<h3>Reflow</h3>
110+
<div className="docs-example">
111+
<TableReflowExample/>
112+
</div>
113+
<pre>
114+
<PrismCode className="language-jsx">
115+
{TableReflowExampleSource}
116+
</PrismCode>
117+
</pre>
118+
</div>
119+
);
120+
}
121+
}

‎docs/lib/Components/index.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,11 @@ class Components extends React.Component {
6666
{
6767
name: 'Layout',
6868
to: '/components/layout/'
69-
}
69+
},
70+
{
71+
name: 'Tables',
72+
to: '/components/tables/'
73+
},
7074
]
7175
};
7276
}

‎docs/lib/examples/Table.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { Table } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Table>
8+
<thead>
9+
<tr>
10+
<th>#</th>
11+
<th>First Name</th>
12+
<th>Last Name</th>
13+
<th>Username</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr>
18+
<th scope="row">1</th>
19+
<td>Mark</td>
20+
<td>Otto</td>
21+
<td>@mdo</td>
22+
</tr>
23+
<tr>
24+
<th scope="row">2</th>
25+
<td>Jacob</td>
26+
<td>Thornton</td>
27+
<td>@fat</td>
28+
</tr>
29+
<tr>
30+
<th scope="row">3</th>
31+
<td>Larry</td>
32+
<td>the Bird</td>
33+
<td>@twitter</td>
34+
</tr>
35+
</tbody>
36+
</Table>
37+
);
38+
}
39+
}

‎docs/lib/examples/TableBordered.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { Table } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Table bordered>
8+
<thead>
9+
<tr>
10+
<th>#</th>
11+
<th>First Name</th>
12+
<th>Last Name</th>
13+
<th>Username</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr>
18+
<th scope="row">1</th>
19+
<td>Mark</td>
20+
<td>Otto</td>
21+
<td>@mdo</td>
22+
</tr>
23+
<tr>
24+
<th scope="row">2</th>
25+
<td>Jacob</td>
26+
<td>Thornton</td>
27+
<td>@fat</td>
28+
</tr>
29+
<tr>
30+
<th scope="row">3</th>
31+
<td>Larry</td>
32+
<td>the Bird</td>
33+
<td>@twitter</td>
34+
</tr>
35+
</tbody>
36+
</Table>
37+
);
38+
}
39+
}

‎docs/lib/examples/TableHover.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { Table } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Table hover>
8+
<thead>
9+
<tr>
10+
<th>#</th>
11+
<th>First Name</th>
12+
<th>Last Name</th>
13+
<th>Username</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr>
18+
<th scope="row">1</th>
19+
<td>Mark</td>
20+
<td>Otto</td>
21+
<td>@mdo</td>
22+
</tr>
23+
<tr>
24+
<th scope="row">2</th>
25+
<td>Jacob</td>
26+
<td>Thornton</td>
27+
<td>@fat</td>
28+
</tr>
29+
<tr>
30+
<th scope="row">3</th>
31+
<td>Larry</td>
32+
<td>the Bird</td>
33+
<td>@twitter</td>
34+
</tr>
35+
</tbody>
36+
</Table>
37+
);
38+
}
39+
}

‎docs/lib/examples/TableInverse.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { Table } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Table inverse>
8+
<thead>
9+
<tr>
10+
<th>#</th>
11+
<th>First Name</th>
12+
<th>Last Name</th>
13+
<th>Username</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr>
18+
<th scope="row">1</th>
19+
<td>Mark</td>
20+
<td>Otto</td>
21+
<td>@mdo</td>
22+
</tr>
23+
<tr>
24+
<th scope="row">2</th>
25+
<td>Jacob</td>
26+
<td>Thornton</td>
27+
<td>@fat</td>
28+
</tr>
29+
<tr>
30+
<th scope="row">3</th>
31+
<td>Larry</td>
32+
<td>the Bird</td>
33+
<td>@twitter</td>
34+
</tr>
35+
</tbody>
36+
</Table>
37+
);
38+
}
39+
}

‎docs/lib/examples/TableReflow.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import { Table } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Table responsive>
8+
<thead>
9+
<tr>
10+
<th>#</th>
11+
<th>Table heading</th>
12+
<th>Table heading</th>
13+
<th>Table heading</th>
14+
<th>Table heading</th>
15+
<th>Table heading</th>
16+
<th>Table heading</th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
<tr>
21+
<th scope="row">1</th>
22+
<td>Table cell</td>
23+
<td>Table cell</td>
24+
<td>Table cell</td>
25+
<td>Table cell</td>
26+
<td>Table cell</td>
27+
<td>Table cell</td>
28+
</tr>
29+
<tr>
30+
<th scope="row">2</th>
31+
<td>Table cell</td>
32+
<td>Table cell</td>
33+
<td>Table cell</td>
34+
<td>Table cell</td>
35+
<td>Table cell</td>
36+
<td>Table cell</td>
37+
</tr>
38+
<tr>
39+
<th scope="row">3</th>
40+
<td>Table cell</td>
41+
<td>Table cell</td>
42+
<td>Table cell</td>
43+
<td>Table cell</td>
44+
<td>Table cell</td>
45+
<td>Table cell</td>
46+
</tr>
47+
</tbody>
48+
</Table>
49+
);
50+
}
51+
}

‎docs/lib/examples/TableResponsive.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import { Table } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Table responsive>
8+
<thead>
9+
<tr>
10+
<th>#</th>
11+
<th>Table heading</th>
12+
<th>Table heading</th>
13+
<th>Table heading</th>
14+
<th>Table heading</th>
15+
<th>Table heading</th>
16+
<th>Table heading</th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
<tr>
21+
<th scope="row">1</th>
22+
<td>Table cell</td>
23+
<td>Table cell</td>
24+
<td>Table cell</td>
25+
<td>Table cell</td>
26+
<td>Table cell</td>
27+
<td>Table cell</td>
28+
</tr>
29+
<tr>
30+
<th scope="row">2</th>
31+
<td>Table cell</td>
32+
<td>Table cell</td>
33+
<td>Table cell</td>
34+
<td>Table cell</td>
35+
<td>Table cell</td>
36+
<td>Table cell</td>
37+
</tr>
38+
<tr>
39+
<th scope="row">3</th>
40+
<td>Table cell</td>
41+
<td>Table cell</td>
42+
<td>Table cell</td>
43+
<td>Table cell</td>
44+
<td>Table cell</td>
45+
<td>Table cell</td>
46+
</tr>
47+
</tbody>
48+
</Table>
49+
);
50+
}
51+
}

0 commit comments

Comments
 (0)