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

Install with NPM

You can install and manage Propeller Data Table using npm:



                      

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