@aurodesignsystem-dev/auro-table 0.0.0-pr160.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/api.md
CHANGED
|
@@ -35,17 +35,14 @@ In order to have the component generate your table for you, you can pass data to
|
|
|
35
35
|
This attribute takes an array of column headers to use, and accepts blank strings for empty columns. It does not support duplicate values, including empty strings, as each value is used as a key to project data into the table cells via the `componentData` attribute.
|
|
36
36
|
|
|
37
37
|
Example:
|
|
38
|
-
|
|
39
|
-
["Column 1", "Column 2", "Column 3"]
|
|
40
|
-
```
|
|
38
|
+
<pre class="language-javascript"><code class="language-javascript">["Column 1", "Column 2", "Column 3"]</code></pre>
|
|
41
39
|
|
|
42
40
|
### componentData
|
|
43
41
|
|
|
44
42
|
This attribute takes an array of objects, with each object representing a row with data defined for each cell by specifying the matching column-header value.
|
|
45
43
|
|
|
46
44
|
Example:
|
|
47
|
-
|
|
48
|
-
[
|
|
45
|
+
<pre class="language-javascript"><code class="language-javascript">[
|
|
49
46
|
{
|
|
50
47
|
"Column 1": "Column 1 Row 1 Value",
|
|
51
48
|
"Column 2": "Column 2 Row 1 Value",
|
|
@@ -56,13 +53,12 @@ Example:
|
|
|
56
53
|
"Column 2": "Column 2 Row 2 Value",
|
|
57
54
|
"Column 3": "Column 3 Row 2 Value"
|
|
58
55
|
}
|
|
59
|
-
]
|
|
60
|
-
```
|
|
56
|
+
]</code></pre>
|
|
61
57
|
|
|
62
58
|
<div class="exampleWrapper">
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-attributes.html) -->
|
|
60
|
+
<!-- The below content is automatically added from ../apiExamples/basic-attributes.html -->
|
|
61
|
+
<auro-table
|
|
66
62
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
67
63
|
componentData='[
|
|
68
64
|
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
|
|
@@ -71,16 +67,15 @@ Example:
|
|
|
71
67
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
72
68
|
]'
|
|
73
69
|
>
|
|
74
|
-
|
|
75
|
-
|
|
70
|
+
</auro-table>
|
|
71
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
76
72
|
</div>
|
|
77
73
|
<auro-accordion alignRight>
|
|
78
|
-
|
|
74
|
+
<span slot="trigger">See code</span>
|
|
79
75
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-attributes.html) -->
|
|
80
76
|
<!-- The below code snippet is automatically added from ../apiExamples/basic-attributes.html -->
|
|
81
77
|
|
|
82
|
-
|
|
83
|
-
<auro-table
|
|
78
|
+
<pre class="language-html"><code class="language-html"><auro-table
|
|
84
79
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
85
80
|
componentData='[
|
|
86
81
|
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
|
|
@@ -88,9 +83,8 @@ Example:
|
|
|
88
83
|
{"": "Team meeting", "Wednesday": "10:00am" },
|
|
89
84
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
90
85
|
]'
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
```
|
|
86
|
+
>
|
|
87
|
+
</auro-table></code></pre>
|
|
94
88
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
95
89
|
</auro-accordion>
|
|
96
90
|
|
|
@@ -99,133 +93,131 @@ Example:
|
|
|
99
93
|
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.
|
|
100
94
|
|
|
101
95
|
<div class="exampleWrapper">
|
|
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
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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
|
-
|
|
96
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic-slot.html) -->
|
|
97
|
+
<!-- The below content is automatically added from ../apiExamples/basic-slot.html -->
|
|
98
|
+
<auro-table>
|
|
99
|
+
<table>
|
|
100
|
+
<thead>
|
|
101
|
+
<tr>
|
|
102
|
+
<th></th>
|
|
103
|
+
<th>Monday</th>
|
|
104
|
+
<th>Tuesday</th>
|
|
105
|
+
<th>Wednesday</th>
|
|
106
|
+
<th>Thursday</th>
|
|
107
|
+
<th>Friday</th>
|
|
108
|
+
<th>Saturday</th>
|
|
109
|
+
<th>Sunday</th>
|
|
110
|
+
</tr>
|
|
111
|
+
</thead>
|
|
112
|
+
<tbody>
|
|
113
|
+
<tr>
|
|
114
|
+
<td>Dance class</td>
|
|
115
|
+
<td>5:00pm</td>
|
|
116
|
+
<td></td>
|
|
117
|
+
<td>5:00pm</td>
|
|
118
|
+
<td></td>
|
|
119
|
+
<td></td>
|
|
120
|
+
<td></td>
|
|
121
|
+
<td></td>
|
|
122
|
+
</tr>
|
|
123
|
+
<tr>
|
|
124
|
+
<td>Night classes</td>
|
|
125
|
+
<td></td>
|
|
126
|
+
<td></td>
|
|
127
|
+
<td></td>
|
|
128
|
+
<td>7:00pm</td>
|
|
129
|
+
<td>7:00pm</td>
|
|
130
|
+
<td></td>
|
|
131
|
+
<td></td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td>Team meeting</td>
|
|
135
|
+
<td></td>
|
|
136
|
+
<td></td>
|
|
137
|
+
<td>10:00am</td>
|
|
138
|
+
<td></td>
|
|
139
|
+
<td></td>
|
|
140
|
+
<td></td>
|
|
141
|
+
<td></td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td>Morning workout</td>
|
|
145
|
+
<td>8:00am</td>
|
|
146
|
+
<td>8:00am</td>
|
|
147
|
+
<td>8:00am</td>
|
|
148
|
+
<td>8:00am</td>
|
|
149
|
+
<td>8:00am</td>
|
|
150
|
+
<td></td>
|
|
151
|
+
<td></td>
|
|
152
|
+
</tr>
|
|
153
|
+
</tbody>
|
|
154
|
+
</table>
|
|
155
|
+
</auro-table>
|
|
156
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
163
157
|
</div>
|
|
164
158
|
<auro-accordion alignRight>
|
|
165
|
-
|
|
159
|
+
<span slot="trigger">See code</span>
|
|
166
160
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic-slot.html) -->
|
|
167
161
|
<!-- The below code snippet is automatically added from ../apiExamples/basic-slot.html -->
|
|
168
162
|
|
|
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
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
</auro-table>
|
|
228
|
-
```
|
|
163
|
+
<pre class="language-html"><code class="language-html"><auro-table>
|
|
164
|
+
<table>
|
|
165
|
+
<thead>
|
|
166
|
+
<tr>
|
|
167
|
+
<th></th>
|
|
168
|
+
<th>Monday</th>
|
|
169
|
+
<th>Tuesday</th>
|
|
170
|
+
<th>Wednesday</th>
|
|
171
|
+
<th>Thursday</th>
|
|
172
|
+
<th>Friday</th>
|
|
173
|
+
<th>Saturday</th>
|
|
174
|
+
<th>Sunday</th>
|
|
175
|
+
</tr>
|
|
176
|
+
</thead>
|
|
177
|
+
<tbody>
|
|
178
|
+
<tr>
|
|
179
|
+
<td>Dance class</td>
|
|
180
|
+
<td>5:00pm</td>
|
|
181
|
+
<td></td>
|
|
182
|
+
<td>5:00pm</td>
|
|
183
|
+
<td></td>
|
|
184
|
+
<td></td>
|
|
185
|
+
<td></td>
|
|
186
|
+
<td></td>
|
|
187
|
+
</tr>
|
|
188
|
+
<tr>
|
|
189
|
+
<td>Night classes</td>
|
|
190
|
+
<td></td>
|
|
191
|
+
<td></td>
|
|
192
|
+
<td></td>
|
|
193
|
+
<td>7:00pm</td>
|
|
194
|
+
<td>7:00pm</td>
|
|
195
|
+
<td></td>
|
|
196
|
+
<td></td>
|
|
197
|
+
</tr>
|
|
198
|
+
<tr>
|
|
199
|
+
<td>Team meeting</td>
|
|
200
|
+
<td></td>
|
|
201
|
+
<td></td>
|
|
202
|
+
<td>10:00am</td>
|
|
203
|
+
<td></td>
|
|
204
|
+
<td></td>
|
|
205
|
+
<td></td>
|
|
206
|
+
<td></td>
|
|
207
|
+
</tr>
|
|
208
|
+
<tr>
|
|
209
|
+
<td>Morning workout</td>
|
|
210
|
+
<td>8:00am</td>
|
|
211
|
+
<td>8:00am</td>
|
|
212
|
+
<td>8:00am</td>
|
|
213
|
+
<td>8:00am</td>
|
|
214
|
+
<td>8:00am</td>
|
|
215
|
+
<td></td>
|
|
216
|
+
<td></td>
|
|
217
|
+
</tr>
|
|
218
|
+
</tbody>
|
|
219
|
+
</table>
|
|
220
|
+
</auro-table></code></pre>
|
|
229
221
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
230
222
|
</auro-accordion>
|
|
231
223
|
|
|
@@ -236,9 +228,9 @@ For more dynamic content, you can provide your own custom HTML5 `<table>` elemen
|
|
|
236
228
|
The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
|
|
237
229
|
|
|
238
230
|
<div class="exampleWrapper">
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
231
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/nowrap.html) -->
|
|
232
|
+
<!-- The below content is automatically added from ../apiExamples/nowrap.html -->
|
|
233
|
+
<auro-table
|
|
242
234
|
nowrap
|
|
243
235
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
244
236
|
componentData='[
|
|
@@ -248,15 +240,14 @@ The `nowrap` attribute, when applied, will prevent table content from word wrapp
|
|
|
248
240
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
249
241
|
]'
|
|
250
242
|
></auro-table>
|
|
251
|
-
|
|
243
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
252
244
|
</div>
|
|
253
245
|
<auro-accordion alignRight>
|
|
254
|
-
|
|
246
|
+
<span slot="trigger">See code</span>
|
|
255
247
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/nowrap.html) -->
|
|
256
248
|
<!-- The below code snippet is automatically added from ../apiExamples/nowrap.html -->
|
|
257
249
|
|
|
258
|
-
|
|
259
|
-
<auro-table
|
|
250
|
+
<pre class="language-html"><code class="language-html"><auro-table
|
|
260
251
|
nowrap
|
|
261
252
|
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
|
|
262
253
|
componentData='[
|
|
@@ -265,8 +256,7 @@ The `nowrap` attribute, when applied, will prevent table content from word wrapp
|
|
|
265
256
|
{"": "Team meeting", "Wednesday": "10:00am" },
|
|
266
257
|
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
|
|
267
258
|
]'
|
|
268
|
-
|
|
269
|
-
```
|
|
259
|
+
></auro-table></code></pre>
|
|
270
260
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
271
261
|
</auro-accordion>
|
|
272
262
|
|
|
@@ -277,12 +267,10 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
277
267
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
278
268
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
279
269
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
270
|
+
<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
271
|
+
|
|
283
272
|
:host {
|
|
284
273
|
--ds-auro-table-alt-row-container-color: var(--ds-basic-color-surface-neutral-subtle, #{v.$ds-basic-color-surface-neutral-subtle});
|
|
285
274
|
--ds-auro-table-border-color: var(--ds-basic-color-border-subtle, #{v.$ds-basic-color-border-subtle});
|
|
286
|
-
}
|
|
287
|
-
```
|
|
275
|
+
}</code></pre>
|
|
288
276
|
<!-- AURO-GENERATED-CONTENT:END -->
|