Render an editable table using Flask, Jinja2 templates, then process the form data returned

Question

I\'m using Flask and Jinja2 and I need to make an editable table with multiple rows.

This is what the table will look like:

Answer 1

FieldList will work, you need to make a list of a FormField. Specify your FormField like so:

class MemberForm(Form):
    name = StringField('name')
    member_id = StringField('member_id')
    inbox_share = IntegerField('inbox_share')
    # etc.

class TeamForm(Form):
    title = StringField('title')
    teammembers = FieldList(FormField(MemberForm))

Then you can create the forms from your database in a view function like so:

@app.route('/support/team-members-update', methods=['GET','POST'])
def update_team_members():
    teamform = TeamForm()
    teamform.title.data = "My Team" # change the field's data
    for member in DB.get('teammembers') # some database function to get a list of team members
        member_form = MemberForm()
        member_form.name = member.name # These fields don't use 'data'
        member_form.member_id = member.id
        member_form.inbox_share = member.share

        teamform.teammembers.append_entry(member_form)

    return render_template('edit-team.html', teamform = teamform)

And then in the template, you can iterate over each item in teammembers as you create your table rows:

    
        
    
    
        
Edit Team
        

            

                {{ teamform.hidden_tag() }}
                Team Title: {{ teamform.title }}

                

                    
                        {% for member in teamform.teammembers %}
                        
                        {% endfor %}
                    

                        

                            
 Name 
                            
 ID 
                            
 Inbox Share 
                        

                            
{{ member.name }}
                            
{{ member.member_id }}
                            
{{ member.inbox_share }}