Skip to content

Commit 81edab7

Browse files
djthorpedjthorpe
committed
Added data table
1 parent 92483c4 commit 81edab7

File tree

6 files changed

+192
-11
lines changed

6 files changed

+192
-11
lines changed

‎npm/helloworld/src/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,17 @@
5757
<wc-button color="error">Error</wc-button>
5858
<wc-button disabled>Disabled</wc-button>
5959
</wc-content>
60+
<wc-content>
61+
<wc-datatable striped selectable></wc-datatable>
62+
</wc-content>
6063
</wc-content>
6164

6265
</wc-content>
6366

6467
</wc-canvas>
6568

6669
<!-- Modal -->
67-
<wc-modal id="login" visible>
70+
<wc-modal id="login">
6871
<wc-form vertical>
6972
<h1>Login</h1>
7073
<wc-forminput name="email">Email</wc-forminput>

‎npm/helloworld/src/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import './wc/root'
44
import './wc/core/Provider'
55
import './wc/core/Array'
6-
import './wc/layout/Table'
76
import './wc/core/GoogleAuth'
87

98
// Import classes

‎npm/helloworld/src/wc/data/DataTable.ts

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { customElement, property } from 'lit/decorators.js';
3+
4+
/**
5+
* @class DataTable
6+
*
7+
* This class is a renders a table of data, within a content element.
8+
*
9+
* @example
10+
* <wc-datatable>
11+
* </wc-datatable>
12+
*/
13+
@customElement('wc-datatable')
14+
export class DataTable extends LitElement {
15+
@property({ type: Boolean }) striped: boolean;
16+
@property({ type: Boolean }) selectable: boolean;
17+
18+
static get styles() {
19+
return css`
20+
:host {
21+
flex: 1 0;
22+
}
23+
table {
24+
border: var(--table-border);
25+
border-radius: var(--table-border-radius);
26+
inline-size: 100%;
27+
border-collapse: collapse;
28+
border-spacing: 0;
29+
}
30+
thead {
31+
background-color: var(--table-background-color-head);
32+
color: var(--table-color-head);
33+
block-size: 3rem;
34+
}
35+
thead th {
36+
text-align: start;
37+
padding: var(--table-padding-head);
38+
font-size: var(--table-font-size-head);
39+
font-weight: var(--table-font-weight-head);
40+
user-select: none;
41+
}
42+
tbody {
43+
background-color: var(--table-background-color);
44+
color: var(--table-color);
45+
block-size: 3rem;
46+
}
47+
table.striped tbody tr:nth-child(even) {
48+
background-color: var(--table-background-color-striped);
49+
}
50+
tbody tr {
51+
border-bottom: var(--table-border-bottom-row);
52+
}
53+
table.selectable tbody tr {
54+
cursor: pointer;
55+
}
56+
table.selectable tbody tr:hover {
57+
background-color: var(--table-background-color-hover);
58+
}
59+
tbody tr {
60+
font-size: var(--table-font-size-row);
61+
font-weight: var(--table-font-weight-row);
62+
border-bottom: var(--table-border-bottom-row);
63+
}
64+
tbody td {
65+
text-align: start;
66+
padding: var(--table-padding-cell);
67+
}
68+
`;
69+
}
70+
71+
render() {
72+
return html`
73+
<table class=${this.className || nothing}>
74+
<thead>
75+
<tr>
76+
<th>Month</th>
77+
<th>Value</th>
78+
<th>Total</th>
79+
</tr>
80+
</thead>
81+
<tbody>
82+
<tr>
83+
<td>Jan</td>
84+
<td>&pound;100.20</td>
85+
<td>&pound;100.20</td>
86+
</tr>
87+
<tr>
88+
<td>Feb</td>
89+
<td>&pound;120.50</td>
90+
<td>&pound;220.70</td>
91+
</tr>
92+
<tr>
93+
<td>Mar</td>
94+
<td>&pound;90.75</td>
95+
<td>&pound;311.45</td>
96+
</tr>
97+
<tr>
98+
<td>Apr</td>
99+
<td>&pound;150.00</td>
100+
<td>&pound;461.45</td>
101+
</tr>
102+
<tr>
103+
<td>May</td>
104+
<td>&pound;110.30</td>
105+
<td>&pound;571.75</td>
106+
</tr>
107+
<tr>
108+
<td>Jun</td>
109+
<td>&pound;130.80</td>
110+
<td>&pound;702.55</td>
111+
</tr>
112+
<tr>
113+
<td>Jul</td>
114+
<td>&pound;140.15</td>
115+
<td>&pound;842.70</td>
116+
</tr>
117+
<tr>
118+
<td>Aug</td>
119+
<td>&pound;105.60</td>
120+
<td>&pound;948.30</td>
121+
</tr>
122+
<tr>
123+
<td>Sep</td>
124+
<td>&pound;160.90</td>
125+
<td>&pound;1109.20</td>
126+
</tr>
127+
<tr>
128+
<td>Oct</td>
129+
<td>&pound;125.40</td>
130+
<td>&pound;1234.60</td>
131+
</tr>
132+
<tr>
133+
<td>Nov</td>
134+
<td>&pound;115.25</td>
135+
<td>&pound;1349.85</td>
136+
</tr>
137+
<tr>
138+
<td>Dec</td>
139+
<td>&pound;180.55</td>
140+
<td>&pound;1530.40</td>
141+
</tr>
142+
</tbody>
143+
</table>
144+
`;
145+
}
146+
147+
get className() {
148+
const classes = [];
149+
if (this.striped) {
150+
classes.push('striped');
151+
}
152+
if (this.selectable) {
153+
classes.push('selectable');
154+
}
155+
return classes.join(' ');
156+
}
157+
}

