Change emu-table to use CSS grid to make them less verbose
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 245
- Forks
- 80
- Avg merge
- 10h 46m
- Merged PRs (30d)
- 2
Description
Currently a table looks like:
<emu-table id="table-2" caption="Attributes of a Data Property">
<table>
<tbody>
<tr>
<th>
Attribute Name
</th>
<th>
Value Domain
</th>
<th>
Description
</th>
</tr>
<tr>
<td>
[[Value]]
</td>
<td>
Any ECMAScript language type
</td>
<td>
The value retrieved by a get access of the property.
</td>
</tr>
<tr>
<td>
[[Writable]]
</td>
<td>
Boolean
</td>
<td>
If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.
</td>
</tr>
<tr>
<td>
[[Enumerable]]
</td>
<td>
Boolean
</td>
<td>
If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.
</td>
</tr>
<tr>
<td>
[[Configurable]]
</td>
<td>
Boolean
</td>
<td>
If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.
</td>
</tr>
</tbody>
</table>
</emu-table>
A CSS grid would look like:
<emu-table id="table-2" caption="Attributes of a Data Property">
<emu-th>Attribute Name</emu-th>
<emu-th>Value Domain</emu-th>
<emu-th>Description</emu-th>
<emu-td>[[Value]]</emu-td>
<emu-td>Any ECMAScript language type</emu-td>
<emu-td>The value retrieved by a get access of the property.</emu-td>
<emu-td>[[Writable]]</emu-td>
<emu-td>Boolean</emu-td>
<emu-td>If *false*, attempts by ECMAScript code to change the property's [[Value]] attribute using [[Set]] will not succeed.</emu-td>
<emu-td>[[Enumerable]]</emu-td>
<emu-td>Boolean</emu-td>
<emu-td>If *true*, the property will be enumerated by a for-in enumeration (see <emu-xref href="#sec-for-in-and-for-of-statements"></emu-xref>). Otherwise, the property is said to be non-enumerable.</emu-td>
<emu-td>[[Configurable]]</emu-td>
<emu-td>Boolean</emu-td>
<emu-td>If *false*, attempts to delete the property, change the property to be an accessor property, or change its attributes (other than [[Value]], or changing [[Writable]] to *false*) will fail.</emu-td>
</emu-table>
The <emu-th> would define the number of columns.
I've been adding a bunch of stuff to tables and this would make things look clean.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no files or tests. Start by locating the emu-table handling and the styles that render its contents, then verify how emu-th and emu-td can define the columns. Done means the compact syntax in the example renders the same table using CSS grid.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- documentation
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100