Minimum example of a table with some sorting

[mike-ward]

Fooling around and wrote this quick table sample. Click on the Author to sort.

https://is.gd/sb3Bqt

[jorgebucaran]

Excellently done! Thank you for sharing, @mike-ward. 👋

Here's my revision.

• Added @hyperapp/html to help tidy up the code a bit. (Optional)
• Fixed a latent bug in sortIt.
  • Sort sorts arrays in place, unfortunately, so you usually need to make a copy of the array before sorting it.
• Renamed a few functions.
  • sortIt→tableSort
  • tableOfCatFacts→factsTableView.
• Modified setState to use new mainView function.

[mike-ward]

Another variation

Couple of questions:

 const setState = (state) =>
    patch(
      document.getElementById("app"),
      h("main", {}, [
        h('h1', {}, text("Cat Facts")),
        factsTable(state)
      ])
    )

• h("main", {}, [ doesn't write the id attribute and yet it's in the updated DOM after sorting. Seems like the patched DOM would be missing the id attribute since I didn't include it in my VDOM. How does it get in there?

• Should patch be modified to take a VDOM or an array of VDOM's?

• In asking the last question I realized that there's no place to put the id attribute with just an array of VDOM's. I think I was expecting patch to nest the VDOM in the DOM node.

Really like the simplicity and just noodling around to understand it better.

[jorgebucaran]

1) The id is unknown to Superfine (since it's not declared in your view/VDOM) and Superfine won't touch any attributes it doesn't know about—how well-mannered! It gets there because Superfine recycles the existing main element instead of throwing it away and creating it from scratch. 2) Hmm, I don't think so. While some VDOMs might behave like that, Superfine works by replacing or patching the DOM root/element (in this case patching because your HTML element matches the root element in your VDOM). 3) Gotcha. I think I covered this above.

Let me know if this covers everything for you. 🙏

Really like the simplicity and just noodling around to understand it better.

That's awesome. Thank you!

[mike-ward]

An overload to the h() API that takes its children as splat arguments would be helpful.

h(type, props, ...children)

Mithril JS does this and I've found it useful.

[jorgebucaran]

I believe that's easy enough to implement in userland and import into your project. I also have a dislike for variadic functions.