@aurodesignsystem-dev/auro-table 0.0.0-pr161.0 → 0.0.0-pr162.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/api.md +142 -154
- package/demo/api.min.js +737 -1
- package/demo/index.md +129 -133
- package/demo/index.min.js +737 -1
- package/demo/readme.md +297 -0
- package/package.json +1 -1
- package/demo/auro-table.min.js +0 -739
package/demo/index.md
CHANGED
|
@@ -27,9 +27,9 @@ The `<auro-table>` element should be used in situations where users may:
|
|
|
27
27
|
In order to have the component generate your table for you, you can pass data to the `columnHeaders` and `componentData` attributes to define your column headers and cell data respectively.
|
|
28
28
|
|
|
29
29
|
<div class="exampleWrapper">
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-attributes.html) -->
|
|
31
|
+
<!-- The below content is automatically added from ../apiExamples/basic-attributes.html -->
|
|
32
|
+
<auro-table
|
|
33
33
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
34
34
|
componentData='[
|
|
35
35
|
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
|
|
@@ -38,16 +38,15 @@ In order to have the component generate your table for you, you can pass data to
|
|
|
38
38
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
39
39
|
]'
|
|
40
40
|
>
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
</auro-table>
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
43
|
</div>
|
|
44
44
|
<auro-accordion alignRight>
|
|
45
|
-
|
|
45
|
+
<span slot="trigger">See code</span>
|
|
46
46
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-attributes.html) -->
|
|
47
47
|
<!-- The below code snippet is automatically added from ../apiExamples/basic-attributes.html -->
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
<auro-table
|
|
49
|
+
<pre class="language-html"><code class="language-html"><auro-table
|
|
51
50
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
52
51
|
componentData='[
|
|
53
52
|
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
|
|
@@ -55,9 +54,8 @@ In order to have the component generate your table for you, you can pass data to
|
|
|
55
54
|
{"": "Team meeting", "Wednesday": "10:00am" },
|
|
56
55
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
57
56
|
]'
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
```
|
|
57
|
+
>
|
|
58
|
+
</auro-table></code></pre>
|
|
61
59
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
60
|
</auro-accordion>
|
|
63
61
|
|
|
@@ -66,132 +64,130 @@ In order to have the component generate your table for you, you can pass data to
|
|
|
66
64
|
For more dynamic content, you can provide your own custom HTML5 `<table>` element inside the `auro-table` tag to be projected into the default slot and styled appropriately. The `auro-table` component will add any supporting classes needed for styling. Mutations to the table, such as adding and removing columns and cells, are supported.
|
|
67
65
|
|
|
68
66
|
<div class="exampleWrapper">
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
67
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-slot.html) -->
|
|
68
|
+
<!-- The below content is automatically added from ../apiExamples/basic-slot.html -->
|
|
69
|
+
<auro-table>
|
|
70
|
+
<table>
|
|
71
|
+
<thead>
|
|
72
|
+
<tr>
|
|
73
|
+
<th></th>
|
|
74
|
+
<th>Monday</th>
|
|
75
|
+
<th>Tuesday</th>
|
|
76
|
+
<th>Wednesday</th>
|
|
77
|
+
<th>Thursday</th>
|
|
78
|
+
<th>Friday</th>
|
|
79
|
+
<th>Saturday</th>
|
|
80
|
+
<th>Sunday</th>
|
|
81
|
+
</tr>
|
|
82
|
+
</thead>
|
|
83
|
+
<tbody>
|
|
84
|
+
<tr>
|
|
85
|
+
<td>Dance class</td>
|
|
86
|
+
<td>5:00pm</td>
|
|
87
|
+
<td></td>
|
|
88
|
+
<td>5:00pm</td>
|
|
89
|
+
<td></td>
|
|
90
|
+
<td></td>
|
|
91
|
+
<td></td>
|
|
92
|
+
<td></td>
|
|
93
|
+
</tr>
|
|
94
|
+
<tr>
|
|
95
|
+
<td>Night classes</td>
|
|
96
|
+
<td></td>
|
|
97
|
+
<td></td>
|
|
98
|
+
<td></td>
|
|
99
|
+
<td>7:00pm</td>
|
|
100
|
+
<td>7:00pm</td>
|
|
101
|
+
<td></td>
|
|
102
|
+
<td></td>
|
|
103
|
+
</tr>
|
|
104
|
+
<tr>
|
|
105
|
+
<td>Team meeting</td>
|
|
106
|
+
<td></td>
|
|
107
|
+
<td></td>
|
|
108
|
+
<td>10:00am</td>
|
|
109
|
+
<td></td>
|
|
110
|
+
<td></td>
|
|
111
|
+
<td></td>
|
|
112
|
+
<td></td>
|
|
113
|
+
</tr>
|
|
114
|
+
<tr>
|
|
115
|
+
<td>Morning workout</td>
|
|
116
|
+
<td>8:00am</td>
|
|
117
|
+
<td>8:00am</td>
|
|
118
|
+
<td>8:00am</td>
|
|
119
|
+
<td>8:00am</td>
|
|
120
|
+
<td>8:00am</td>
|
|
121
|
+
<td></td>
|
|
122
|
+
<td></td>
|
|
123
|
+
</tr>
|
|
124
|
+
</tbody>
|
|
125
|
+
</table>
|
|
126
|
+
</auro-table>
|
|
127
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
130
128
|
</div>
|
|
131
129
|
<auro-accordion alignRight>
|
|
132
|
-
|
|
130
|
+
<span slot="trigger">See code</span>
|
|
133
131
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-slot.html) -->
|
|
134
132
|
<!-- The below code snippet is automatically added from ../apiExamples/basic-slot.html -->
|
|
135
133
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
</auro-table>
|
|
195
|
-
```
|
|
134
|
+
<pre class="language-html"><code class="language-html"><auro-table>
|
|
135
|
+
<table>
|
|
136
|
+
<thead>
|
|
137
|
+
<tr>
|
|
138
|
+
<th></th>
|
|
139
|
+
<th>Monday</th>
|
|
140
|
+
<th>Tuesday</th>
|
|
141
|
+
<th>Wednesday</th>
|
|
142
|
+
<th>Thursday</th>
|
|
143
|
+
<th>Friday</th>
|
|
144
|
+
<th>Saturday</th>
|
|
145
|
+
<th>Sunday</th>
|
|
146
|
+
</tr>
|
|
147
|
+
</thead>
|
|
148
|
+
<tbody>
|
|
149
|
+
<tr>
|
|
150
|
+
<td>Dance class</td>
|
|
151
|
+
<td>5:00pm</td>
|
|
152
|
+
<td></td>
|
|
153
|
+
<td>5:00pm</td>
|
|
154
|
+
<td></td>
|
|
155
|
+
<td></td>
|
|
156
|
+
<td></td>
|
|
157
|
+
<td></td>
|
|
158
|
+
</tr>
|
|
159
|
+
<tr>
|
|
160
|
+
<td>Night classes</td>
|
|
161
|
+
<td></td>
|
|
162
|
+
<td></td>
|
|
163
|
+
<td></td>
|
|
164
|
+
<td>7:00pm</td>
|
|
165
|
+
<td>7:00pm</td>
|
|
166
|
+
<td></td>
|
|
167
|
+
<td></td>
|
|
168
|
+
</tr>
|
|
169
|
+
<tr>
|
|
170
|
+
<td>Team meeting</td>
|
|
171
|
+
<td></td>
|
|
172
|
+
<td></td>
|
|
173
|
+
<td>10:00am</td>
|
|
174
|
+
<td></td>
|
|
175
|
+
<td></td>
|
|
176
|
+
<td></td>
|
|
177
|
+
<td></td>
|
|
178
|
+
</tr>
|
|
179
|
+
<tr>
|
|
180
|
+
<td>Morning workout</td>
|
|
181
|
+
<td>8:00am</td>
|
|
182
|
+
<td>8:00am</td>
|
|
183
|
+
<td>8:00am</td>
|
|
184
|
+
<td>8:00am</td>
|
|
185
|
+
<td>8:00am</td>
|
|
186
|
+
<td></td>
|
|
187
|
+
<td></td>
|
|
188
|
+
</tr>
|
|
189
|
+
</tbody>
|
|
190
|
+
</table>
|
|
191
|
+
</auro-table></code></pre>
|
|
196
192
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
197
193
|
|