# Data table

Data table 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 appear in desktop enterprise products.

We have used Bootstrap Data table as a reference which we have then customized based on our Propeller theme.

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 `.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. | E-mail
--- | --- | --- | --- | --- | --- | --- | --- | ---
| 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