Edit a table field type from the front end

Question

Similar to this question, I'm trying to make a table field type editable from a front end form.

When I update from the CP, the changes are reflected on the front end, but the following code doesn't allow updating from the front end form itself.

Is there anything I'm missing?

(perhaps adding how each field type can be edited from a front end form should be added to the docs)

<table>
    {% for row in currentUser.providerCredentials %}
    <tr>
        <td>Institution</td>
        <td><input type="text" id="accreditingInstitution" name="fields[accreditingInstitution][]" value="{{ row.accreditingInstitution }}"></td>
    </tr>
    {% endfor %}
</table>

Answer 1

Each input name needs to have the following format:

fields[FieldHandle][RowId][ColId]

It doesn’t matter what you set RowId to, as long as it’s the same for all of the columns in that row. (Table fields in the CP just get incrementing row IDs - 0, 1, 2, etc.)

ColId, on the other hand, needs to be based on your actual column IDs. The only way to get those would be to inspect a Table field’s HTML on your Edit Entry page:

Each column will have an ID in the format of colN. “N” won’t necessarily be nth column in the table though; it will be the nth column you’ve created in the table since the field was first created, regardless of how they are ordered or whether any columns had ever been deleted. Which is why it’s best to just inspect the table HTML rather than trying to guess what the column ID will be.

So in your case, that <td> line should look something like this:

<td><input type="text" id="accreditingInstitution" name="fields[providerCredentials][0][col1]" value="{{ row.accreditingInstitution }}"></td>