Editable Rows

Username Last Name First Name E-mail Edit
hnguyen Nguyen Hue hue.nguyen@optum.demo Edit
jolsen Olsen Jeremy jeremy.olsen@optum.demo Edit
ConfirmCancel
jradcliffe Radcliffe Jennifer jennifer.radcliffe@optum.demo Edit
bryan Ryan Brendan brendan.ryan@optum.demo Edit
msanders Sanders Melanie melanie.sanders@optum.demo Edit
bsorens Sorensen Brian brian.sorensen@optum.demo Edit
etarkington Tarkington Elizabeth elizabeth.tarkington@optum.demo Edit
rtuhey Tuhey Richard richard.tuhey@optum.demo Edit
svalentin Valentino Samantha samantha.valentino@optum.demo Edit
Edit confirmed.
Edit cancelled.

Developer Notes

Editable rows should use standard form elements. These should be styled via defaults, so you should only have to use basic HTML.

The three different table icons are links of ux-icon-edit, ux-icon-confirm, and ux-icon-cancel. If you want a tooltip on the link use the title attribute. The text content of the link won't be visible so you should use a semantic descriptor for people using screen-readers.

The two different feedback messages are just like those in the Page-Level Messaging pattern, with the addition of the utility class of ux-util-inline-block. You should position these dynamically using JavaScript.

©2015 - Matt Lavallee - Senior UI/UX Designer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt ligula dui, ut sodales tortor. Integer cursus, nisl a aliquet congue, diam metus dapibus risus, eget lacinia sapien est in mauris. Maecenas et neque sed neque tristique commodo id non massa. Aliquam eget egestas neque. Suspendisse mauris nisl, accumsan sit amet ullamcorper sed, tincidunt at justo.