@aurodesignsystem-dev/auro-table 0.0.0-pr162.0 → 0.0.0-pr164.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 +154 -142
- package/demo/api.min.js +1 -737
- package/demo/auro-table.min.js +739 -0
- package/demo/index.md +133 -129
- package/demo/index.min.js +1 -737
- package/package.json +1 -1
- package/demo/readme.md +0 -297
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
|
-
<!-- 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
|
|
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,15 +38,16 @@ 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
|
-
</auro-table>
|
|
42
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
41
|
+
</auro-table>
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
43
|
</div>
|
|
44
44
|
<auro-accordion alignRight>
|
|
45
|
-
<span slot="trigger">See code</span>
|
|
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
|
-
|
|
49
|
+
```html
|
|
50
|
+
<auro-table
|
|
50
51
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
51
52
|
componentData='[
|
|
52
53
|
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
|
|
@@ -54,8 +55,9 @@ In order to have the component generate your table for you, you can pass data to
|
|
|
54
55
|
{"": "Team meeting", "Wednesday": "10:00am" },
|
|
55
56
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
56
57
|
]'
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
>
|
|
59
|
+
</auro-table>
|
|
60
|
+
```
|
|
59
61
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
60
62
|
</auro-accordion>
|
|
61
63
|
|
|
@@ -64,130 +66,132 @@ In order to have the component generate your table for you, you can pass data to
|
|
|
64
66
|
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.
|
|
65
67
|
|
|
66
68
|
<div class="exampleWrapper">
|
|
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 -->
|
|
69
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-slot.html) -->
|
|
70
|
+
<!-- The below content is automatically added from ../apiExamples/basic-slot.html -->
|
|
71
|
+
<auro-table>
|
|
72
|
+
<table>
|
|
73
|
+
<thead>
|
|
74
|
+
<tr>
|
|
75
|
+
<th></th>
|
|
76
|
+
<th>Monday</th>
|
|
77
|
+
<th>Tuesday</th>
|
|
78
|
+
<th>Wednesday</th>
|
|
79
|
+
<th>Thursday</th>
|
|
80
|
+
<th>Friday</th>
|
|
81
|
+
<th>Saturday</th>
|
|
82
|
+
<th>Sunday</th>
|
|
83
|
+
</tr>
|
|
84
|
+
</thead>
|
|
85
|
+
<tbody>
|
|
86
|
+
<tr>
|
|
87
|
+
<td>Dance class</td>
|
|
88
|
+
<td>5:00pm</td>
|
|
89
|
+
<td></td>
|
|
90
|
+
<td>5:00pm</td>
|
|
91
|
+
<td></td>
|
|
92
|
+
<td></td>
|
|
93
|
+
<td></td>
|
|
94
|
+
<td></td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td>Night classes</td>
|
|
98
|
+
<td></td>
|
|
99
|
+
<td></td>
|
|
100
|
+
<td></td>
|
|
101
|
+
<td>7:00pm</td>
|
|
102
|
+
<td>7:00pm</td>
|
|
103
|
+
<td></td>
|
|
104
|
+
<td></td>
|
|
105
|
+
</tr>
|
|
106
|
+
<tr>
|
|
107
|
+
<td>Team meeting</td>
|
|
108
|
+
<td></td>
|
|
109
|
+
<td></td>
|
|
110
|
+
<td>10:00am</td>
|
|
111
|
+
<td></td>
|
|
112
|
+
<td></td>
|
|
113
|
+
<td></td>
|
|
114
|
+
<td></td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td>Morning workout</td>
|
|
118
|
+
<td>8:00am</td>
|
|
119
|
+
<td>8:00am</td>
|
|
120
|
+
<td>8:00am</td>
|
|
121
|
+
<td>8:00am</td>
|
|
122
|
+
<td>8:00am</td>
|
|
123
|
+
<td></td>
|
|
124
|
+
<td></td>
|
|
125
|
+
</tr>
|
|
126
|
+
</tbody>
|
|
127
|
+
</table>
|
|
128
|
+
</auro-table>
|
|
129
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
128
130
|
</div>
|
|
129
131
|
<auro-accordion alignRight>
|
|
130
|
-
<span slot="trigger">See code</span>
|
|
132
|
+
<span slot="trigger">See code</span>
|
|
131
133
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-slot.html) -->
|
|
132
134
|
<!-- The below code snippet is automatically added from ../apiExamples/basic-slot.html -->
|
|
133
135
|
|
|
134
|
-
|
|
135
|
-
|
|
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
|
-
|
|
136
|
+
```html
|
|
137
|
+
<auro-table>
|
|
138
|
+
<table>
|
|
139
|
+
<thead>
|
|
140
|
+
<tr>
|
|
141
|
+
<th></th>
|
|
142
|
+
<th>Monday</th>
|
|
143
|
+
<th>Tuesday</th>
|
|
144
|
+
<th>Wednesday</th>
|
|
145
|
+
<th>Thursday</th>
|
|
146
|
+
<th>Friday</th>
|
|
147
|
+
<th>Saturday</th>
|
|
148
|
+
<th>Sunday</th>
|
|
149
|
+
</tr>
|
|
150
|
+
</thead>
|
|
151
|
+
<tbody>
|
|
152
|
+
<tr>
|
|
153
|
+
<td>Dance class</td>
|
|
154
|
+
<td>5:00pm</td>
|
|
155
|
+
<td></td>
|
|
156
|
+
<td>5:00pm</td>
|
|
157
|
+
<td></td>
|
|
158
|
+
<td></td>
|
|
159
|
+
<td></td>
|
|
160
|
+
<td></td>
|
|
161
|
+
</tr>
|
|
162
|
+
<tr>
|
|
163
|
+
<td>Night classes</td>
|
|
164
|
+
<td></td>
|
|
165
|
+
<td></td>
|
|
166
|
+
<td></td>
|
|
167
|
+
<td>7:00pm</td>
|
|
168
|
+
<td>7:00pm</td>
|
|
169
|
+
<td></td>
|
|
170
|
+
<td></td>
|
|
171
|
+
</tr>
|
|
172
|
+
<tr>
|
|
173
|
+
<td>Team meeting</td>
|
|
174
|
+
<td></td>
|
|
175
|
+
<td></td>
|
|
176
|
+
<td>10:00am</td>
|
|
177
|
+
<td></td>
|
|
178
|
+
<td></td>
|
|
179
|
+
<td></td>
|
|
180
|
+
<td></td>
|
|
181
|
+
</tr>
|
|
182
|
+
<tr>
|
|
183
|
+
<td>Morning workout</td>
|
|
184
|
+
<td>8:00am</td>
|
|
185
|
+
<td>8:00am</td>
|
|
186
|
+
<td>8:00am</td>
|
|
187
|
+
<td>8:00am</td>
|
|
188
|
+
<td>8:00am</td>
|
|
189
|
+
<td></td>
|
|
190
|
+
<td></td>
|
|
191
|
+
</tr>
|
|
192
|
+
</tbody>
|
|
193
|
+
</table>
|
|
194
|
+
</auro-table>
|
|
195
|
+
```
|
|
192
196
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
193
197
|
|