Data list view provides a better way to manage your data and filter it.

To create a data list view you'll have to initialize your table with data table and add required css/js files

use class .data-list-view / .data-thumb-view with your table create a data list/thumb view. The drodpown button in data view is manually created in html and is added to header section of the data list view. Functionality for add new button is also manually created dataTables plugin doesn't provide this functionality.

1. Required Files

            
                <!-- Vendor JS -->
                <script src='datatables.min.js'></script>
                <script src='datatables.buttons.min.js'></script>
                <script src='datatables.bootstrap4.min.js'></script>
                <script src='buttons.bootstrap.min.js'></script>
                <script src='datatables.checkboxes.min.js'></script>

                <!-- Page Specific JS -->
                <script src='data-list-view.js'></script>

                <!-- Vendor CSS -->
                <link href="datatables.min.css" rel="stylesheet">
                <link href="dataTables.checkboxes.css" rel="stylesheet">

                <!-- Page Specific CSS -->
                <link href="data-list-view.css" rel="stylesheet">
            
      

2. Add your table in your html

        
    <table class="table data-list-view">
      <thead>
      ...
      </thead>
      <tbody>
      ...
      </tbody>
    </table>
        
      

3. initialize your table with data table

        
        var dataListView = $('.data-list-view').DataTable({
          ...
        })
        
      

Actions you can perform with Data View

1. Maintain your valuable data.
2. Search for specific item from your data.
3. Sort your data.
4. Change length of visible data.
5. Pagination
6. Add new data
7. Peform diffrent actions like delete, archive, print etc

Type	URL
Plugin Link	https://www.datatables.net/
Github Page	https://github.com/DataTables/DataTables
Template Page List View	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/data-list-view.html
Template Page Thumb View	https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/data-thumb-view.html