Better alternative to having a html form with select input on every row in table

Question

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.

Answer 1

You can use DataTables

In the example you can see how the plus control works

$('#example tbody').on( 'click', 'tr td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = dt.row( tr );
    var idx = $.inArray( tr.attr('id'), detailRows );

    if ( row.child.isShown() ) {
        tr.removeClass( 'details' );
        row.child.hide();

        // Remove from the 'open' array
        detailRows.splice( idx, 1 );
    }
    else {
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }
} );

You will need the format() function to generate and return an HTML form using the data provided through the argument

This approach will instantiate a form for each row only when that row is expanded

Obviously you'll have to destroy the table when the row gets closed

There's a large number of features and DataTables itself is very flexible. I'm recommending it because I feel like it's also going to solve your other problem, like loading and rendering a lot of data in a staggered fashion