Skip to content

Commit 84bdd6c

Browse files
DukeFerdinandDukeFerdinand
authored
Merge pull request #137 from AlaskaAirlines/rc/136
## RC Summary - feat 51ca8ea | 2025-10-14 | Stephen Rios feat: add support for custom tables via content projection #132 - Add unit tests to cover new functionality - Update documentation to reflect new functionality - Add documentation for `columnHeaders` and `componentData` with clear descriptions and examples - Add document example for `nowrap` functionality- Update `nowrap` functionality to use host selector instead of classMap for consistent support across functionality types- Remove content for non-existant default slot in example markup for clarity
2 parents e87477a + 51ca8ea commit 84bdd6c

File tree

18 files changed

+1758
-393
lines changed

18 files changed

+1758
-393
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,4 @@ coverage/
2424
## Added by Auro CLI migration (github-config-and-gitignore-changes)
2525
demo/*.md
2626
demo/*.min.js
27+
custom-elements.json

‎README.md‎

Lines changed: 134 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
2121

2222
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
2323
<!-- The below content is automatically added from ./docs/partials/description.md -->
24-
Use the `auro-table` custom element to illustrate non-dynamic tabular data. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API.
24+
Use the `auro-table` custom element to illustrate tabular data or content. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API.
2525
<!-- AURO-GENERATED-CONTENT:END -->
2626
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
2727
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -74,14 +74,73 @@ import "@aurodesignsystem/auro-table";
7474
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
7575

7676
```html
77-
<auro-table
78-
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
77+
<auro-table
78+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
7979
componentData='[
80-
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
81-
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
82-
{"": "Team meeting", "Wednesday": "10:00am" },
83-
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
84-
]'>My morning schedule
80+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
81+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
82+
{"": "Team meeting", "Wednesday": "10:00am" },
83+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
84+
]'
85+
>
86+
</auro-table>
87+
<auro-table>
88+
<table>
89+
<thead>
90+
<tr>
91+
<th></th>
92+
<th>Monday</th>
93+
<th>Tuesday</th>
94+
<th>Wednesday</th>
95+
<th>Thursday</th>
96+
<th>Friday</th>
97+
<th>Saturday</th>
98+
<th>Sunday</th>
99+
</tr>
100+
</thead>
101+
<tbody>
102+
<tr>
103+
<td>Dance class</td>
104+
<td>5:00pm</td>
105+
<td></td>
106+
<td>5:00pm</td>
107+
<td></td>
108+
<td></td>
109+
<td></td>
110+
<td></td>
111+
</tr>
112+
<tr>
113+
<td>Night classes</td>
114+
<td></td>
115+
<td></td>
116+
<td></td>
117+
<td>7:00pm</td>
118+
<td>7:00pm</td>
119+
<td></td>
120+
<td></td>
121+
</tr>
122+
<tr>
123+
<td>Team meeting</td>
124+
<td></td>
125+
<td></td>
126+
<td>10:00am</td>
127+
<td></td>
128+
<td></td>
129+
<td></td>
130+
<td></td>
131+
</tr>
132+
<tr>
133+
<td>Morning workout</td>
134+
<td>8:00am</td>
135+
<td>8:00am</td>
136+
<td>8:00am</td>
137+
<td>8:00am</td>
138+
<td>8:00am</td>
139+
<td></td>
140+
<td></td>
141+
</tr>
142+
</tbody>
143+
</table>
85144
</auro-table>
86145
```
87146
<!-- AURO-GENERATED-CONTENT:END -->
@@ -103,7 +162,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
103162
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
104163
The `<auro-table>` element should be used in situations where users may:
105164

106-
* Show static tabular data
165+
* Show static or dynamic tabular data or content
107166
<!-- AURO-GENERATED-CONTENT:END -->
108167

109168
## API Code Examples
@@ -114,14 +173,73 @@ The `<auro-table>` element should be used in situations where users may:
114173
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
115174

116175
```html
117-
<auro-table
118-
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
176+
<auro-table
177+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
119178
componentData='[
120-
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
121-
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
122-
{"": "Team meeting", "Wednesday": "10:00am" },
123-
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
124-
]'>My morning schedule
179+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
180+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
181+
{"": "Team meeting", "Wednesday": "10:00am" },
182+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
183+
]'
184+
>
185+
</auro-table>
186+
<auro-table>
187+
<table>
188+
<thead>
189+
<tr>
190+
<th></th>
191+
<th>Monday</th>
192+
<th>Tuesday</th>
193+
<th>Wednesday</th>
194+
<th>Thursday</th>
195+
<th>Friday</th>
196+
<th>Saturday</th>
197+
<th>Sunday</th>
198+
</tr>
199+
</thead>
200+
<tbody>
201+
<tr>
202+
<td>Dance class</td>
203+
<td>5:00pm</td>
204+
<td></td>
205+
<td>5:00pm</td>
206+
<td></td>
207+
<td></td>
208+
<td></td>
209+
<td></td>
210+
</tr>
211+
<tr>
212+
<td>Night classes</td>
213+
<td></td>
214+
<td></td>
215+
<td></td>
216+
<td>7:00pm</td>
217+
<td>7:00pm</td>
218+
<td></td>
219+
<td></td>
220+
</tr>
221+
<tr>
222+
<td>Team meeting</td>
223+
<td></td>
224+
<td></td>
225+
<td>10:00am</td>
226+
<td></td>
227+
<td></td>
228+
<td></td>
229+
<td></td>
230+
</tr>
231+
<tr>
232+
<td>Morning workout</td>
233+
<td>8:00am</td>
234+
<td>8:00am</td>
235+
<td>8:00am</td>
236+
<td>8:00am</td>
237+
<td>8:00am</td>
238+
<td></td>
239+
<td></td>
240+
</tr>
241+
</tbody>
242+
</table>
125243
</auro-table>
126244
```
127245
<!-- AURO-GENERATED-CONTENT:END -->

‎apiExamples/basic.html‎

Lines changed: 67 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,69 @@
1-
<auro-table
2-
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
1+
<auro-table
2+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
33
componentData='[
4-
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
5-
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
6-
{"": "Team meeting", "Wednesday": "10:00am" },
7-
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
8-
]'>My morning schedule
4+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
5+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
6+
{"": "Team meeting", "Wednesday": "10:00am" },
7+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
8+
]'
9+
>
910
</auro-table>
11+
12+
<auro-table>
13+
<table>
14+
<thead>
15+
<tr>
16+
<th></th>
17+
<th>Monday</th>
18+
<th>Tuesday</th>
19+
<th>Wednesday</th>
20+
<th>Thursday</th>
21+
<th>Friday</th>
22+
<th>Saturday</th>
23+
<th>Sunday</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr>
28+
<td>Dance class</td>
29+
<td>5:00pm</td>
30+
<td></td>
31+
<td>5:00pm</td>
32+
<td></td>
33+
<td></td>
34+
<td></td>
35+
<td></td>
36+
</tr>
37+
<tr>
38+
<td>Night classes</td>
39+
<td></td>
40+
<td></td>
41+
<td></td>
42+
<td>7:00pm</td>
43+
<td>7:00pm</td>
44+
<td></td>
45+
<td></td>
46+
</tr>
47+
<tr>
48+
<td>Team meeting</td>
49+
<td></td>
50+
<td></td>
51+
<td>10:00am</td>
52+
<td></td>
53+
<td></td>
54+
<td></td>
55+
<td></td>
56+
</tr>
57+
<tr>
58+
<td>Morning workout</td>
59+
<td>8:00am</td>
60+
<td>8:00am</td>
61+
<td>8:00am</td>
62+
<td>8:00am</td>
63+
<td>8:00am</td>
64+
<td></td>
65+
<td></td>
66+
</tr>
67+
</tbody>
68+
</table>
69+
</auro-table>

‎apiExamples/basic_attributes.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<auro-table
2+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
3+
componentData='[
4+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
5+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
6+
{"": "Team meeting", "Wednesday": "10:00am" },
7+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
8+
]'
9+
>
10+
</auro-table>

‎apiExamples/basic_slot.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<auro-table>
2+
<table>
3+
<thead>
4+
<tr>
5+
<th></th>
6+
<th>Monday</th>
7+
<th>Tuesday</th>
8+
<th>Wednesday</th>
9+
<th>Thursday</th>
10+
<th>Friday</th>
11+
<th>Saturday</th>
12+
<th>Sunday</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<tr>
17+
<td>Dance class</td>
18+
<td>5:00pm</td>
19+
<td></td>
20+
<td>5:00pm</td>
21+
<td></td>
22+
<td></td>
23+
<td></td>
24+
<td></td>
25+
</tr>
26+
<tr>
27+
<td>Night classes</td>
28+
<td></td>
29+
<td></td>
30+
<td></td>
31+
<td>7:00pm</td>
32+
<td>7:00pm</td>
33+
<td></td>
34+
<td></td>
35+
</tr>
36+
<tr>
37+
<td>Team meeting</td>
38+
<td></td>
39+
<td></td>
40+
<td>10:00am</td>
41+
<td></td>
42+
<td></td>
43+
<td></td>
44+
<td></td>
45+
</tr>
46+
<tr>
47+
<td>Morning workout</td>
48+
<td>8:00am</td>
49+
<td>8:00am</td>
50+
<td>8:00am</td>
51+
<td>8:00am</td>
52+
<td>8:00am</td>
53+
<td></td>
54+
<td></td>
55+
</tr>
56+
</tbody>
57+
</table>
58+
</auro-table>

‎apiExamples/customTable.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
66
{"": "Team meeting", "Wednesday": "10:00am" },
77
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
8-
]'>My morning schedule
8+
]'>
99
</custom-table>

‎apiExamples/nowrap.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<auro-table
2+
nowrap
3+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
4+
componentData='[
5+
{"": "A very long task name that will not fit", "Monday": "5:00pm","Wednesday": "5:00pm" },
6+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
7+
{"": "Team meeting", "Wednesday": "10:00am" },
8+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
9+
]'
10+
></auro-table>

‎docs/api.md‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
# auro-table
22

3-
## Properties
3+
### Properties & Attributes
44

5-
| Property | Attribute | Type | Default |
6-
|-----------------|-----------------|-----------|---------|
7-
| `columnHeaders` | `columnHeaders` | `array` | |
8-
| `componentData` | `componentData` | `array` | |
9-
| `nowrap` | `nowrap` | `boolean` | false |
5+
| Properties | Attributes | Type | Default | Description |
6+
| ------------- | ------------- | ------- | ------- | ------------------------------------------------------------ |
7+
| columnHeaders | columnHeaders | array | | An array of strings representing the table's column headers. |
8+
| componentData | componentData | array | | An array of objects representing the table's data rows. |
9+
| nowrap | nowrap | boolean | false | When true, prevents the table from wrapping its content. |
10+
11+
### Methods
12+
13+
| Name | Parameters | Return | Description |
14+
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
15+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
16+
17+
### Slots
18+
19+
| Name | Description |
20+
| --------- | ---------------------------------------------------------------------------------------------------------------------------- |
21+
| (default) | Default slot for projecting a native `<table>` element. Only available when `columnHeaders` and `componentData` are not set. |

0 commit comments

Comments
 (0)