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