I have a web application (laravel) with a page which presents a large number of rows (financial transactions) in a HTML table. On each row I want to have a drop-down (select input) allowing the user to assign a category to the transaction.

What is the best approach for allowing the user to select/assign these categories, without creating a page that will be very slow to use on mobile devices??

Here is what I’ve tried:

Initially I created a single form which contains the entire table, having a select input on every row with a unique id. This seems quite slow and “heavy” though and requires submitting and processing the entire form even if just changing a single row.

As an alternative I created a form on every row, that way I can auto-submit it when they make a change in the select box, which is nicer, but it is still very slow to render so many select boxes, especially if using select2 to style them.

I can try to page the data more aggressively, but I’m wondering if there’s a better basic approach?

It occurs to me I could create the form once, hidden, and just display it inplace in the row being edited somehow using javascript (either substituting select box for static text or displaying it below would be okay too. But I’m not sure the best way to go about this, or even if this is best practice for this sort of situation??

How would others approach this? Single form, form per editable row/cell, dynamic form substituted in place etc? I guess I’m not searching for the right things, but am having trouble establishing current best practice for this sort of thing.

I’m using php, laravel 5.4, jquery, bootstrap3 for the page.