‎npm/helloworld/src/wc/layout/Table.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎npm/helloworld/src/wc/root.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,6 @@ import './layout/Toast'
1717

1818
// Charts
1919
import './charts/PieChart'
20+
21+
// Tables
22+
import './data/DataTable'

‎npm/helloworld/src/wc/tokens.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,10 @@ body {
7171
--white-opp-color: var(--black-color);
7272
--black-opp-color: var(--white-color);
7373

74+
--grey-05-color: #F2F2F2;
7475
--grey-10-color: #EAEAEA;
76+
--grey-15-color: #E0E0E0;
77+
--grey-25-color: #D7D7D7;
7578
--grey-20-color: #D0D0D0;
7679
--grey-30-color: #B6B6B6;
7780
--grey-40-color: #9C9C9C;
@@ -144,3 +147,28 @@ body {
144147
--form-input-border-width: 0 0 calc(var(--space-small) / 4) 0;
145148
--form-input-border-color: light-dark(var(--grey-50-color), var(--grey-50-color));
146149
}
150+
151+
/* table */
152+
:root {
153+
--table-border: none;
154+
--table-border-radius: 0;
155+
--table-color: light-dark(var(--dark-color), var(--light-color));
156+
--table-background-color: light-dark(var(--grey-10-color), var(--grey-80-color));
157+
--table-background-color-striped: light-dark(var(--grey-15-color), var(--grey-75-color));
158+
--table-background-color-hover: light-dark(var(--grey-20-color), var(--grey-70-color));
159+
160+
/* header column */
161+
--table-background-color-head: light-dark(var(--grey-50-color), var(--grey-50-color));
162+
--table-color-head: light-dark(var(--light-color), var(--dark-color));
163+
--table-font-size-head: var(--font-size-small);
164+
--table-font-weight-head: var(--font-weight-normal);
165+
--table-padding-head: var(--space-default) calc(var(--space-default) * 1.75);
166+
167+
/* row */
168+
--table-font-size-row: var(--font-size-default);
169+
--table-font-weight-row: var(--font-weight-normal);
170+
--table-border-bottom-row: 1px solid var(--grey-50-color);
171+
172+
/* cell */
173+
--table-padding-cell: var(--space-default) calc(var(--space-default) * 1.75);
174+
}

0 commit comments

Comments
 (0)