File
Login or Register via GitHub
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"> <link href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css" rel="stylesheet"> <link href="https://cdn.datatables.net/buttons/3.2.2/css/buttons.dataTables.css" rel="stylesheet"> <link href="https://cdn.datatables.net/responsive/3.0.4/css/responsive.bootstrap5.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script> <script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.min.js"></script> <script src="https://cdn.datatables.net/buttons/3.2.2/js/dataTables.buttons.js"></script> <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.dataTables.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/3.2.2/js/buttons.html5.min.js"></script> <script src="https://cdn.datatables.net/responsive/3.0.4/js/dataTables.responsive.min.js" integrity="sha384-A6In5tKqlvPZKDpH+ei4A3A4TZrEsyvvN2Fe+oCB1IaQfGD5HNqDIxwjztNKSGDd" crossorigin="anonymous"></script> <script src="https://cdn.datatables.net/responsive/3.0.4/js/responsive.bootstrap5.js" integrity="sha384-hyp/YDWGBMFqg7pJuS+y+2VWJkwnOyX+oMN9fWcxINo2flqjC/SdNaHj8LIV4zKJ" crossorigin="anonymous"></script> <title>DataTables - JS Bin</title> </head> <body> <div class="content container"> <div class="card"> <div class="card-body"> <table id="projectTable" class="table nowrap"> <thead> <tr> <th width="15%" colspan="1" data-dt-order="disable"></th> <th width="15%" colspan="1" data-dt-order="disable"></th> <th colspan="10" class="text-center" data-dt-order="disable"> 2025 </th> <th colspan="10" class="text-center" data-dt-order="disable"> 2026 </th> <th colspan="10" class="text-center" data-dt-order="disable"> 2027 </th> <th colspan="2" data-dt-order="disable"> </th> </tr> <tr> <th colspan="1" data-dt-order="disable"></th> <th colspan="1" data-dt-order="disable"></th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q1</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q2</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q3</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q4</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Total</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q1</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q2</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q3</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q4</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Total</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q1</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q2</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q3</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Q4</th> <th colspan="2" data-dt-order="disable" style="text-align:center">Total</th> <th colspan="2" data-dt-order="disable"> Overall Total</th> </tr> <tr> <th width="15%" colspan="1">Status</th> <th width="20%" colspan="1">Project Name</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Forecast</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Forecast</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Forecast</th> <th>Target</th> <th data-dt-order="disable"></th> <th data-dt-order="disable"></th> </tr> </thead> <tbody> <tr> <td> <span class="badge bg-success circle-badge-success"></span> <span style="display:none;">On Track</span> </td> <td>Metamorphosis</td> <!-- Dynamic Yearly Data --> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> Growth </td> </tr> <tr> <td> <span class="badge bg-warning circle-badge-warning"></span> <span style="display:none;">At Risk</span> </td> <td>Ignite</td> <!-- Dynamic Yearly Data --> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> Growth </td> </tr> <tr> <td> <span class="badge bg-danger circle-badge-danger"></span> <span style="display:none;">Off Track</span> </td> <td>Phoenix</td> <!-- Dynamic Yearly Data --> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> Growth </td> </tr> <tr> <td> <span class="badge bg-success circle-badge-success"></span> <span style="display:none;">On Track</span> </td> <td>Elevate</td> <!-- Dynamic Yearly Data --> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> COGS </td> </tr> <tr> <td> <span class="badge bg-warning circle-badge-warning"></span> <span style="display:none;">At Risk</span> </td> <td>Evolve</td> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> COGS </td> </tr> <tr> <td> <span class="badge bg-danger circle-badge-danger"></span> <span style="display:none;">Off Track</span> </td> <td>Serve</td> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> COGS </td> </tr> <tr> <td> <span class="badge bg-success circle-badge-success"></span> <span style="display:none;">On Track</span> </td> <td>Zion</td> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> GBS </td> </tr> <tr> <td> <span class="badge bg-warning circle-badge-warning"></span> <span style="display:none;">At Risk</span> </td> <td>Triumph</td> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> GBS </td> </tr> <tr> <td> <span class="badge bg-danger circle-badge-danger"></span> <span style="display:none;">Off Track</span> </td> <td>Thrive</td> <!-- Dynamic Yearly Data --> <td>29.00</td> <td>27.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td>82.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>49.00</td> <td>47.00</td> <td>48.00</td> <td>55.00</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>97.00</td> <td>102.00</td> <td>271.00</td> <td> GBS </td> </tr> </tbody> </table> </div> </div></div> </body></html>body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff;}table { table-layout: fixed;}.circle-badge { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block; /* Ensure it's displayed inline */ background-color: #28a745; /* Use success color (green) */ } .circle-badge-info { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #2cbacc; /* Use success color (green) */ } .circle-badge-success { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #28a745; /* Use success color (green) */ } .circle-badge-warning { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #f58646; /* Use success color (green) */ } .circle-badge-danger { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #ef5350; /* Use success color (green) */ } var groupColumn = 33; $(document).ready(function () { var table = $('#projectTable').DataTable({ columnDefs: [ { visible: false, targets: [groupColumn] }, { width: "7.2rem", targets: 4 }, // Set fixed width for column 0 { width: "7.2rem", targets: 5 }, // Set fixed width for column 1 { width: "7.2rem", targets: 6 } // Set fixed width for column 2 ], layout: { topStart: { buttons: [ { extend: 'excelHtml5', className: 'excelButton' }, { extend: 'pageLength', className: 'pageButton' }, { text: 'Show All', action: function (e, dt, node, config) { table.columns([12, 13, 14, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 27, 28, 29]).visible(true, true); } } ] }, topEnd: { search: { placeholder: 'Type to filter...', text: '<span>Filter:</span> _INPUT_' }, }, bottomEnd: { paging: { buttons: 3 } } }, pageLength: 50, //responsive:true, responsive: { details: { renderer: function (api, rowIdx, columns) { let header1Cols = [12, 22]; // Quarters or year headers let header2Cols = [32]; // Target/Forecast columns let data = ''; columns.forEach((col) => { let index = col.columnIndex; let title = col.title; // Identify header1Cols to add a separator before them if (header1Cols.includes(index)) { // Add separator line before the header data += ` <tr> <td colspan="2" style="border-top: 2px solid #ccc;"></td> </tr> <tr> <td colspan="2" style="font-weight: bold;">${api.column(col.columnIndex).title(0)}</td> </tr>`; } else { // Use the default title if it's not in header1Cols if (header2Cols.includes(index)) { title = api.column(col.columnIndex).title(1); } } // Append data rows if (col.hidden) { data += ` <tr data-dt-row="${col.rowIndex}" data-dt-column="${col.columnIndex}"> <td>${title}:</td> <td>${col.data}</td> </tr>`; } }); // Create table element let table = document.createElement('table'); table.innerHTML = data; return data ? table : false; } } }, "order": [[groupColumn, "asc"]], language: { paginate: { 'next': $('html').attr('dir') == 'rtl' ? 'Next ←' : 'Next →', 'previous': $('html').attr('dir') == 'rtl' ? '→ Prev' : '← Prev' } }, "drawCallback": function (settings) { var api = this.api(); var rows = api.rows({ page: 'current' }).nodes(); var last = null; api.column(groupColumn, { page: 'current' }).data().each(function (group, i) { var rowData = api.row(api.row(rows).eq(i)).data(); if (last !== group) { $(rows).eq(i).before( '<tr class="group"><td colspan="100%" id="clmBusinessUnit" style="font-weight: bold;padding:4px!important;" class="row-group">' + group + '</td></tr>' ); last = group; } }); } }); table.columns([12, 13, 14, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 27, 28, 29]).visible(false, false); table.columns.adjust().draw(false); // adjust column sizing and redraw });
300px
You can jump to the latest bin by adding /latest to your URL
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + [ | Indents selected lines |
| ctrl + ] | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Clone Bin |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |