Is Select2 a good option for my use-case: selecting what columns are visible in a table

#1

I would like the user to be able to select columns and reorder them by dragging and dropping the column name.
This is in an admin/settings environment, the table is not present at this point but is generated later on the server according to the selected options (and displayed on another page/url). So the selection will be posted as-is (not used in javascript to dynamically change a table).

None of the demo’s seem to allow reordering though but there is support for “adapters and decorators” so I’m wondering if I should try to expand the capabilities of Select2 or rather look for an alternative solution.
An opinion of someone who knows the inner workings would be valuable!

#2

To answer the question in the subject of your post: I don’t think Select2 is a good option for your use case, for the following reasons:

  1. As you noted, there is no built-in reordering feature (especially drag-and-drop). There is also no official documentation on how to write Adapters and Decorators for Select2 (nor have I found many third-party online tutorials). You will essentially be on your own to figure out how to do it.
  2. To implement that feature you’d need the dropdown to stay open; Select2 doesn’t typically behave that way, although you can force it to.
  3. To be usable, all of the options (column headings) would need to be visible at one time. This implies either that you only have a few options, or that you expect the dropdown to be quite long.
  4. Select2’s main differentiator from a standard HTML <select> element is the search/filter feature. It’s not clear how this feature would be useful in your use case.

I would recommend creating your own drag-and-drop list UI. There are plenty of online tutorials for doing that. You could store the final selections and order in a hidden form field, or directly POST the selections/order to an endpoint on your server via fetch() or xhr(). If you need to show/hide the list, the HTML <details> element provides native show/hide capability, or you could instrument it yourself with a button that shows/hides a <div> (or <section>) containing your list UI.