Skip to content

Commit ae8a3fd

Browse files
jpbarelajpbarela
authored
Add data table (#23)
1 parent 93e420a commit ae8a3fd

10 files changed

Lines changed: 25838 additions & 6483 deletions

File tree

‎package-lock.json‎

Lines changed: 25524 additions & 6465 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@jpbarela/arachnae",
3-
"version": "0.4.0",
3+
"version": "0.4.1",
44
"description": "A simple React component library",
55
"main": "dist/index.js",
66
"files": [

‎src/DataTable/__snapshots__/index.test.jsx.snap‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Button renders 1`] = `
4+
<div>
5+
<table
6+
class="table-0-2-1"
7+
>
8+
<thead>
9+
<tr>
10+
<th
11+
class="tableHeader-0-2-3 tableHeader-d3-0-2-7"
12+
colspan="1"
13+
rowspan="1"
14+
>
15+
Strings
16+
</th>
17+
<th
18+
class="tableHeader-0-2-3 tableHeader-d5-0-2-9"
19+
colspan="1"
20+
rowspan="1"
21+
>
22+
Numbers
23+
</th>
24+
<th
25+
class="tableHeader-0-2-3 tableHeader-d7-0-2-11"
26+
colspan="1"
27+
rowspan="1"
28+
>
29+
Dates
30+
</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr>
35+
<td
36+
class="tableData-0-2-2 tableData-d8-0-2-12"
37+
colspan="1"
38+
rowspan="1"
39+
>
40+
a
41+
</td>
42+
<td
43+
class="tableData-0-2-2 tableData-d10-0-2-14"
44+
colspan="1"
45+
rowspan="1"
46+
>
47+
1
48+
</td>
49+
<td
50+
class="tableData-0-2-2 tableData-d12-0-2-16"
51+
colspan="1"
52+
rowspan="1"
53+
>
54+
Fri Jan 01 2021
55+
</td>
56+
</tr>
57+
<tr>
58+
<td
59+
class="tableData-0-2-2 tableData-d14-0-2-18"
60+
colspan="1"
61+
rowspan="1"
62+
>
63+
b
64+
</td>
65+
<td
66+
class="tableData-0-2-2 tableData-d16-0-2-20"
67+
colspan="1"
68+
rowspan="1"
69+
>
70+
2
71+
</td>
72+
<td
73+
class="tableData-0-2-2 tableData-d18-0-2-22"
74+
colspan="1"
75+
rowspan="1"
76+
>
77+
Mon Feb 01 2021
78+
</td>
79+
</tr>
80+
<tr>
81+
<td
82+
class="tableData-0-2-2 tableData-d20-0-2-24"
83+
colspan="1"
84+
rowspan="1"
85+
>
86+
c
87+
</td>
88+
<td
89+
class="tableData-0-2-2 tableData-d22-0-2-26"
90+
colspan="1"
91+
rowspan="1"
92+
>
93+
3
94+
</td>
95+
<td
96+
class="tableData-0-2-2 tableData-d24-0-2-28"
97+
colspan="1"
98+
rowspan="1"
99+
>
100+
Mon Mar 01 2021
101+
</td>
102+
</tr>
103+
</tbody>
104+
</table>
105+
</div>
106+
`;

‎src/DataTable/index.jsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// @flow
2+
import * as React from "react";
3+
import {
4+
Table,
5+
TableBody,
6+
TableData,
7+
TableHead,
8+
TableHeader,
9+
TableRow,
10+
} from "../Table";
11+
import type { TextAlign } from "../commonTypes";
12+
13+
type DataTableProps = {
14+
columns: Array<ColumnProps>,
15+
data: Array<any>,
16+
borderWidth?: string,
17+
};
18+
19+
type ColumnProps = {
20+
header?: string,
21+
textAlign?: TextAlign,
22+
width?: string,
23+
};
24+
25+
type DataElementProps = {
26+
item: string,
27+
borderWidth?: string,
28+
textAlign?: TextAlign,
29+
width?: string,
30+
};
31+
32+
export function DataTable({
33+
borderWidth,
34+
columns,
35+
data,
36+
}: DataTableProps): React.Node {
37+
return (
38+
<Table>
39+
<TableHead>
40+
<TableRow>
41+
{columns.map((column, index) => (
42+
<ColumnHeader
43+
key={column.header || index}
44+
header={column.header}
45+
width={column.width}
46+
/>
47+
))}
48+
</TableRow>
49+
</TableHead>
50+
<TableBody>
51+
{data.map((row, i) => {
52+
return (
53+
<TableRow key={i}>
54+
{row.map((element, j) => (
55+
<DataElement
56+
key={`${i}_${j}`}
57+
item={element}
58+
textAlign={columns[j].textAlign}
59+
width={columns[j].width}
60+
borderWidth={borderWidth}
61+
/>
62+
))}
63+
</TableRow>
64+
);
65+
})}
66+
</TableBody>
67+
</Table>
68+
);
69+
}
70+
71+
function ColumnHeader({ header, width }: ColumnProps) {
72+
return (
73+
<TableHeader textAlign="center" width={width}>
74+
{header}
75+
</TableHeader>
76+
);
77+
}
78+
79+
function DataElement({
80+
borderWidth,
81+
item,
82+
textAlign,
83+
width,
84+
}: DataElementProps) {
85+
return (
86+
<TableData borderWidth={borderWidth} textAlign={textAlign} width={width}>
87+
{item}
88+
</TableData>
89+
);
90+
}

‎src/DataTable/index.test.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// @flow
2+
import * as React from "react";
3+
import { render } from "../test-utils";
4+
import { DataTable } from "./index";
5+
6+
describe("Button", () => {
7+
it("renders", () => {
8+
const container = render(
9+
<DataTable
10+
columns={[
11+
{
12+
header: "Strings",
13+
textAlign: "left",
14+
},
15+
{
16+
header: "Numbers",
17+
textAlign: "center",
18+
width: "8rem",
19+
},
20+
{
21+
header: "Dates",
22+
textAlign: "right",
23+
width: "25rem",
24+
},
25+
]}
26+
data={[
27+
["a", 1, new Date(2021, 0, 1).toDateString()],
28+
["b", 2, new Date(2021, 1, 1).toDateString()],
29+
["c", 3, new Date(2021, 2, 1).toDateString()],
30+
]}
31+
/>
32+
);
33+
expect(container.baseElement.firstChild).toMatchSnapshot();
34+
});
35+
});

‎src/Table/__snapshots__/index.test.jsx.snap‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@
33
exports[`Row renders 1`] = `
44
<div>
55
<table
6-
class="table-0-2-2"
6+
class="table-0-2-1"
77
>
88
<thead>
99
<tr>
1010
<th
11+
class="tableHeader-0-2-3 tableHeader-d3-0-2-7"
1112
colspan="1"
1213
rowspan="1"
1314
>
1415
Name
1516
</th>
1617
<th
18+
class="tableHeader-0-2-3 tableHeader-d5-0-2-9"
1719
colspan="1"
1820
rowspan="1"
1921
>
@@ -24,14 +26,14 @@ exports[`Row renders 1`] = `
2426
<tbody>
2527
<tr>
2628
<td
27-
class="tableData-0-2-3 "
29+
class="tableData-0-2-2 tableData-d6-0-2-10"
2830
colspan="1"
2931
rowspan="1"
3032
>
3133
Joe
3234
</td>
3335
<td
34-
class="tableData-0-2-3 "
36+
class="tableData-0-2-2 tableData-d8-0-2-12"
3537
colspan="1"
3638
rowspan="1"
3739
>
@@ -40,14 +42,14 @@ exports[`Row renders 1`] = `
4042
</tr>
4143
<tr>
4244
<td
43-
class="tableData-0-2-3 "
45+
class="tableData-0-2-2 tableData-d10-0-2-14"
4446
colspan="1"
4547
rowspan="1"
4648
>
4749
Jane
4850
</td>
4951
<td
50-
class="tableData-0-2-3 "
52+
class="tableData-0-2-2 tableData-d12-0-2-16"
5153
colspan="1"
5254
rowspan="1"
5355
>

0 commit comments

Comments
 (0)
⚡