Tables

Data Tables help communicate relationships between content.

Coded Components

Helper classes: Looking for a complete list of helper classes for these components?View helper classes

Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.

Standard Table

<table class="dds__table dds__table-hover dds__table-responsive-lg"> <thead> <tr> <th scope="col">Date</th> <th scope="col">Order</th> <th scope="col">Product</th> <th scope="col">Description</th> <th scope="col">Status</th> <th scope="col">Delivery</th> <th scope="col">Tracking</th> </tr> </thead> <tbody> <tr> <th scope="row">03/19/15</th> <td>#42568</td> <td tabindex="-1"><a href="javascript:;">Optiplex 9020</a></td> <td>OptiPlex 9020-Dell’s premium business-class desktop.</td> <td>In process</td> <td>03/22/15</td> <td>TBD</td> </tr> <tr> <th scope="row">03/22/15</th> <td>#77475</td> <td tabindex="-1"><a href="javascript:;">OptiPlex 7020</a></td> <td>Mainstream performance, and advanced security and manageability.</td> <td>Shipping</td> <td>04/05/15</td> <td tabindex="-1"><a href="javascript:;">#de467ft53s</a></td> </tr> <tr> <th scope="row">03/24/15</th> <td>#44356</td> <td tabindex="-1"><a href="javascript:;">OptiPlex XE2</a></td> <td>Long-term computing solution and highly durable OptiPlex XE2</td> <td>Out for Delivery</td> <td>04/08/15</td> <td tabindex="-1"><a href="javascript:;">#0U812-90210s</a></td> </tr> </tbody>
</table>

Standard Table with Stripes

<table class="dds__table dds__table-hover dds__table-striped dds__table-responsive-lg"> <thead> <tr> <th scope="col">Date</th> <th scope="col">Order</th> <th scope="col">Product</th> <th scope="col">Description</th> <th scope="col">Status</th> <th scope="col">Delivery</th> <th scope="col">Tracking</th> </tr> </thead> <tbody> <tr> <th scope="row">03/19/15</th> <td>#42568</td> <td tabindex="-1"><a href="javascript:;">Optiplex 9020</a></td> <td>OptiPlex 9020-Dell’s premium business-class desktop.</td> <td>In process</td> <td>03/22/15</td> <td>TBD</td> </tr> <tr> <th scope="row">03/22/15</th> <td>#77475</td> <td tabindex="-1"><a href="javascript:;">OptiPlex 7020</a></td> <td>Mainstream performance, and advanced security and manageability.</td> <td>Shipping</td> <td>04/05/15</td> <td tabindex="-1"><a href="javascript:;">#de467ft53s</a></td> </tr> <tr> <th scope="row">03/24/15</th> <td>#44356</td> <td tabindex="-1"><a href="javascript:;">OptiPlex XE2</a></td> <td>Long-term computing solution and highly durable OptiPlex XE2</td> <td>Out for Delivery</td> <td>04/08/15</td> <td tabindex="-1"><a href="javascript:;">#0U812-90210s</a></td> </tr> </tbody>
</table>

Complex Table

