File
Login or Register via GitHub
<html> <head> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><link href="https://cdn.datatables.net/v/dt/dt-2.1.8/r-3.0.3/datatables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/v/dt/dt-2.1.8/r-3.0.3/datatables.min.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> </head> <body> <div class="container"> <table id="main-table" class="table datatable-responsive" width="100%"> <thead> <tr> <th> Business Unit </th> <th> Project Name </th> <th> Overall Status </th> <th> Scope Status </th> <th> Timeline Status </th> <th> Budget Status </th> <th> Phase </th> <th> Business Sponsor </th> <th> Proj Lead </th> <th> Delivery Lead </th> <th> IT Capabilities </th> <th> Capex </th> <th> Last Update </th> <th> Completion Date </th> <th> </th> </tr> <tr> <td> Sustainable & 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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></td> </tr> <tr> <td> Sustainable & 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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></td> </tr> <tr> <td> Sustainable & 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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></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> <td>Support Digital Brand</td> <td>Yes</td> <td>12/12/2023</td> <td>12/12/2023</td> <td><a href="#"><i class="icon-pencil5 mr-3"></i></a></td> </tr></thead> </table> </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;} var groupColumn = 0; $(document).ready(function () { //Generate filter inputs and apply filter. var table = $('#main-table').DataTable({ responsive: { details: { display: DataTable.Responsive.display.modal({ header: function (row) { var data = row.data(); return 'Details for ' + data[1] + ' ' + data[2]; } }), renderer: DataTable.Responsive.renderer.tableAll() } }, 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' ] }, "order": [[groupColumn, "asc"]], "oLanguage": { "sEmptyTable": "No data available." } }); });
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. | |