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