File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  
 <link href="https://itpmo.mativ.com/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!--<link href="https://itpmo.mativ.com/assets/css/all.min.css" rel="stylesheet">-->
  
  
   <script src="https://itpmo.mativ.com/assets/js/jquery-ui.js"></script>    
   <script src="https://itpmo.mativ.com/global_assets/js/main/bootstrap.bundle.min.js"></script>    
​
<link href="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.11/b-2.4.2/b-html5-2.4.2/r-2.5.0/rg-1.5.0/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-1.13.11/b-2.4.2/b-html5-2.4.2/r-2.5.0/rg-1.5.0/datatables.min.js"></script>
  
  
  <!--<script src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/datatables.min.js"></script>  
  <script src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/responsive.min.js"></script>
  -->
  <!--<script src="https://itpmo.mativ.com/global_assets/js/demo_pages/datatables_responsive.js"></script>  -->
  
  <!--
  <script src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/buttons.min.js"></script>    
  <script src="https://itpmo.mativ.com/global_assets/js/demo_pages/datatables_extension_buttons_html5.js"></script> 
  -->
  
    <script src="https://itpmo.mativ.com/global_assets/js/plugins/ui/moment/moment.min.js"></script>  
  <script src="https://itpmo.mativ.com/global_assets/js/plugins/pickers/daterangepicker.js"></script>    
  
  <!--
  <script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>
-->
  
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
  <body>
      <div class="row">
      <div class="col-lg-12">
          <div class="card">
              <div class="card-body">
                  <div class="table-responsive">
                     <div class="container">
      <table id="main-table" class="table datatable-responsive" width="100%">
        <thead>
    <tr>
        <th>
    IT Project Portfolio
</th>
​
<th>
    Overall Status
</th>
<th>
    Project Name
</th>
<th>
    Delivery Lead
</th>
<th>
    IT Project Manager
</th>
<th>
    Scope Status
</th>
<th>
    Timeline Status
</th>
<th>
    Budget Status
</th>
<th>
    Target Go-Live
</th>
<th>
    Phase
</th>
​
        
      
    </tr>
        </thead>
        <tbody>
    <tr>
                <td> Sustainable &amp; Adhesive Solutions</td>
                <td>Nixon</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
               
               
            </tr>
              <tr>
                <td> Sustainable &amp; Adhesive Solutions</td>
                <td>Garrett</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
               
            </tr>
           <tr>
                <td> Sustainable &amp; Adhesive Solutions</td>
                <td>Ashton</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
               
              
            </tr>
          <tr>
                <td>Supply Chain + Operations</td>
                <td>Ashton</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
            </tr>
          <tr>
                <td>Supply Chain + Operations</td>
                <td>Cedric</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
             
            </tr>
           <tr>
                <td>Finance</td>
                <td>Cedric</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
              
            </tr>
          <tr>
                <td>Finance</td>
                <td>Airi</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
               
            </tr>
          <tr>
                <td>IT Internal</td>
                <td>Brielle</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
               
               
                
            </tr>
        </tbody>
​
      </table>
    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
   
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
​
JavaScriptSaved
 
​
  
  var groupColumn = 0;
   $(document).ready(function () {
     
     
     
       //Generate filter inputs and apply filter.
       var table = $('#main-table').DataTable({
           destroy:true,
       columnDefs: [
    {
        className: 'control',
        orderable: false,
        target: 1
    },
    {
​
        target: 5, width: '12%'
    },
    {
​
        target: 6, width: '12%'
    },
    {
​
        target: 7, width: '5%'
    }
],
 responsive: {
     details: {
         type: 'column',
         target: 1
     }
 },
        
           orderCellsTop: true,
           fixedHeader: true,
           pageLength: 50,
           dom: 'Bfrtip',
           rowsGroup: [
               0,
           ],
           buttons: {
               dom: {
                   button: {
                       className: 'dt-button button-page-length btn btn-secondary'
                   }
               },
               buttons: [
                   {
​
                       extend: 'excelHtml5',
                       className: 'btn btn-secondary',
                       exportOptions: {
                           columns: [14, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                       },
                       title: "",
                       filename: "All Projects List"
                   },
                   'pageLength'
               ]
           },
           
           
           "oLanguage": {
               "sEmptyTable": "No data available."
           },
         initComplete: function () {
           
               
               
        
         }
         
       });
​
     
   });
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers