Development Experience with sharepoint, MVC, .net

Thursday, February 8, 2024

Simple table with 3 column fixed sticky applied in a pv

<div class="tbl-container apvTable">
      <table class="custashGrid width100p">
        <tr>
          <th style="width:150px">MAT</th>
          <th style="width:80px">LO</th>
          <th style="width:180px">LO TYPE</th>
          <th>MIN</th>
          <th>MAX</th>
          <th>12M FINAL FCST</th>
          <th>12M STAT FCST</th>
          <th>12M USAGE</th>
          <th>USABLE OH</th>
          <th>WOH</th>
          <th>BOH</th>
          <th>OPEN PO</th>
          <th>BASE OPEN PO</th>
          <th>W PO</th>
          <th>SO</th>
          <th>OPEN SO</th>
          <th>W SO</th>
          <th>FILL%</th>
          <th>OH </th>
          <th>DOI</th>
          <th> FCST</th>
          <th>FCST</th>
          <th>FLEX TSL</th>
          <th>INFLEX TSL</th>
          <th>ZERO BIN </th>
          <th>BIN AGE</th>
          <th>TSL SINCE</th>
          <th>LWS BOX</th>
          <th>BOX</th>
          <th>EPFCST</th>
          <th>FPM ANNUAL FCST</th>
          <th>POINTS</th>
          <th>RATING</th>
          <th>ETA KPI LWS</th>
          <th>ETA KPI STP</th>
        </tr>
        <tr v-for="(x, index) in items1" v-bind:key="index">
          <td>{{ x.MAT }}</td>
          <td>{{ x.LOC }}</td>
          <td>{{ x.LOCT }}</td>
          <td>{{ x.MIN }}</td>
          <td>{{ x.MAX }}</td>
          <td>{{ x.FCST }}</td>
          <td>{{ x.StFcst }}</td>
          <td>{{ x.USAGE }}</td>
          <td>{{ x.OH }}</td>
          <td>{{ x.WOH }}</td>
          <td>{{ x.BOH }}</td>
          <td>{{ x.OPEN_PO }}</td>
          <td>{{ x.BsOPo }}</td>
          <td>{{ x.WOPo }}</td>
          <td>{{ x.OPEN_SO }}</td>
          <td>{{ x.BsOSo }}</td>
          <td>{{ x.WOSo }}</td>
          <td>{{ x.LcFilPrc }}</td>
          <td>{{ x.LcOhDoi }}</td>
          <td>{{ x.LcTslDoi }}</td>
          <td>{{ x.FlFcst }}</td>
          <td>{{ x.InfFcst }}</td>
          <td>{{ x.FlTsl }}</td>
          <td>{{ x.InfTsl }}</td>
          <td>{{ x.ZoSn }}</td>
          <td>{{ x.ZoAg }}</td>
          <td>{{ x.TslS }}</td>
          <td>{{ x.LWS_BOX }}</td>
          <td>{{ x.STP_BOX }}</td>
          <td>{{ x.EPFCST }}</td>
          <td>{{ x.FpmAnFc }}</td>
          <td>{{ x.RskP }}</td>
          <td>{{ x.RskR }}</td>
          <td>{{ x.EtaLws }}</td>
          <td>{{ x.EtaStp }}</td>
        </tr>
      </table>
    </div>


CSS:
.tbl-container {
    height: 200px;
    width: 100%;
    overflow: scroll;
    margin: 0 auto;
}

.custashGrid {
    table-layout: fixed;
}

.custashGrid th,
.custashGrid td {
    text-wrap: nowrap;
}

.custashGrid th,
.custashGrid td {
    text-wrap: nowrap;
    width: 130px;
}

.custashGrid th {
    position: sticky !important;
    top: 0px;
    z-index: 3;
    color: #ffffff;
    background-color: #1f4e77;
    padding: 2px;
}

.custashGrid tr:nth-child(even) td:nth-child(1) {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: #e0eaf5;
}
.custashGrid tr:nth-child(odd) td:nth-child(1) {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: #fff ;
}

