Dynamic tables

Dynamic tables allow the user to see content they've entered without refreshing the page.

Example dynamic table
Input:
Input fields need to match the content displayed in the table below unless the content entered uses smart defaults.
Transitions:
Transitioning the content from input field(s) to the table should be quick and smooth. Multiple rows of content appear in sequence, except where there are more than ten rows, in which case they'll appear simultaneously.
Added rows:
Added rows stay highlighted for a short period of time.
Example - less than 10 rows
Example dynamic table with less than 10 rows
Example - more than 10 rows
Example dynamic table with more than 10 rows

Editing row content

On simple tables, where there's only one type of content to display (as in the examples above), an edit button should not be needed. In more complex tables where there are multiple types of content displayed, you may want to add an edit link to the additional actions button.

Complex dynamic table example

If your table is complex, with a large number of input fields, you should use a modal dialog or dedicated page for entering content instead of a dynamic table.

Removing a row
Removing a row example
Error state
Example error state
Retry link:
Will retry the failed action. The retry link won't fade or disappear unless the page is refreshed or the error is resolved.
Retry spinner:
A spinner is shown when the user retries the action. This transitions into an error state or success state.
Example
Error state example