File
Login or Register via GitHub
<html> <head> <link href="https://itpmo.mativ.com/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet"> <link href="https://itpmo.mativ.com/css/site.css?v=BhbSgZMvk8mcoSVV9PwVxn4lkY6lSeCCaTLCt4-KEmE" rel="stylesheet"> <link href="https://itpmo.mativ.com/assets/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"> <link href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.bootstrap-v4.min.css" rel="stylesheet"> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/main/jquery.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/main/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/assets/js/jquery-ui.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/js/toastr.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/loaders/blockui.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/assets/js/app.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/datatables.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/responsive.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/demo_pages/datatables_responsive.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/pdfmake/vfs_fonts.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/tables/datatables/extensions/buttons.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/demo_pages/datatables_extension_buttons_html5.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/ui/moment/moment.min.js"></script> <script type="text/javascript" src="https://itpmo.mativ.com/global_assets/js/plugins/pickers/daterangepicker.js"></script> <script type="text/javascript" src="https://js.monitor.azure.com/scripts/b/ai.2.min.js"></script> <title>DataTables - JS Bin</title> </head> <body> <!-- Main navbar --> <div class="navbar navbar-expand-xl navbar-light navbar-static px-0"> <div class="d-flex flex-1 pl-3"> <div class="navbar-brand wmin-0 mr-1"> <a href="/" class="d-inline-block" rel="home" aria-current="page"> <img style="height:30px;" src="/global_assets/images/mativ-color.svg" class="d-none d-sm-block" alt="Mativ™" decoding="async"> </a> </div> </div> <div class="d-flex flex-xl-1 justify-content-xl-end order-0 order-xl-1 pr-3"> <ul class="navbar-nav flex-row order-1 order-lg-2 flex-1 flex-lg-0 justify-content-end align-items-center"> <li class="nav-item nav-item-dropdown-lg dropdown"> <a href="#" class="navbar-nav-link navbar-nav-link-toggler" title="Admin Section" data-toggle="dropdown"> <i class="icon-user-lock"></i> </a> <div class="dropdown-menu dropdown-scrollable-xl"> <div class="dropdown-content-header"> <span class="font-weight-semibold" title="comments">Admin</span> <a href="#" class="text-body"><i class="icon-lock"></i></a> </div> <a class="dropdown-item rounded" href="/Admin/Dropdowns"><i class="icon-menu7"></i>Manage Dropdown Lists</a> <a href="/Admin" class="dropdown-item rounded"><i class="icon-accessibility"></i>Manage Site Admins</a> <div class="dropdown-divider"></div> <a href="/Admin/Dashboard" class="dropdown-item rounded"><i class="icon-chart"></i>Site Analytics</a> <div class="dropdown-divider"></div> <a class="dropdown-item rounded" href="/Admin/MassImport/MassImport"><i class="icon-upload4"></i>Mass Import</a> </div> </li> <li class="nav-item nav-item-dropdown-lg dropdown"> <a href="#" class="navbar-nav-link navbar-nav-link-toggler" title="View/Add Comments" data-toggle="dropdown"> <i class="icon-bubbles4"></i> </a> <div class="dropdown p-0 mr-3"> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-content-header"> <span class="font-weight-semibold" title="comments">Comments</span> <a href="#" class="text-body"><i class="icon-compose"></i></a> </div> <a href="#" class="dropdown-item btn-modal" data-toggle="ajax-modal" data-url="" id="addCommentslink"> <i class="icon-database-add mr-2"></i> <span> Add Comments </span> </a> <a href="#" class="dropdown-item btn-modal" data-toggle="ajax-modal" data-url="" id="viewcommentsLink"> <i class="icon-comments mr-2"></i> <span> View Comments </span> </a> </div> </div> </li> <li class="nav-item nav-item-dropdown-lg dropdown"> <a class="navbar-nav-link navbar-nav-link-toggler" title="Add/Edit Project" href="/Projects/Update"> <i class="icon-pencil5"></i> </a> </li> <li class="nav-item nav-item-dropdown-lg dropdown"> <a href="#" title="View Projects" class="navbar-nav-link navbar-nav-link-toggler" data-toggle="dropdown"> <i class="icon-eye8"></i> </a> <div class="dropdown p-0 mr-3"> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" title="Active Projects Summary" href="/Projects/ActiveProjects"> <i class="icon-statistics mr-2"></i> <span> View Active </span> </a> <a class="dropdown-item" title="Project Summary" href="/Projects/Completed"> <i class="icon-statistics mr-2"></i> <span> View Complete </span> </a> <div class="dropdown-divider"></div> <a class="dropdown-item" title="All Projects Summary" href="/Projects/AllProjects"> <i class="icon-statistics mr-2"></i> <span> View All </span> </a> </div> </div> </li> <li class="nav-item nav-item-dropdown-xl dropdown dropdown-user h-100"> <a href="#" class="navbar-nav-link navbar-nav-link-toggler d-flex align-items-center h-100" data-toggle="dropdown"> <img src="/global_assets/images/avatar.png" class="rounded-circle mr-xl-2" height="38" alt=""> <span class="d-none d-xl-block">Sankett Vyas</span> </a> </li> </ul> </div> </div> <!-- /main navbar --> <!-- Page content --> <div class="page-content"> <!-- Main content --> <div class="content-wrapper"> <!-- Inner content --> <div class="content-inner"> <!-- Page header --><div class="page-header page-header-light sticky-top"> <div class="breadcrumb-line breadcrumb-line-light header-elements-lg-inline"> <div class="d-flex"> <div class="breadcrumb"> <a class="breadcrumb-item" href="/"><i class="icon-home2 mr-2"></i> Home</a> <span class="breadcrumb-item active">View All</span> </div> <a class="header-elements-toggle text-body d-lg-none" href="/"><i class="icon-more"></i></a> </div> </div></div><!-- /page header --><!-- Content area --><div class="content container pt-0"> <div class="row mt-5"> <div class="col-lg-2"> <div class="card bg-success text-white"> <div class="card-body"> <div class="d-flex align-items-center justify-content-sm-center mb-2"> <h2 class="font-weight-semibold mb-0"> On Target </h2> </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> <h1 class="font-weight-semibold mb-0" style="font-size:5vw;">9</h1> </div> </div> </div> </div> <div class="col-lg-2"> <div class="card centreboxwarning text-white"> <div class="card-body"> <div class="d-flex align-items-center justify-content-sm-center mb-2"> <h2 class="font-weight-semibold mb-0"> At Risk </h2> </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> <h1 class="font-weight-semibold mb-0" style="font-size:5vw;">3</h1> </div> </div> </div> </div> <div class="col-lg-2"> <div class="card centreboxdanger text-white"> <div class="card-body"> <div class="d-flex align-items-center justify-content-sm-center mb-2"> <h2 class="font-weight-semibold mb-0"> Overdue </h2> </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> <h1 class="font-weight-semibold mb-0" style="font-size:5vw;">0</h1> </div> </div> </div> </div> <div class="col-lg-2"> <div class="row "> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center justify-content-sm-center "> <span class="font-weight-semibold mb-0"> 13 High Risks </span> </div> </div> </div> </div> <div class="row"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center justify-content-sm-center"> <span class="font-weight-semibold mb-0"> 4 Moderate Risks </span> </div> </div> </div> </div> <div class="row"> <div class="card"> <div class="card-body"> <div class="d-flex align-items-center justify-content-sm-center"> <span class="font-weight-semibold"> 5 Low Risks </span> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="card bg-gray text-white"> <div class="card-body"> <div class="d-flex font-weight-semibold mb-0 align-items-center justify-content-sm-center"> Ideation </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> 0 </div> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="card bg-gray text-white"> <div class="card-body"> <div class="d-flex font-weight-semibold mb-0 align-items-center justify-content-sm-center"> Initiation </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> 1 </div> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="card bg-gray text-white"> <div class="card-body"> <div class="d-flex font-weight-semibold mb-0 align-items-center justify-content-sm-center"> Planning </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> 1 </div> </div> </div> </div> </div> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="card bg-gray text-white"> <div class="card-body"> <div class="d-flex font-weight-semibold mb-0 align-items-center justify-content-sm-center"> Execution </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> 10 </div> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="card bg-gray text-white"> <div class="card-body"> <div class="d-flex font-weight-semibold mb-0 align-items-center justify-content-sm-center"> Closed </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> 1 </div> </div> </div> </div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> <div class="card bg-gray text-white"> <div class="card-body"> <div class="d-flex font-weight-semibold mb-0 align-items-center justify-content-sm-center"> Cancelled </div> <div class="d-flex align-items-center justify-content-sm-center mb-0"> 1 </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg"> <div class="card"> <div class="card-body"> <div class="d-flex mb-2"> <span class="font-weight-semibold mb-0"> Current Business Unit Selection: </span> </div> <div class="d-flex mb-2"> <ul> <li> All </li> </ul> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-body"> <div class="table-responsive"> <table id="main-table" class="table datatable-responsive"> <thead> <tr> <th> Business Unit </th> <th> Project Name </th> <th> Status </th> <th> Phase </th> <th> Completion Date </th> <th> IT Capabilities </th> <th> Business Sponsor </th> <th> # of Risks </th> <th> Capex </th> <th> Proj Lead </th> <th> Last Update </th> </tr> </thead> <tbody> <tr> <td> Corp Project </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EfuLKx3TJoZGkVngcYtUqK0BAKhsxaYyzmJHczEjiZLkAw?e=W4MHf8" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(3, 'Mativ Domain Migration 2023')">Mativ Domain Migration 2023</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Cancelled </td> <td> 10/20/2023 </td> <td> Deliver Data & Analytics , Standardize Infrastructure </td> <td> Shebnem Harris </td> <td> 0 </td> <td> No </td> <td> Raj Gangaram </td> <td> 12/13/2023 </td> </tr> <tr> <td> Corp Project </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EfZvsDzv8tNNoDmwhX0m_FgBV3ulB0s3FY1IrVxflcWrHw?e=OpnzOb" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(4, 'Support Improvement Plan 2023')">Support Improvement Plan 2023</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 10/16/2023 </td> <td> Improve Site Support </td> <td> </td> <td> 0 </td> <td> No </td> <td> Creighton Kelly </td> <td> 09/08/2023 </td> </tr> <tr> <td> Corp Project </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EcBbn2zWtGpGrjWduwN7avEBQMJhzVxkQn-iqW06zy7Ylw?e=IVg25B" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(5, 'Network and Infrastructure Hardware Refresh 2023')">Network and Infrastructure Hardware Refresh 2023</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 12/07/2023 </td> <td> Standardize Infrastructure </td> <td> </td> <td> 1 </td> <td> No </td> <td> Michael McKay </td> <td> 09/06/2023 </td> </tr> <tr> <td> Corp Project </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EW4Q8ODDrtRFhDJywn0Uvd4BQMbACR1wGqa4nHHJ88S2iQ?e=n8CCaA" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(7, 'Digital IT PMO Phase 3')">Digital IT PMO Phase 3</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 10/10/2023 </td> <td> Build Partnerships, Project Governance </td> <td> Rajeev Kapur </td> <td> 3 </td> <td> No </td> <td> Shebnem Harris </td> <td> 09/15/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EW4Q8ODDrtRFhDJywn0Uvd4BQMbACR1wGqa4nHHJ88S2iQ?e=n8CCaA" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(7, 'Digital IT PMO Phase 3')">Digital IT PMO Phase 3</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 10/10/2023 </td> <td> Build Partnerships, Project Governance </td> <td> Rajeev Kapur </td> <td> 3 </td> <td> No </td> <td> Shebnem Harris </td> <td> 09/15/2023 </td> </tr> <tr> <td> Release Liners </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EQyQGmsJEchPn4XRtSeAhqEBSCU7A8nabSXE7ViE8My41w?e=ZGZXuM" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(8, 'ITASA LN ERP Harmonization 2023')">ITASA LN ERP Harmonization 2023</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Simplify Business Apps </td> <td> </td> <td> 0 </td> <td> No </td> <td> Ivan Valdemoros </td> <td> 09/01/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EUFXt84vO3tFu9dUYnj_5XABh_xBQ1tCBra5eLQ_lUEwMA?e=Y6teEK" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(9, 'Sales BI 2023')">Sales BI 2023</a> </td> <td> <span class="badge badge-warning">At Risk </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Deliver Data & Analytics </td> <td> </td> <td> 2 </td> <td> No </td> <td> Keith Hopkins </td> <td> 08/31/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EUOBcD3396NBpGBAapS4aj8B1MDVhk7B4JNFtV0IkLpdMg?e=21l6qj" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(10, 'SAP India Rollout 2023')">SAP India Rollout 2023</a> </td> <td> <span class="badge badge-warning">At Risk </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Simplify Business Apps </td> <td> </td> <td> 2 </td> <td> No </td> <td> Arabinda Chakraborty </td> <td> 09/01/2023 </td> </tr> <tr> <td> Corp Project </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/Eel2fQXt_41BvEUemC2K024BW6QInkcFHCJooEMV4AMufg?e=tI1OeV" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(11, 'Supply Chain BI 2023')">Supply Chain BI 2023</a> <span class="text-primary" data-popup="popover" title="" data-content="test project summary" data-original-title="Project Summary" aria-describedby="popover462764"> <i class="icon-help mr-2"></i> </span> </td> <td> <span class="badge badge-warning">At Risk </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Deliver Data & Analytics , Modernize Cloud Apps, Standardize Infrastructure </td> <td> Shebnem Harris </td> <td> 1 </td> <td> No </td> <td> Keith Hopkins </td> <td> 12/15/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/Eel2fQXt_41BvEUemC2K024BW6QInkcFHCJooEMV4AMufg?e=tI1OeV" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(11, 'Supply Chain BI 2023')">Supply Chain BI 2023</a> <span class="text-primary" data-popup="popover" title="" data-content="test project summary" data-original-title="Project Summary" aria-describedby="popover462764"> <i class="icon-help mr-2"></i> </span> </td> <td> <span class="badge badge-warning">At Risk </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Deliver Data & Analytics , Modernize Cloud Apps, Standardize Infrastructure </td> <td> Shebnem Harris </td> <td> 1 </td> <td> No </td> <td> Keith Hopkins </td> <td> 12/15/2023 </td> </tr> <tr> <td> Packaging and Specialty Paper </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/Eel2fQXt_41BvEUemC2K024BW6QInkcFHCJooEMV4AMufg?e=tI1OeV" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(11, 'Supply Chain BI 2023')">Supply Chain BI 2023</a> <span class="text-primary" data-popup="popover" title="" data-content="test project summary" data-original-title="Project Summary" aria-describedby="popover462764"> <i class="icon-help mr-2"></i> </span> </td> <td> <span class="badge badge-warning">At Risk </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Deliver Data & Analytics , Modernize Cloud Apps, Standardize Infrastructure </td> <td> Shebnem Harris </td> <td> 1 </td> <td> No </td> <td> Keith Hopkins </td> <td> 12/15/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/r/sites/ITProjectUpdates/_layouts/15/Doc.aspx?sourcedoc=%7BE987AE7B-2C37-41C9-B634-3831F056D600%7D&file=PRO001235%20Special%20Price%20Request.pptx&action=edit&mobileredirect=true" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(12, 'PRO001235 - Special Price Request')">PRO001235 - Special Price Request</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Simplify Business Apps, Manage Financials </td> <td> Marc Fournier </td> <td> 1 </td> <td> Yes </td> <td> Shebnem Harris </td> <td> 09/21/2023 </td> </tr> <tr> <td> Healthcare & Wellness </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EcYJpKQLWedMgBKLcx_wDfcB2WlvXhWWdRL4kVCp5UgH7w?e=vqywEm" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(13, 'Complaint System - External Supplier Site Upgrade')">Complaint System - External Supplier Site Upgrade</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Simplify Business Apps </td> <td> Isam Brahim </td> <td> 2 </td> <td> No </td> <td> Shebnem Harris </td> <td> 12/13/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EcYJpKQLWedMgBKLcx_wDfcB2WlvXhWWdRL4kVCp5UgH7w?e=vqywEm" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(13, 'Complaint System - External Supplier Site Upgrade')">Complaint System - External Supplier Site Upgrade</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 09/29/2023 </td> <td> Simplify Business Apps </td> <td> Isam Brahim </td> <td> 2 </td> <td> No </td> <td> Shebnem Harris </td> <td> 12/13/2023 </td> </tr> <tr> <td> Industrials </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EW4Q8ODDrtRFhDJywn0Uvd4BQMbACR1wGqa4nHHJ88S2iQ?e=n8CCaA" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(14, 'Product Database Refresh')">Product Database Refresh</a> <span class="text-primary" data-popup="popover" title="" data-content="Change is for adding Italian to technical data sheets and product details" data-original-title="Project Summary" aria-describedby="popover462764"> <i class="icon-help mr-2"></i> </span> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Planning </td> <td> 10/06/2023 </td> <td> Modernize Cloud Apps </td> <td> Damien Cadour </td> <td> 2 </td> <td> Yes </td> <td> Shebnem Harris </td> <td> 09/26/2023 </td> </tr> <tr> <td> Corp Project </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EaJHjvY6GwhEmwARCEF_k9sBoaa_zUeHQ9M-gzmtmJnvGg?e=0c2nrU" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(16, 'Cybersecurity')">Cybersecurity</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Closeout/Complete </td> <td> 04/28/2023 </td> <td> Evolve Cybersecurity </td> <td> </td> <td> 5 </td> <td> No </td> <td> Robert Andriulli </td> <td> 10/01/2023 </td> </tr> <tr> <td> Information Technology </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EW4Q8ODDrtRFhDJywn0Uvd4BQMbACR1wGqa4nHHJ88S2iQ?e=n8CCaA" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(18, 'ENH001215 - GNPD Enhancements')">ENH001215 - GNPD Enhancements</a> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Initiation </td> <td> 12/31/2023 </td> <td> Modernize Cloud Apps </td> <td> Martin Saville </td> <td> 0 </td> <td> No </td> <td> Shebnem Harris </td> <td> 11/06/2023 </td> </tr> <tr> <td> Packaging and Specialty Paper </td> <td style="width:15%;"> <a href="https://mativglobal.sharepoint.com/:p:/s/ITProjectUpdates/EW4Q8ODDrtRFhDJywn0Uvd4BQMbACR1wGqa4nHHJ88S2iQ?e=n8CCaA" target="_blank" style="text-decoration: underline;" onclick="ProjectClick(19, 'Shebnem Test')">Shebnem Test</a> <span class="text-primary" data-popup="popover" title="" data-content="This is a test project" data-original-title="Project Summary" aria-describedby="popover462764"> <i class="icon-help mr-2"></i> </span> </td> <td> <span class="badge badge-success">On Target </span> </td> <td> Execution </td> <td> 12/29/2023 </td> <td> Support Digital Brand, Standardize Infrastructure </td> <td> Carrie Rose </td> <td> 3 </td> <td> Yes </td> <td> Shebnem Harris </td> <td> 12/13/2023 </td> </tr> </tbody> </table> </div> </div> </div> </div> </div></div><!-- /content area --><style> table.dataTable thead tr th { word-wrap: break-word; word-break: break-all; }</style> </div> <!-- /inner content --> </div> <!-- /main content --> </div> <!-- /page content --> <div id="modal-placeholder"></div> <!-- Footer --> <div class="navbar navbar-expand-lg navbar-light border-bottom-0 border-top"> <div class="text-center d-lg-none w-100"> <button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer"> <i class="icon-unfold mr-2"></i> Footer </button> </div> <div class="navbar-collapse collapse" id="navbar-footer"> <span class="navbar-text"> 2023 © Mativ IT </span> </div> </div> <!-- /footer --> </html>body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff;} .group { background: gray; color: white; } .card-deck { display: flex; flex-wrap: wrap; align-items: stretch; } .card { flex: 1 0 auto; } .thContent { text-align: center; vertical-align: text-bottom; } .ui-datepicker-trigger { position: absolute; top: 15px; left: 130px; z-index: 4; padding: 6px; cursor: pointer; } .date-icon { position: absolute; top: 22px; right: 0px; cursor: pointer; color: #aaa; } .isDisabled { color: currentColor; cursor: default; opacity: 0.5; text-decoration: none; pointer-events: none; } button.btn.btn-secondary.buttons-excel.buttons-html5 { /*margin-right: 15px !important;*/ } .dataTables_filter { float: right !important; margin: 1.5rem 1.5rem 1.25rem 1.25rem !important } .dt-buttons { float: left !important; margin: 1.5rem 0 1.25rem 1.25rem !important } .navbar.navbar-expand-lg.navbar-light.border-bottom-0.border-top { position: fixed !important; bottom: 0 !important; width: 100% !important; } div#datatable-buttons_info { padding: 15px; } div#datatable-buttons_filter { padding: 10px; } table.dataTable thead tr th { word-wrap: break-word; word-break: break-all; } .filterCheckbox { position: relative !important; margin-left: 0px !important; width: 20px; height: 1.5em; margin-bottom: 15px; }thead input { width: 100%; }table.dataTable thead tr th { word-wrap: break-word; word-break: break-all; } var groupColumn = 0; $(document).ready(function () { // Setup clone - header filter $('#main-table thead tr') .clone(true) .addClass('filters') .appendTo('#main-table thead'); //Generate filter inputs and apply filter. var table = $('#main-table').DataTable({ columnDefs: [{ visible: false, targets: groupColumn }, { width: '10%', targets: 5 }], destroy: true, orderCellsTop: true, fixedHeader: true, pageLength: 50, dom: 'Bfrtip', buttons: { dom: { button: { className: 'dt-button button-page-length btn btn-secondary' } }, buttons: [ { extend: 'excelHtml5', className: 'btn btn-secondary', exportOptions: { columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, title: "", filename: "All Projects List" }, 'pageLength' ] }, "order": [[groupColumn, "asc"]], "oLanguage": { "sEmptyTable": "No data available." }, "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) { if (last !== group) { $(rows).eq(i).before( '<tr class="group"><td colspan="11" style="font-weight: bold;">' + group + '</td></tr>' ); last = group; } }); }, initComplete: function () { var api = this.api(); // For each column api .columns() .eq(0) .each(function (colIdx) { // Set the header cell to contain the input element var cell = $('.filters th').eq( $(api.column(colIdx).header()).index() ); var title = $(cell).text(); if ($(api.column(colIdx).header()).index() >= 0) { if ($(api.column(colIdx).header()).index() == 3) { $(cell).html('<input type="text" id="ReqDateRead" class="form-control datepicker" placeholder="MM/dd/yyyy" />'); } else if ($(api.column(colIdx).header()).index() == 7) { $(cell).html('<input type="checkbox" class="form-check-input filterCheckbox" name="capex" />'); } else if ($(api.column(colIdx).header()).index() == 9) { $(cell).html('<input type="text" id="lastUpdateDate" class="form-control datepicker" placeholder="MM/dd/yyyy" />'); } else { $(cell).html('<input type="text" class="form-control" style="width:100%" placeholder="Search" />'); } } // On every keypress in this input $( 'input', $('.filters th').eq($(api.column(colIdx).header()).index()) ) .off('keyup change') .on('change', function (e) { // Get the search value $(this).attr('title', $(this).val()); var regexr = '({search})'; //$(this).parents('th').find('select').val(); var cursorPosition = this.selectionStart; // Search the column for that value api .column(colIdx) .search( this.value != '' ? regexr.replace('{search}', '(((' + this.value + ')))') : '', this.value != '', this.value == '' ) .draw(); }) .on('keyup', function (e) { e.stopPropagation(); $(this).trigger('change'); $(this) .focus()[0]; //.setSelectionRange(cursorPosition, cursorPosition); }); }); }, }); var dateRangeStart, dateRangeEnd; $("#main-table_filter").prepend('<div class="filter-date-range-picker"><input class="form-control form-control-sm" id="date_range" type="text" placeholder="Select dates" style="width: 230px; margin-right: 10px;"></div>'); $("#date_range").daterangepicker({ autoUpdateInput: false, locale: { "format": "MM/DD/YYYY", "cancelLabel": "Clear", } }); $("#date_range").on('apply.daterangepicker', function (ev, picker) { dateRangeStart = moment(picker.startDate.format('MM/DD/YYYY'), 'MM/DD/YYYY'); dateRangeEnd = moment(picker.endDate.format('MM/DD/YYYY'), 'MM/DD/YYYY'); $(this).val(dateRangeStart.format('MM/DD/YYYY') + ' to ' + dateRangeEnd.format('MM/DD/YYYY')); $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) { let min = dateRangeStart; let max = dateRangeEnd; let date = new Date(data[3]); if ( (min === null && max === null) || (min === null && date <= max) || (min <= date && max === null) || (min <= date && date <= max) ) { return true; } return false; }); table.draw(); }); $("#date_range").on('cancel.daterangepicker', function (ev, picker) { dateRangeStart = dateRangeEnd = null; $(this).val(''); table.draw(); }); $('#range').on('change', table.draw); $('#range').change(); table.buttons().container() .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)'); $(".dataTables_length select").addClass('form-select form-select-sm'); //Set datepicker $(".datepicker").datepicker({ format: 'MM/dd/yyyy' }); //Open calander when click on icon. $('.date-icon').on('click', function () { $('.datepicker').focus(); }); $('input:checkbox[name="capex"]').on('change', function () { //build a regex filter string with an or(|) condition var checked = $('input:checkbox[name="capex"]').is(':checked'); if (checked) { checked = "Yes" } else { checked = "" } table.column(8).search(checked).draw(false); }); // Order by the grouping $('#main-table tbody').on('click', 'tr.group', function () { var currentOrder = table.order()[0]; if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') { table.order([groupColumn, 'desc']).draw(); } else { table.order([groupColumn, 'asc']).draw(); } }); });
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. | |