Dynamic tables allow the user to see content they've entered without refreshing the page.
- Input fields need to match the content displayed in the table below unless the content entered uses smart defaults.
- 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 - 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.
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
- 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.