#100DaysOfCode - Day 45: Inline Web Table Editing
3 mins
Today, I’ve largely been looking into tools like angular-xeditable to make some inline table edits, similar to what it’s like editing an Excel table. This is really useful for data based applications, and I was really interested in setting up something like this at my first employer, where we only used jQuery, BootStrap and a few other supplementary libraries - in that case, it would’ve been using this jQuery based implementation (same author).
In terms of making edits per cell, it seems like angular-xeditable natively supports that, but I’ve realized that’s not really a desired state for any “real” product. If you’re making edits to data, and each data object is a row, you’d naturally only want to send an update to the server when the entire row is finished updating. Unfortunately, it doesn’t look like xeditable fully supports that (atleast not dynamically).
There’s an issue open to set something like this up in tables that are wrapped in <form></form> tags, but it doesn’t look like it was actually updated back in 2018 when someone wanted to add that functionality. While I would love to see if I could get something working more than anything, I’m also hopeful of using angular-xeditable, because I’d be able to contribute to the library if needed.
In any case, here’s a demo of what this library looks like out of the box (Styling via Bootstrap):
Angular-XEditable - Single Item Edit
| Name | Gender |
|---|---|
| {[{ x.name || 'empty' }]} | {[{ x.gender || 'empty' }]} |
I’m not a huge fan of the editing jumpiness (if you’ve noticed any), and then I’m also not a big fan of just being able to do one element at a time. I’m looking to be able to hit something (like an Edit button) on the side of a row, then have ALL of them be editable at the same time. While I don’t have it working yet, here’s what that would look like:
So far, I’m really liking the guide that this sort of lays out for implementing this (and it admittedly doesn’t use an ugly pencil icon like I just did), so I’ll be interested to follow-up on that tutorial to see if I can get something working here. This would be super useful for our SecretSanta application.
Happy coding!
~ Moxnr