Interactive table demo prompt

interactive-table-demo-prompt.txt

Build me an interactive database exploration tool using only HTML, CSS and basic JavaScript. (Do not use any external JavaScript or CSS dependencies.)

The tool will load a JSON file containing a list of objects. Each object will have fields called "name", "year", "county", "initialMOD", "auditMOD" and "disagreement". An example of data is here:

[
    {name: "John Smith", year: "2023", "county": "Arlington", "initialMOD": "Accident", "auditMOD": "Homicide", disagreement: "All", moreInfo: null},
    {name: "Jane Doe", year: "2005", "county": "Fairfax", "initialMOD": "Accident", "auditMOD": "Accident", disagreement: "None", moreInfo: "This is important information."},
    {name: "Suzy Cupcakes", year: "2013", "county": "Washtenaw", "initialMOD": "Undetermined", "auditMOD": "Undetermined", disagreement: "Some", moreInfo: "Something else"},
]

Using this sample data, generate a few dozen rows of values to be displayed. Some rows should have moreInfo values and some should have a null value for this field. The disagreement field should have only values of "All" and "Some" and "None".

The data should be sorted in descending order by year (later years first). Within the rows for each year, sort alphabetically by name (using the full name and ordering from A to Z).

This tool should have different displays based on viewport width. When it's shown in a space less than desktop width, each object in the data should be displayed as a table row with three items — the value of the name field, an icon based on the value of the disagreement field and an equilateral triangle icon.

The disagreement icon should be a check mark when the "disagreement" field starts with the word "All". It should be an asterisk icon when the "disagreement" value begins with the word "Some". For all other values it should be an X or "times" icon. This icon should be larger than the triangle icon next to it, and both icons should be aligned to the right and centered on each other vertically.

By default the equilateral triangle icon should be pointing straight up. When any part of the row is clicked the icon should turn upside down so it's pointing straight down, and addditional fields (with labels above them) should be shown for the year, county, initialMOD, auditMOD and moreInfo values. If the moreInfo value is null, don't show that field.

At screen sizes 768px wide or wider, it should show a 768 pixel table listing name, year, county, initialMOD, auditMOD and moreInfo fields in that order.

The tool should paginate results, so only 10 results are shown on each page. There should be next and previous buttons to go between pages, as well as a "Page X of Y" label adjacent to those buttons. If the user is on the first page, the previous button should be greyed out and not clickable — and when the user is on the last page, the next button should be similarly greyed out and not clickable.

Ask me any additional questions you need to get started creating this code, then generate a draft.