Table Data Display

UsernameSorted Ascending	Last Name	First Name	E-mail	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

Data display tables are HTML tables of class ux-tabl-data. At least one column in the table has to be denoted as the wide column so that the padding is correct on all the other columns. By default this is the last column, which means you should apply the ux-tabl-last-col class to the last <th> in the first row.

A table head (thead) should immediately follow the opening table tag (or caption). It should contain one row, and all of the cells in that row should be of type th.

We are not currently using a table footer, so the table body (tbody) should follow the table head. All cells in the table body should be of type td. Every other table row (tr) in the body should get the alternate row treatment class (ux-tabl-alt-row).

Selected rows should get the class ux-tabl-selected. The hover state of each row is built into the CSS.

For more information see the Alternating Row Colors and Table Sorting patterns.