Table Sorting

Usernamesortable Last Namesorted ascending First Namesortable E-mailsortable Status
hnguyen Nguyen Hue hue.nguyen@optum.demo Active
jolsen Olsen Jeremy jeremy.olsen@optum.demo Active
nprice Price Natalia natalia.price@optum.demo Inactive
jradcliffe Radcliffe Jennifer jennifer.radcliffe@optum.demo Active
bryan Ryan Brendan brendan.ryan@optum.demo Active
msanders Sanders Melanie melanie.sanders@optum.demo Active
bsorens Sorensen Brian brian.sorensen@optum.demo Inactive
etarkington Tarkington Elizabeth elizabeth.tarkington@optum.demo Active
rtuhey Tuhey Richard richard.tuhey@optum.demo Active
svalentin Valentino Samantha samantha.valentino@optum.demo Active

Developer Notes

In order to add a sorted ascending or sorted descending indicator to table heading text add a span of class ux-icon-tabl-sort-asc, ux-icon-tabl-sort-desc, or ux-icon-tabl-sort-sortable immediately after the column heading's linked text. Within the span you should place screen-reader friendly text. This example uses sorted ascending.

©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.