<table data-table="dds__table" class="dds__table dds__table-hover dds__table-cmplx" data-table-data='{"showData":false,"search":true,"select":true,"settings":true,"sort":true,"expand":false,"fixedColumns":true, "rearrangeableColumns":true, "fixedHeight":false,"header":true,"perPageSelect":[10,20,40,80,100],"perPage":10,"data":{"headings":["Name","Company","Extension","Start Date","Email","Phone","Link"],"columns":[{"select":0,"sort":"asc","fixed":true},{"select":[1,2],"hidden":true,"fixed":true},{"select":3,"type":"date","format":"MM/DD/YYYY","sortable":true}],"rows":[{"data":["Hedwig F. Nguyen","Arcu Vel Foundation","9875","03/27/2017","nunc.ullamcorper@metusvitae.com","070 8206 9605","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"]},{"data":["Genevieve U. Watts","Eget Incorporated","9557","07/18/2017","Nullam.vitae@egestas.edu","0800 025698","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Genevieve U. Watts details"},{"data":["Kyra S. Baldwin","Lorem Vitae Limited","3854","04/14/2016","in@elita.org","0800 237 8846","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Kyra S. Baldwin details"},{"data":["Stephen V. Hill","Eget Mollis Institute","8820","03/03/2016","eu@vel.com","0800 682 4591","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Stephen V. Hill details"},{"data":["Vielka Q. Chapman","Velit Pellentesque Ultricies Institute","2307","06/25/2017","orci.Donec.nibh@mauriserateget.edu","0800 181 5795","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Vielka Q. Chapman details"},{"data":["Ocean W. Curtis","Eu Ltd","6868","08/24/2017","cursus.et@cursus.edu","(016977) 9585","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Ocean W. Curtis details"},{"data":["Kato F. Tucker","Vel Lectus Limited","4713","11/06/2017","Duis@Lorem.edu","070 0981 8503","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Kato F. Tucker details"},{"data":["Robin J. Wise","Curabitur Dictum PC","3285","02/09/2017","blandit@montesnascetur.edu","0800 259158","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Robin J. Wise details"},{"data":["Uriel H. Guerrero","Mauris Inc.","2294","02/11/2018","vitae@Innecorci.net","0500 948772","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Uriel H. Guerrero details"},{"data":["Yasir W. Benson","At Incorporated","3897","01/13/2017","ornare.elit.elit@atortor.edu","0391 916 3600","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"]},{"data":["Shafira U. French","Nisi Magna Incorporated","5116","07/23/2016","metus.In.nec@bibendum.ca","(018013) 26699","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Shafira U. French details"},{"data":["Casey E. Hood","Lorem Vitae Odio Consulting","7079","05/05/2017","justo.Praesent@sitamet.ca","0800 570796","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Casey E. Hood details"},{"data":["Caleb X. Finch","Elit Associates","3629","09/19/2016","condimentum@eleifend.com","056 1551 7431","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Caleb X. Finch details"}]}}'> <caption class="dds__sr-only">A Complex Tables <span>Table used to display User information</span> </caption>
</table>
<nav class="dds__pagination dds__pagination-justified-filter" data-toggle="dds__pagination" aria-label="pagination"></nav>