.custashGrid tr:nth-child(even) td:nth-child(2) {
    position: sticky;
    top: 0;
    left: 150px;
    z-index: 3;
    background-color: #e0eaf5;
}
.custashGrid tr:nth-child(odd) td:nth-child(2) {
    position: sticky;
    top: 0;
    left: 150px;
    z-index: 3;
    background-color: #fff;
}
.custashGrid tr:nth-child(even) td:nth-child(3) {
    position: sticky;
    top: 0;
    left: 230px;
    z-index: 3;
    background-color: #e0eaf5;
}
.custashGrid tr:nth-child(odd) td:nth-child(3) {
    position: sticky;
    top: 0;
    left: 230px;
    z-index: 3;
    background-color: #fff;
}
.custashGrid th:nth-child(1){
    position: sticky;
    top: 0;
    left: 0;
    z-index:4;
}
.custashGrid th:nth-child(2) {
    position: sticky;
    top: 0;
    left: 150px;
    z-index:4;
}
.custashGrid th:nth-child(3) {
    position: sticky;
    top: 0;
    left: 230px;
    z-index:4;
}

Wednesday, April 13, 2022

Dynamic Table Fixed table Header on scroll and Fixed table column on scroll * Complete Code PURE CSS

With CSS

<!DOCTYPE html>
<html>
<head>
    <style>
        .testing1, .testing {
            display: none;
        }

        .tbl-container {
            height:600px;
            width:700px;
            overflow:scroll;
        }
        .repeat-table {
            width:120%;
            border-spacing:0;
        }
            .repeat-table th {
                position: sticky;
                top: 0px;
                z-index: 1;
                background-color: lightpink;
            }
            .repeat-table th, .repeat-table td {
                border: 1px solid gray;
            }
                .repeat-table th, .repeat-table td {
                width: 160px;
            }
                .repeat-table th:nth-child(1), .repeat-table td:nth-child(1) {
                    position: sticky;
                    top: 0;
                    left:0;
                    background-color:pink;
                }
                    .repeat-table th:nth-child(1) {
                        position: sticky;
                        top: 0;
                        left: 0;
                        background-color: pink;
                        z-index:4;
                    }
    </style>
</head>
<body>
    <div class="tbl-container">
        <table class="repeat-table">
            <tr>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID</th>
                <th>abcID abcID.</th>
                <th>abcIDTo</th>
                <th>abcIDCust.</th>
                <th>abcID</th>
                <th>345</th>
                <th>abcID</th>
                <th>abcID</th>
                <th colspan="3">Qty</th>
            </tr>
            <tr>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz--xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>01/xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td></td>
                <td>
                    
                </td>
                <td>
                    
</td>            </tr>
             <tr>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz-xyz</td>
                <td>xyz</td>
                <td>xyz--xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>xyz-WX</td>
                <td>xyz</td>
                <td>01/xyz</td>
                <td>xyz</td>
                <td>xyz</td>
                <td></td>
                <td>
                    
                </td>
                <td>
                    
</td>            </tr>
        </table>
    </div>
</body>
</html>

With JavaScript:

Dynamic Table / No limit of column/ Fixed table Header on scroll and Fixed table column on scroll ***** Complete Code ****

<!DOCTYPE html>

<html>

<head>

<style>

div.relative {

position: relative;

width: 600px;

height: 250px;

overflow-x: scroll;

border: 1px solid #73AD21;

}

.ashTest {

position: absolute;

background-color: #d59b9b;

}

.scrollHead {

position: absolute;

background-color: #d59b9b;

}

</style>

</head>

<body>

<tr>

</tr>

</table>

<tr>

<th style="width:90px">AMSEA</th>

<th style="width:90px">OTHERS</th>

<th style="width:90px">AMSEA</th>

<th style="width:90px">OTHERS</th>

</tr>

</table>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<table>

<tbody>

<tr>

<th style="width:90px">AMSEA</th>

<th style="width:90px">OTHERS</th>

<th style="width:90px">AMSEA</th>

<th style="width:90px">OTHERS</th>

</tr>

</tr>

<tr>

<td>AMSEA</td>

<td>OtdERS</td>

<td>AMSEA</td>

<td>OtdERS</td>

</tr>

</tr>

<tr>

<td>AMSEA</td>

<td>OtdERS</td>

<td>AMSEA</td>

<td>OtdERS</td>

</tr>

</tr>

<tr>

