Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically.
DataTables example
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function.
Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this example.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Name | Position | Office | Age | Start date | Salary |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
DataTables Row grouping
Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.
| Name | Position | Age | Start date | Salary |
|---|---|---|---|---|
| Name | Position | Age | Start date | Salary |
| Edinburgh | ||||
| Tiger Nixon | System Architect | 61 | 2011/04/25 | $320,800 |
| Cedric Kelly | Senior Javascript Developer | 22 | 2012/03/29 | $433,060 |
| Sonya Frost | Software Engineer | 23 | 2008/12/13 | $103,600 |
| Quinn Flynn | Support Lead | 22 | 2013/03/03 | $342,000 |
| Dai Rios | Personnel Lead | 35 | 2012/09/26 | $217,500 |
| Gavin Joyce | Developer | 42 | 2010/12/22 | $92,575 |
| Martena Mccray | Post-Sales support | 46 | 2011/03/09 | $324,050 |
| Jennifer Acosta | Junior Javascript Developer | 43 | 2013/02/01 | $75,650 |
| Shad Decker | Regional Director | 51 | 2008/11/13 | $183,000 |
| London | ||||
| Jena Gaines | Office Manager | 30 | 2008/12/19 | $90,560 |
| Haley Kennedy | Senior Marketing Designer | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | 66 | 2012/11/27 | $198,500 |
| Bradley Greer | Software Engineer | 41 | 2012/10/13 | $132,000 |
| Angelica Ramos | Chief Executive Officer (CEO) | 47 | 2009/10/09 | $1,200,000 |
| Suki Burks | Developer | 53 | 2009/10/22 | $114,500 |
| Prescott Bartlett | Technical Author | 27 | 2011/05/07 | $145,000 |
| Timothy Mooney | Office Manager | 37 | 2008/12/11 | $136,200 |
| Bruno Nash | Software Engineer | 38 | 2011/05/03 | $163,500 |
| Hermione Butler | Regional Director | 47 | 2011/03/21 | $356,250 |
| Lael Greer | Systems Administrator | 21 | 2009/02/27 | $103,500 |
| New York | ||||
| Brielle Williamson | Integration Specialist | 61 | 2012/12/02 | $372,000 |
| Paul Byrd | Chief Financial Officer (CFO) | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | 59 | 2009/04/10 | $237,500 |
| Jenette Caldwell | Development Lead | 30 | 2011/09/03 | $345,000 |