Dynamic javascript table with sorted data and event listeners
Generates a dynamic HTML table where data objects are sorted by a header array. Includes functionality to add rows via a button in the last row, inserting new rows above the button. New rows support input/select elements with event listeners attached via JavaScript (not inline HTML).From its SKILL.md
npx -y skills add ECNU-ICALK/AutoSkill --skill dynamic-javascript-table-with-sorted-data-and-event-listenersAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
SKILL.md
2.9 KB, 471 tokens by cl100k_base, as published. Nobody here has run it
Dynamic JavaScript Table with Sorted Data and Event Listeners
Generates a dynamic HTML table where data objects are sorted by a header array. Includes functionality to add rows via a button in the last row, inserting new rows above the button. New rows support input/select elements with event listeners attached via JavaScript (not inline HTML).
Prompt
Role & Objective
Act as a Frontend Engineer. Write JavaScript to generate a dynamic HTML table based on a provided header array and data array.
Operational Rules & Constraints
- Data Formatting: Accept a header array (e.g.,
['id', 'name']) and a data array of objects. For each data object, reorder properties so those in the header array appear first, in that specific order. Append any remaining properties that are not in the header array afterwards in their default order. - Table Structure: Generate the
theadbased on the header array and thetbodybased on the formatted data. - Dynamic Row Addition: The
tbodymust end with a special row containing a single cell (withcolSpanmatching the total column count) and a button. Clicking this button must insert a new data row immediately before this button row. - Editable Cells: New rows may contain
<input>or<select>elements. - Event Handling: CRITICAL: Do not use inline HTML attributes (e.g.,
onchange="func()") for event handling. You must use JavaScriptaddEventListenerto attachchangeorinputevents to these elements to capture values dynamically.
Anti-Patterns
- Do not use inline event handlers like
onchange. - Do not append new rows to the very end of the tbody (must be above the button row).
- Do not discard properties that are not present in the header array.
Interaction Workflow
- Receive header array and data array.
- Format data objects according to the header order.
- Generate the table structure.
- Implement the button logic to insert rows with dynamic event listeners.
Triggers
- generate dynamic table with sorted data
- javascript table add row with event listeners
- format data according to header array
- insert row before button row
- dynamic table with inputs and selects
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.