<td>AMSEA</td>

<td>OTHERS</td>

<td>AMSEA</td>

<td>OTHERS</td>

</tr>

</tr>

<tr>

<td>AMSEA</td>

<td>OTHERS</td>

<td>AMSEA</td>

<td>OTHERS</td>

</tr>

</tr>

<tr>

<td>AMSEA</td>

<td>OTHERS</td>

<td>AMSEA</td>

<td>OTHERS</td>

</tr>

</tr>

</tbody>

</table>

</div>

xyz = function () {

let x = document.getElementById('relative').scrollLeft;

document.getElementById('frozen').style.left = x + 'px';

let y = document.getElementById('relative').scrollTop;

document.getElementById('scrollHead').style.top = y + 'px';

document.getElementById('scrollHeadF').style.left = x + 'px';

document.getElementById('scrollHeadF').style.top = y + 'px';

}

</script>

</body>

</html>

Friday, April 1, 2022

Left Navigation on click on hamburger deeply 3 levels applied in vue js

CSS

/*********  navigation  **********/

.nav-class {
    width: 210px;
    margin-left: 0px;
    background: #1f4e77;
    transition: all 0.3s;
    padding: 46px 0 0 0;
    z-index: 1035;
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed !important;
    top: 0;
    height: 100vh !important;
    margin: 0 !important;
    outline: 0;
    transform: translateX(0);
    font-size: 0.75rem;
    font-weight: 400;
}

    .nav-class ul li {
        padding: 6px 10px 6px 10px;
        background: #1f4e77;
    }

    .nav-class > ul {
        padding-left: 15px;
        background: #1f4e77;
    }

    .nav-class ul a {
        font-size: .75rem;
        font-weight: 400;
        padding: 6px 10px 6px 1px;
        border-bottom: 0;
        color: hsla(0,0%,100%,.8);
        position: relative;
        transition: all .3s ease-in-out;
        width: 100%;
    }


.navLvl1 {
    position: relative;
}

    .navLvl1:hover,
    .navLvl2li:hover,
    .navLvl2 li:hover,
    .navLvl3 li:hover,
    #sidebar ul.sidebarCollapse li a:hover {
        background-color: #4599c3 !important;
    }

.navLvl2 {
    border-left: 1px groove gray;
    border-bottom:1px solid gray;
    display: none;
    position: absolute;
    top: 0;
    margin-left: 185px;
    width: 200px;
    z-index: 1;
}

.navLvl3 {
    border-left: 1px groove gray;
    border-bottom:1px solid gray;
    display: none;
    position: absolute;
    top: 0;
    margin-left: 185px;
    width: 200px;
    z-index: 2;
}

.navLvl2 ul,
.navLvl2 ul {
    margin: 0;
    padding: 0;
}

.navLvl1:hover .navLvl2 {
    display: block;
}

.b-sidebar > .b-sidebar-body {
    overflow-y: initial !important;
}

.navLvl2 ul li,
.navLvl3 ul li {
    list-style-type: none;
}

    .navLvl2 ul li:hover,
    .navLvl3 ul li,
    .nav-class ul li {
        list-style-type: none;
    }

.navLvl2li {
    position: relative;
}

    .navLvl2li:hover .navLvl3 {
        display: block;
    }


HTML

<div
          class="nav-class"
          v-bind:style="[
            this.navShowHide ? { display: 'block' } : { display: 'none' },
          ]"
        >
          <!--  v-bind:style="[
            navShowHide
              ? { width: '230px', transition: 'all .3s ease-out' }
              : { width: '0px', transition: 'all .3s ease-out' },
          ]" -->
          <ul>
            <li class="navLvl1">
              <a>Test Parent </a>
              <b-icon
                class="navchild"
                icon="chevron-right"
                style="color: #fff"
              ></b-icon>
              <div class="navLvl2">
                <ul>
                  <li class="navLvl2li">
                    <a href="#" target="_blank">Test child 1 </a>
                    <b-icon
                      class="navchild"
                      icon="chevron-right"
                      style="color: #fff"
                    ></b-icon>
                    <div class="navLvl3">
                      <ul>
                        <li>
                          <a href="#" target="_blank">Test last 1-1</a>
                        </li>
                        <li>
                          <router-link to="leadindicate">Data Mgr</router-link>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 1-2</a>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 1-3</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="navLvl2li">
                    <a target="_blank">Test child 2</a>
                    <b-icon
                      class="navchild"
                      icon="chevron-right"
                      style="color: #fff"
                    ></b-icon>
                    <div class="navLvl3">
                      <ul>
                        <li>
                          <a href="#" target="_blank">Test last 2-1</a>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 2-2</a>
                        </li>
                        <li>
                          <a href="#" target="_blank">Test last 2-3</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li class="navLvl2li">
                    <a target="_blank">Test child 3</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
Dynamic
<div class="row">
        <!--<b-sidebar
          id="sidebar-1"
          title="Sidebar"
         
          no-header
          shadow
        >
          <!- - Sidebar start - ->
          <nav id="sidebar" v-bind:style="[
            navShowHide
              ? { width: '210px', transition: 'all .3s ease-out' }
              : { width: '0px', transition: 'all .3s ease-out' },
          ]">
            <ul class="sidebarCollapse" id="sidebarLinks">
              <li
                id="jhas"
                v-show="getNavsAMs.length > 0"
                style="position: absolute"
              >
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseAMs"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Action Messages
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseAMs"
                  aria-labelledby="jhas"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsAMs" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="jhasPlans" v-show="getNavsInvInv.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseJhasPlans"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Inventory Investment
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseJhasPlans"
                  aria-labelledby="jhasPlans"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsInvInv" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navDE" v-show="getNavsDataEntry.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavDE"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Data Entry
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavDE"
                  aria-labelledby="navDE"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsDataEntry" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navEODta" v-show="getNavsEOData.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavEODta"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  EO Data Input
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavEODta"
                  aria-labelledby="navEODta"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsEOData" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navMatCmnt" v-show="getNavsMatCmnt.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavMatCmnt"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Material Comments
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavMatCmnt"
                  aria-labelledby="navMatCmnt"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsMatCmnt" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navECOWB" v-show="getNavsECOWB.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavECOWB"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  ECO Workbench
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavECOWB"
                  aria-labelledby="navECOWB"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsECOWB" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navTKM2" v-show="getNavsTkm2.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavTKM2"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  TKM 2.0
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavTKM2"
                  aria-labelledby="navTKM2"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsTkm2" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="navPAT" v-show="getNavsPatConfig.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNavPAT"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Predictive Analytics Tool
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNavPAT"
                  aria-labelledby="navPAT"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsPatConfig" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li id="nav3" v-show="getNavsDmdMgmt.length > 0">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseNav4"
                  aria-expanded="false"
                >
                  <img src="./assets/images/create-jha1.svg" class="icon" alt />
                  Demand Management
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseNav4"
                  aria-labelledby="nav4"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsDmdMgmt" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
              </li>
              <li
                id="adminstration"
                v-show="getNavsAdmin.length > 0"
                class="navLvl1"
              >
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseIiConf"
                  aria-expanded="false"
                >
                  <img
                    src="./assets/images/settings.svg"
                    class="icon"
                    alt
                  />Admin
                </a>
                <ul
                  class="collapse list-unstyled"
                  id="collapseIiConf"
                  aria-labelledby="gisHelp"
                  data-parent="#sidebarLinks"
                >
                  <li v-for="nav in getNavsAdmin" :key="nav.PageName">
                    <router-link
                      :to="{ path: nav.PageName }"
                      v-if="nav.IsNewTab != 'True'"
                      >{{ nav.PageTitle }}</router-link
                    >
                    <a :href="nav.PageName" target="_blank" v-else>{{
                      nav.PageTitle
                    }}</a>
                  </li>
                </ul>
                <div class="navLvl2">
                  <ul>
                    <li
                      v-for="(nav, index) in getNavsAdmin"
                      :key="nav.PageName"
                      class="navLvl2li"
                    >
                      <router-link
                        :to="{ path: nav.PageName }"
                        v-if="nav.IsNewTab != 'True'"
                        >{{ nav.PageTitle }}</router-link
                      >
                      <a :href="nav.PageName" target="_blank" v-else>{{
                        nav.PageTitle
                      }}</a>
                      <div class="navLvl3">
                        <ul>
                          <li>
                            <a href="#">{{ nav.PageTitle + ":" + index }}</a>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="navLvl1">
                <a
                  class="collapsed"
                  data-toggle="collapse"
                  data-target="#collapseIiConf"
                  aria-expanded="false"
                >
                  <img
                    src="./assets/images/settings.svg"
                    class="icon"
                    alt
                  />Test Parent
                </a>
                <div class="navLvl2">
                  <ul>
                    <li class="navLvl2li">
                      <a href="#" target="_blank"
                        >Test child 1
                        <img
                          class="navchild"
                          src="./assets/images/arrow-right.svg"
                        />
                      </a>
                      <div class="navLvl3">
                        <ul>
                          <li>
                            <a href="#" target="_blank">Test last 1-1</a>
                          </li>
                          <li>
                            <router-link to="leadindicate"
                              >Data Mgr</router-link
                            >
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 1-2</a>
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 1-3</a>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li class="navLvl2li">
                      <a href="#" target="_blank">Test child 2</a>
                      <div class="navLvl3">
                        <ul>
                          <li>
                            <a href="#" target="_blank">Test last 2-1</a>
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 2-2</a>
                          </li>
                          <li>
                            <a href="#" target="_blank">Test last 2-3</a>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li id="help">
                <router-link to="/jira">
                  <img
                    src="./assets/images/question.svg"
                    class="icon"
                    alt
                  />Help</router-link
                >
              </li>
            </ul>
          </nav>
          <!- - Sidebar end - ->
        </b-sidebar>-->
        <div
          class="nav-class"
          v-bind:style="[
            this.navShowHide ? { display: 'block' } : { display: 'none' },
          ]"
        >
          <!--  v-bind:style="[
            navShowHide
              ? { width: '230px', transition: 'all .3s ease-out' }
              : { width: '0px', transition: 'all .3s ease-out' },
          ]" -->
          <ul>
            <li v-for="nav in navLevel1List" :key="nav.ID" class="navLvl1">
              <router-link
                :to="{ path: nav.PageName }"
                v-if="nav.IsNewTab != 'True'"
                >{{ nav.PageTitle }}</router-link
              >
              <a :href="nav.PageName" target="_blank" v-else>{{
                nav.PageTitle
              }}</a>
              <b-icon
                class="navchild"
                icon="chevron-right"
                style="color: #fff"
                v-if="navLevel2List(nav.ID).length > 0"
              ></b-icon>
              <div class="navLvl2" v-if="navLevel2List(nav.ID).length > 0">
                <ul>
                  <li
                    v-for="navL2 in navLevel2List(nav.ID)"
                    :key="navL2.ID"
                    class="navLvl2li"
                  >
                    <router-link
                      :to="{ path: navL2.PageName }"
                      v-if="navL2.IsNewTab != 'True'"
                      >{{ navL2.PageTitle }}</router-link
                    >
                    <a :href="navL2.PageName" target="_blank" v-else>{{
                      navL2.PageTitle
                    }}</a>
                    <b-icon
                      class="navchild"
                      icon="chevron-right"
                      style="color: #fff"
                      v-if="navLevel2List(navL2.ID).length > 0"
                    >
                    </b-icon>
                    <div
                      class="navLvl3"
                      v-if="navLevel2List(navL2.ID).length > 0"
                    >
                      <ul>
                        <li
                          v-for="navL3 in navLevel2List(navL2.ID)"
                          :key="navL3.ID"
                        >
                          <router-link
                            :to="{ path: navL3.PageName }"
                            v-if="navL3.IsNewTab != 'True'"
                            >{{ navL3.PageTitle }}</router-link
                          >
                          <a :href="navL3.PageName" target="_blank" v-else>{{
                            navL3.PageTitle
                          }}</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>

Thursday, February 8, 2024

Simple table with 3 column fixed sticky applied in a pv

Wednesday, April 13, 2022

Dynamic Table Fixed table Header on scroll and Fixed table column on scroll ***** Complete Code **** PURE CSS

Friday, April 1, 2022

Left Navigation on click on hamburger deeply 3 levels applied in vue js

Dynamic Table Fixed table Header on scroll and Fixed table column on scroll * Complete Code PURE CSS