pocTableCustomFunc = function() { window.alert('hi'); } UIC.loadURLSVGs(["svgs/dds__search.svg","svgs/dds__import-alt.svg","svgs/dds__handle.svg","svgs/dds__chevron-right.svg","svgs/dds__chevron-left.svg","svgs/dds__loading-sqrs.svg","svgs/dds__chevron-right.svg","svgs/dds__arrow-tri-solid-right.svg","svgs/dds__printer.svg","svgs/dds__gear.svg"]); var options = { search: true, settings: true, print: true, import: true, column: true, sort: true, select: true, expand: true, condensed: false, fixedColumns: true, fixedHeight: true, rearrangeableColumns: true, exportDetails: true, header: true, additionalActions: [{html: 'Custom batch action', js: "pocTableCustomFunc('test')", pos: 1}], perPage: 12, items: 100, layout: { row1: "{deleteAll:2:start}{settings:1:end}", row2: "{actions:1:start}{placeholder:1}{search:1:end}" }, data: { headings: [ "Name", "Company", "Extension", "Start Date", "Email", "Phone", "Link" ], columns: [ // Sort the second column in ascending order // and make it fixed at that position. // sort on multiple selects , select[1,2], does not work {select: [0,1,2,3,4,5,6], control: false}, {select: [4,5,6], hidden: true}, {select: [0,1,2,3,4,5,6], fixed: true}, // Set the third column as date string matching the format "MM/DD/YYY" and sortable { select: 3, type: "date", format: "MM/DD/YYYY", sortable: true }, ], rows: [ { data: [ "Hedwig F. Nguyen", "Arcu Vel Foundation", "9875", "03/27/2017", "nunc.ullamcorper@metusvitae.com", "070 8206 9605", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, { data: [ "Genevieve U. Watts", "Eget Incorporated", "9557", "07/18/2017", "Nullam.vitae@egestas.edu", "0800 025698", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Genevieve U. Watts details" }, { data: [ "Kyra S. Baldwin", "Lorem Vitae Limited", "3854", "04/14/2016", "in@elita.org", "0800 237 8846", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Kyra S. Baldwin details" }, { data: [ "Stephen V. Hill", "Eget Mollis Institute", "8820", "03/03/2016", "eu@vel.com", "0800 682 4591", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Stephen V. Hill details" }, { data: [ "Vielka Q. Chapman", "Velit Pellentesque Ultricies Institute", "2307", "06/25/2017", "orci.Donec.nibh@mauriserateget.edu", "0800 181 5795", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Vielka Q. Chapman details" }, { data: [ "Ocean W. Curtis", "Eu Ltd", "6868", "08/24/2017", "cursus.et@cursus.edu", "(016977) 9585", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Ocean W. Curtis details" }, { data: [ "Kato F. Tucker", "Vel Lectus Limited", "4713", "11/06/2017", "Duis@Lorem.edu", "070 0981 8503", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Kato F. Tucker details" }, { data: [ "Robin J. Wise", "Curabitur Dictum PC", "3285", "02/09/2017", "blandit@montesnascetur.edu", "0800 259158", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Robin J. Wise details" }, { data: [ "Uriel H. Guerrero", "Mauris Inc.", "2294", "02/11/2018", "vitae@Innecorci.net", "0500 948772", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Uriel H. Guerrero details" }, { data: [ "Yasir W. Benson", "At Incorporated", "3897", "01/13/2017", "ornare.elit.elit@atortor.edu", "0391 916 3600", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, { data: [ "Shafira U. French", "Nisi Magna Incorporated", "5116", "07/23/2016", "metus.In.nec@bibendum.ca", "(018013) 26699", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Shafira U. French details" }, { data: [ "Casey E. Hood", "Lorem Vitae Odio Consulting", "7079", "05/05/2017", "justo.Praesent@sitamet.ca", "0800 570796", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Casey E. Hood details" }, { data: [ "Caleb X. Finch", "Elit Associates", "3629", "09/19/2016", "condimentum@eleifend.com", "056 1551 7431", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Caleb X. Finch details" } ] } }; var tableEl, table, idx = 0; [].forEach.call(document.querySelectorAll("[data-table=\"dds__table\"]"), function (element) { switch(idx) { case 0: new UIC.Table(element); idx++; break; case 1: new UIC.Table(element); idx++; break; default: table = new UIC.Table(element, options); tableEl = element; idx++; } }); tableEl.addEventListener("uicTableSortEvent", function(e) { //table.clear(); }); tableEl.addEventListener("uicTableNewPageEvent", function(e) { insertData(e.detail.rows); table.page(e.detail.page); }); tableEl.addEventListener("uicTableMoreRowsEvent", function(e) { insertData(e.detail.rows); table.perPage(e.detail); }); function insertData(neededRows) { //table.import(JSON.parse('{"data":{"headings":["Name","Company","Extension","Start Date","Email","Phone","Link"],"rows":[{"data":["Hedwig F. Nguyen","Arcu Vel Foundation","9875","03/27/2017","nunc.ullamcorper@metusvitae.com","070 8206 9605","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"]},{"data":["Genevieve U. Watts","Eget Incorporated","9557","07/18/2017","Nullam.vitae@egestas.edu","0800 025698","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Genevieve U. Watts details"},{"data":["Kyra S. Baldwin","Lorem Vitae Limited","3854","04/14/2016","in@elita.org","0800 237 8846","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Kyra S. Baldwin details"},{"data":["Stephen V. Hill","Eget Mollis Institute","8820","03/03/2016","eu@vel.com","0800 682 4591","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Stephen V. Hill details"},{"data":["Vielka Q. Chapman","Velit Pellentesque Ultricies Institute","2307","06/25/2017","orci.Donec.nibh@mauriserateget.edu","0800 181 5795","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Vielka Q. Chapman details"},{"data":["Ocean W. Curtis","Eu Ltd","6868","08/24/2017","cursus.et@cursus.edu","(016977) 9585","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Ocean W. Curtis details"},{"data":["Kato F. Tucker","Vel Lectus Limited","4713","11/06/2017","Duis@Lorem.edu","070 0981 8503","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Kato F. Tucker details"},{"data":["Robin J. Wise","Curabitur Dictum PC","3285","02/09/2017","blandit@montesnascetur.edu","0800 259158","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Robin J. Wise details"},{"data":["Uriel H. Guerrero","Mauris Inc.","2294","02/11/2018","vitae@Innecorci.net","0500 948772","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Uriel H. Guerrero details"},{"data":["Yasir W. Benson","At Incorporated","3897","01/13/2017","ornare.elit.elit@atortor.edu","0391 916 3600","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"]},{"data":["Shafira U. French","Nisi Magna Incorporated","5116","07/23/2016","metus.In.nec@bibendum.ca","(018013) 26699","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Shafira U. French details"},{"data":["Casey E. Hood","Lorem Vitae Odio Consulting","7079","05/05/2017","justo.Praesent@sitamet.ca","0800 570796","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Casey E. Hood details"},{"data":["Caleb X. Finch","Elit Associates","3629","09/19/2016","condimentum@eleifend.com","056 1551 7431","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Caleb X. Finch details"}]}}')); var data = {data: { headings: [ "Name", "Company", "Extension", "Start Date", "Email", "Phone", "Link" ], rows: [] } }; for (var i = 0; i < neededRows; i++) { var ran = Math.floor(Math.random() * (11 - 0 + 1) + 0); data.data.rows.push(getData(ran)); } table.import(data); }; function deleteAll() { return "<button class='dds__btn dds__btn-secondary' onclick='table.deleteAll();'>Delete All</button> <button class='dds__btn dds__btn-primary' onclick='table.setItems(24);table.import(insertData(12));'>Insert Data</button>"; } function getData(i) { return mockData[i]; }; var mockData = [ { data: [ "Hedwig F. Nguyen", "Arcu Vel Foundation", "9875", "03/27/2017", "nunc.ullamcorper@metusvitae.com", "070 8206 9605", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, {	data: [ "Genevieve U. Watts", "Eget Incorporated", "9557", "07/18/2017", "Nullam.vitae@egestas.edu", "0800 025698", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Genevieve U. Watts details" }, {	data: [ "Kyra S. Baldwin", "Lorem Vitae Limited", "3854", "04/14/2016", "in@elita.org", "0800 237 8846", "<a href='//www.dell.com'>Dell Home Page</a>" ], details:"Kyra S. Baldwin details" }, {	data: [ "Stephen V. Hill", "Eget Mollis Institute", "8820", "03/03/2016", "eu@vel.com", "0800 682 4591", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Stephen V. Hill details" }, {	data: [ "Vielka Q. Chapman", "Velit Pellentesque Ultricies Institute", "2307", "06/25/2017", "orci.Donec.nibh@mauriserateget.edu", "0800 181 5795", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Vielka Q. Chapman details" }, {	data: [ "Ocean W. Curtis", "Eu Ltd", "6868", "08/24/2017", "cursus.et@cursus.edu", "(016977) 9585", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Ocean W. Curtis details" }, {	data: [ "Kato F. Tucker", "Vel Lectus Limited", "4713", "11/06/2017", "Duis@Lorem.edu", "070 0981 8503", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Kato F. Tucker details" }, {	data: [ "Robin J. Wise", "Curabitur Dictum PC", "3285", "02/09/2017", "blandit@montesnascetur.edu", "0800 259158", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Robin J. Wise details" }, {	data: [ "Uriel H. Guerrero", "Mauris Inc.", "2294", "02/11/2018", "vitae@Innecorci.net", "0500 948772", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Uriel H. Guerrero details" }, {	data: [ "Yasir W. Benson", "At Incorporated", "3897", "01/13/2017", "ornare.elit.elit@atortor.edu", "0391 916 3600", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, {	data: [ "Shafira U. French", "Nisi Magna Incorporated", "5116", "07/23/2016", "metus.In.nec@bibendum.ca", "(018013) 26699", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Shafira U. French details" }, {	data: [ "Casey E. Hood", "Lorem Vitae Odio Consulting", "7079", "05/05/2017", "justo.Praesent@sitamet.ca", "0800 570796", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Casey E. Hood details" } ]

Complex Table with Stripes and Expandable Details

<table data-table="dds__table" class="dds__table dds__table-hover dds__table-cmplx dds__table-striped"> <caption class="dds__sr-only">A Complex Tables <span>Table used to display User information</span> </caption>
</table>
<nav class="dds__pagination dds__pagination-justified-filter" data-toggle="dds__pagination" aria-label="pagination"></nav> <!-- The script section below can be used to initialize the above table via the javascript object options. For more
information about the options object please see complex tables on the design site -->
<!-- <script> var options = { search: true, actions: true, settings: true, print: true, sort: true, expand: true, condensed: false, fixedColumns: true, fixedHeight: true, header: true, perPage: 12, items: 850, layout: { row1: "{placeholder:2:end}{settings:1:end}", row2: "{actions:1:start}{placeholder:1}{search:1:end}" }, data: { headings: [ "Name", "Company", "Ext.", "Start Date", "Email", "Phone No.", "Link" ], columns: [ // Sort the second column in ascending order // and make it fixed at that position. // sort on multiple selects , select[1,2], does not work { select: 0, sort: "asc", fixed: true }, // Set multiple selects to hidden { select: [1,2], hidden: true, fixed: true }, // Set the third column as date string matching the format "MM/DD/YYY" and sortable { select: 3, type: "date", format: "MM/DD/YYYY", sortable: true } ], rows: [ { data: [ "Hedwig F. Nguyen", "Arcu Vel Foundation", "9875", "03/27/2017", "nunc.ullamcorper@metusvitae.com", "070 8206 9605", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, { data: [ "Genevieve U. Watts", "Eget Incorporated", "9557", "07/18/2017", "Nullam.vitae@egestas.edu", "0800 025698", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Genevieve U. Watts details" }, ... ] } }; [].forEach.call(document.querySelectorAll("[data-table=\"dds__table\"]"), function (element) { new UIC.Table(element,options); });
</script> -->

var options = { search: true, actions: true, settings: true, print: true, sort: true, expand: true, condensed: false, fixedColumns: true, fixedHeight: true, header: true, perPage: 12, items: 850, layout: { row1: "{placeholder:2:end}{settings:1:end}", row2: "{actions:1:start}{placeholder:1}{search:1:end}" }, data: { headings: [ "Name", "Company", "Ext.", "Start Date", "Email", "Phone No.", "Link" ], columns: [ // Sort the second column in ascending order // and make it fixed at that position. // sort on multiple selects , select[1,2], does not work { select: 0, sort: "asc", fixed: true }, // Set multiple selects to hidden { select: [1,2], hidden: true, fixed: true }, // Set the third column as date string matching the format "MM/DD/YYY" and sortable { select: 3, type: "date", format: "MM/DD/YYYY", sortable: true } ], rows: [ { data: [ "Hedwig F. Nguyen", "Arcu Vel Foundation", "9875", "03/27/2017", "nunc.ullamcorper@metusvitae.com", "070 8206 9605", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, { data: [ "Genevieve U. Watts", "Eget Incorporated", "9557", "07/18/2017", "Nullam.vitae@egestas.edu", "0800 025698", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Genevieve U. Watts details" }, ... ] } }; [].forEach.call(document.querySelectorAll("[data-table=\"dds__table\"]"), function (element) { new UIC.Table(element,options); });

Complex Table - Condensed

<table data-table="dds__table" class="dds__table dds__table-hover dds__table-cmplx dds__table-striped dds__condensed" data-table-data='{"showData":false,"search":true,"select":true,"settings":true,"sort":true,"expand":false,"fixedColumns":true, "rearrangeableColumns":true, "fixedHeight":false,"header":true,"perPageSelect":[10,20,40,80,100],"perPage":10,"data":{"headings":["Name","Company","Extension","Start Date","Email","Phone","Link"],"columns":[{"select":0,"sort":"asc","fixed":true},{"select":[1,2],"hidden":true,"fixed":true},{"select":3,"type":"date","format":"MM/DD/YYYY","sortable":true}],"rows":[{"data":["Hedwig F. Nguyen","Arcu Vel Foundation","9875","03/27/2017","nunc.ullamcorper@metusvitae.com","070 8206 9605","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"]},{"data":["Genevieve U. Watts","Eget Incorporated","9557","07/18/2017","Nullam.vitae@egestas.edu","0800 025698","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Genevieve U. Watts details"},{"data":["Kyra S. Baldwin","Lorem Vitae Limited","3854","04/14/2016","in@elita.org","0800 237 8846","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Kyra S. Baldwin details"},{"data":["Stephen V. Hill","Eget Mollis Institute","8820","03/03/2016","eu@vel.com","0800 682 4591","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Stephen V. Hill details"},{"data":["Vielka Q. Chapman","Velit Pellentesque Ultricies Institute","2307","06/25/2017","orci.Donec.nibh@mauriserateget.edu","0800 181 5795","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Vielka Q. Chapman details"},{"data":["Ocean W. Curtis","Eu Ltd","6868","08/24/2017","cursus.et@cursus.edu","(016977) 9585","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Ocean W. Curtis details"},{"data":["Kato F. Tucker","Vel Lectus Limited","4713","11/06/2017","Duis@Lorem.edu","070 0981 8503","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Kato F. Tucker details"},{"data":["Robin J. Wise","Curabitur Dictum PC","3285","02/09/2017","blandit@montesnascetur.edu","0800 259158","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Robin J. Wise details"},{"data":["Uriel H. Guerrero","Mauris Inc.","2294","02/11/2018","vitae@Innecorci.net","0500 948772","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Uriel H. Guerrero details"},{"data":["Yasir W. Benson","At Incorporated","3897","01/13/2017","ornare.elit.elit@atortor.edu","0391 916 3600","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"]},{"data":["Shafira U. French","Nisi Magna Incorporated","5116","07/23/2016","metus.In.nec@bibendum.ca","(018013) 26699","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Shafira U. French details"},{"data":["Casey E. Hood","Lorem Vitae Odio Consulting","7079","05/05/2017","justo.Praesent@sitamet.ca","0800 570796","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Casey E. Hood details"},{"data":["Caleb X. Finch","Elit Associates","3629","09/19/2016","condimentum@eleifend.com","056 1551 7431","<a href=&#39;//www.dell.com&#39;>Dell Home Page</a>"],"details":"Caleb X. Finch details"}]}}'> <caption class="dds__sr-only"> A Complex Tables <span>Table used to display User information</span> </caption>
</table>
<nav class="dds__pagination dds__pagination-justified-filter" data-toggle="dds__pagination" aria-label="pagination"></nav>

var options = { search: true, actions: true, settings: true, print: true, sort: true, expand: true, condensed: true, fixedColumns: true, fixedHeight: true, rearrangeableColumns: true, header: true, perPage: 12, items: 850, layout: { row1: "{placeholder:2:end}{settings:1:end}", row2: "{actions:1:start}{placeholder:1}{search:1:end}" }, data: { headings: [ "Name", "Company", "Ext.", "Start Date", "Email", "Phone No.", "Link" ], columns: [ // Sort the second column in ascending order // and make it fixed at that position. // sort on multiple selects , select[1,2], does not work { select: 0, sort: "asc", fixed: true }, // Set multiple selects to hidden { select: [1,2], hidden: true, fixed: true }, // Set the third column as date string matching the format "MM/DD/YYY" and sortable { select: 3, type: "date", format: "MM/DD/YYYY", sortable: true } ], rows: [ { data: [ "Hedwig F. Nguyen", "Arcu Vel Foundation", "9875", "03/27/2017", "nunc.ullamcorper@metusvitae.com", "070 8206 9605", "<a href='//www.dell.com'>Dell Home Page</a>" ] }, { data: [ "Genevieve U. Watts", "Eget Incorporated", "9557", "07/18/2017", "Nullam.vitae@egestas.edu", "0800 025698", "<a href='//www.dell.com'>Dell Home Page</a>" ], details: "Genevieve U. Watts details" }, ... ] } }; [].forEach.call(document.querySelectorAll("[data-table=\"dds__table\"]"), function (element) { new UIC.Table(element,options); });

No items found.

Heading

No items found.

Usage

A table is a page section containing data arranged in rows and columns.

Tables communicate relationships between content. They are used for:

Reference - To help users find relevant data for specific items.
Comparison - To help users compare the features of different items. Users should be able to compare features by scanning horizontally.
Choice - To help users understand their choices when they are presented with an array of options, typically through links and mini buttons.

Simple tables don't include sorting and filtering capability, while complex tables do.

Do not use tables for layout. Use CSS to define page structure.

Authors should prefer the use of the host language's semantics for table whenever possible, such as the HTML table element.

Rows contain cell or gridcell elements, and thus serve to organize the table or grid.

The table role is intended for tabular containers which are not interactive. If the tabular container maintains a selection state, provides its own two-dimensional navigation, or allows the user to rearrange or otherwise manipulate its contents or the display thereof, authors should use grid or treegrid instead.

Condensed Table

The condensed table is intended for internal applications and those in which users spend significant amounts of time handling large volumes of data.

Do's and Don'ts

Do.

Don't.

Do.

Don't.

Do.

Don't.

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:

Corresponding Action:

Add to Cart

Cancel

Save

Edit

Delete

Continue

Next/Previous

Submit

Select

View Details

Ok/Cancel

Learn More

Takes users to Cart page, with item added

Used for search buttons

Takes users back to entry point for a task

Used to save an item

Navigates users to change an item

Deletes an item on the page, usually with a verification step

Used as progression

Used as forward and backward navigation (Next is primary, Previous is secondary)

Used to submit a task or info

Used for choosing items in a task flow

Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout

Used instead of “Select” in cases of product details or within learn content

For use in modal verification steps when more specific CTAs will not fit due to space

Used to link users to more learning content or contextual help

Used within modal windows

Accessibility

Redlines

Basic Table with Zebra Stripes

‍

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

Please follow the best practices for static tables and the best practices for interactive grids from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for static tables and these recommendations for interactive grids from WAI-ARIA 1.1.

You may refer to this example of a static table, these examples of interactive data grids, and these examples of interactive layout grids from WAI-ARIA practices 1.1.

You may also refer to these tutorials for table concepts from Web Accessibility Tutorials.

You may also refer to this article about creating accessible data tables from WebAIM.