Data tables refers to a matrix of information, like an excel spreadsheet with columns, rows, and data. It is used to present raw data sets, and usually appears in desktop enterprise products. We have used Bootstrap Data table as base and customized it by applying material design principles to it.
For more options and documentation, visit: Data table
Propeller Data table
In its simplest form, a data table contains a top row of column names, and rows for data. Checkboxes should accompany each row if the user needs to select or manipulate data.
| First name | Last name | Position | Office | Age | Start date | |
|---|---|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | |
| Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | |
| Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | |
| Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | |
| Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | |
| Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 |
Responsive Data table
Some table cards may require headers with actions instead of titles. Two possible approaches to this are to display persistent actions, or a contextual header that activates when items are selected. Create basic table with responsive by simply adding .responsive class in your code.
| First name | Last name | Position | Office | Age | Start date | Salary | Extn. |
|---|---|---|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
| Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 |
| Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 |
| Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 |
Inverse Table
Create Inverse Table by adding .table-inverse class in your code.
| First name | Position | Office | Age | Start date | Salary | Extn. | ||
|---|---|---|---|---|---|---|---|---|
| Tiger | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 | t.nixon@datatables.net | |
| Garrett | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net | |
| Ashton | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net | |
| Cedric | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net | |
| Airi | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net | |
| Brielle | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net | |
| Herrod | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net | |
| Airi | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net | |
| Brielle | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net | |
| Herrod | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net | |
| Airi | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net | |
| Brielle | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net | |
| Herrod | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net | |
| Airi | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net | |
| Brielle | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net | |
| Herrod | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net | |
| Airi | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net | |
| Brielle | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net | |
| Herrod | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |