Inline Edit Table
A table variation that lets users modify certain values of the entry without going to the detail page.
- Use an inline edit table when you need to list information that may require quick editing. This pattern is used for cases such as commerce where editing is often required.
- The "Edit" button is always visible since its the main feature of the inline edit table.
- Each row has two different modes:
- This table doesn't have a responsive version for mobile devices.
- It is the default status of the row in which the table data is not editable.
- To enter edit mode, click the Edit button.
- More actions are available under the actions button. If an element has an edit screen, name it "Advanced edit."
- In this mode, if an entry is editable, it is transformed into one of the following input fields when it's clicked: text field, numeric field, select, etc.
- This mode has two different actions:
Save: saves the changes and enters view mode.
Cancel: discards the changes and enters view mode.
An editable row can contain the same elements as a standard table row. An inline editable table includes these attributes:
- Main column text.
- Other columns, in which different components may appear.
- Edit button.
- Actions button.
The minimum distance between two columns is 24px.