@desynova-digital/components 9.0.26 → 9.1.0

package/molecules/table/table.js

@@ -1,130 +1,59 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  border-bottom: 1px solid #303f51;\n  display: flex;\n  align-items: center;\n  input:focus {\n    outline: none;\n  }\n  .search-icon-wrapper {\n    padding-right: 10px;\n  }\n  .input-field {\n    border: none;\n    color: #999999;\n    min-width: 300px;\n    margin-top: 0px;\n  }\n  .close-icon-wrapper {\n    cursor: pointer;\n    &:hover {\n      path {\n        fill: white;\n      }\n    }\n  }\n'], ['\n  border-bottom: 1px solid #303f51;\n  display: flex;\n  align-items: center;\n  input:focus {\n    outline: none;\n  }\n  .search-icon-wrapper {\n    padding-right: 10px;\n  }\n  .input-field {\n    border: none;\n    color: #999999;\n    min-width: 300px;\n    margin-top: 0px;\n  }\n  .close-icon-wrapper {\n    cursor: pointer;\n    &:hover {\n      path {\n        fill: white;\n      }\n    }\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  & .avatar-details {\n    display: none;\n  }\n\n  .initial-placeholder {\n    background: #78909c;\n    width: 24px;\n    height: 24px;\n    text-align: center;\n    border-radius: 100%;\n    font-size: 12px;\n    color: #fff;\n  }\n'], ['\n  & .avatar-details {\n    display: none;\n  }\n\n  .initial-placeholder {\n    background: #78909c;\n    width: 24px;\n    height: 24px;\n    text-align: center;\n    border-radius: 100%;\n    font-size: 12px;\n    color: #fff;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n\n  position: absolute;\n  top: 0;\n  left: 55px;\n  width: 0px;\n  overflow: hidden;\n  transition: all 0.4s ease;\n  height: 38px;\n  background: ', ';//#ccc;\n  display: flex;\n  align-items: center;\n  &.show{\n    width: 146px;\n    overflow: visible;\n  }\n\n  div.action-icons-common{\n    white-space: nowrap;\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .tooltip-container{\n      display: inline-block;\n      margin: 0px 5px;\n    }\n\n    .action-button{\n      // padding: 0px;\n      // border-radius: 50%;\n      // -webkit-appearance: none;\n      // cursor:pointer;\n      // align-items: center;\n      // justify-content: center;\n      // height: 25px;\n      // width: 25px;\n\n      &.default{\n        //background: #666666;\n        //border:1px solid #666666;\n        &:hover{\n          //background: #8e8e8e;\n          //border:1px solid #8e8e8e;\n        }\n      }\n      &.play{\n        background:  ', ';\n        border:1px solid ', ';\n        &:hover{\n          background: #39cac2;\n          border:1px solid #39cac2;\n        }\n      }\n    }\n\n'], ['\n\n  position: absolute;\n  top: 0;\n  left: 55px;\n  width: 0px;\n  overflow: hidden;\n  transition: all 0.4s ease;\n  height: 38px;\n  background: ', ';//#ccc;\n  display: flex;\n  align-items: center;\n  &.show{\n    width: 146px;\n    overflow: visible;\n  }\n\n  div.action-icons-common{\n    white-space: nowrap;\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .tooltip-container{\n      display: inline-block;\n      margin: 0px 5px;\n    }\n\n    .action-button{\n      // padding: 0px;\n      // border-radius: 50%;\n      // -webkit-appearance: none;\n      // cursor:pointer;\n      // align-items: center;\n      // justify-content: center;\n      // height: 25px;\n      // width: 25px;\n\n      &.default{\n        //background: #666666;\n        //border:1px solid #666666;\n        &:hover{\n          //background: #8e8e8e;\n          //border:1px solid #8e8e8e;\n        }\n      }\n      &.play{\n        background:  ', ';\n        border:1px solid ', ';\n        &:hover{\n          background: #39cac2;\n          border:1px solid #39cac2;\n        }\n      }\n    }\n\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  width: 100%;\n  height: 100%;\n  // overflow-x: auto;\n  // overflow-y: hidden;\n  margin: 10px 0;\n  /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  position:relative\n\n  ', '\n\ninput[type=\'checkbox\']{ height: 0; width: 0; display:none;}\n\ninput[type=\'checkbox\'] + label{\n  position: relative;\n  display: flex;\n  margin:0;\n  align-items: center;\n  color: #9e9e9e;\n  transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\'] + label > span{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #9E9E9E;\n  border-radius: 50%;\n  cursor: pointer;  \n  transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type=\'checkbox\'] + label:hover > span,\ninput[type=\'checkbox\']:focus + label > span{\n  background: rgba(255,255,255,.1);\n}\n\ninput[type=\'checkbox\']:checked + label > span{\n  border: 10px solid #49dad0\n  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\']:checked + label > span:before{\n  content: "";\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  border-right: 2px solid transparent;\n  border-bottom: 2px solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n  0%{\n    transform: scale(1);\n  }\n  33%{    \n    transform: scale(.85);\n  }\n  100%{\n    transform: scale(1);    \n  }\n}\n@keyframes checkbox-check{\n  0%{\n    width: 0;\n    height: 0;\n    border-color: #FFF;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  33%{\n    width: 4px;\n    height: 0;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  100%{    \n    width: 4px;\n    height: 9px;    \n    border-color: #FFF;\n    transform: translate3d(0,-.5em,0) rotate(45deg);\n  }\n}\n  \n'], ['\n  width: 100%;\n  height: 100%;\n  // overflow-x: auto;\n  // overflow-y: hidden;\n  margin: 10px 0;\n  /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  position:relative\n\n  ', '\n\ninput[type=\'checkbox\']{ height: 0; width: 0; display:none;}\n\ninput[type=\'checkbox\'] + label{\n  position: relative;\n  display: flex;\n  margin:0;\n  align-items: center;\n  color: #9e9e9e;\n  transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\'] + label > span{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #9E9E9E;\n  border-radius: 50%;\n  cursor: pointer;  \n  transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type=\'checkbox\'] + label:hover > span,\ninput[type=\'checkbox\']:focus + label > span{\n  background: rgba(255,255,255,.1);\n}\n\ninput[type=\'checkbox\']:checked + label > span{\n  border: 10px solid #49dad0\n  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type=\'checkbox\']:checked + label > span:before{\n  content: "";\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  border-right: 2px solid transparent;\n  border-bottom: 2px solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n  0%{\n    transform: scale(1);\n  }\n  33%{    \n    transform: scale(.85);\n  }\n  100%{\n    transform: scale(1);    \n  }\n}\n@keyframes checkbox-check{\n  0%{\n    width: 0;\n    height: 0;\n    border-color: #FFF;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  33%{\n    width: 4px;\n    height: 0;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  100%{    \n    width: 4px;\n    height: 9px;    \n    border-color: #FFF;\n    transform: translate3d(0,-.5em,0) rotate(45deg);\n  }\n}\n  \n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  .table-title {\n    font-family: \'SFUIText-Medium\';\n    font-size: 18px;\n    letter-spacing: 0.3px;\n    color: ', ';\n  }\n  .title-right-area {\n    display: flex;\n    align-items: center;\n    & > div {\n      margin-left: 10px;\n    }\n\n    .refresh-section {\n      position: relative;\n\n      @keyframes glowing {\n        0% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        15% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        30% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        45% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        60% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        75% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        90% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        100% {\n          box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n        }\n      }\n\n      .red-dot {\n        position: absolute;\n        top: 0;\n        right 0;\n        width: 16px\n        height: 16px;\n        border-radius: 100%;\n        background-color: rgba(255, 108, 86, 0.1);\n        &:after {\n          content: \'\';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 6px;\n          height: 6px;\n          background-color: #FF6C56;\n          border-radius: 100%;\n          transform: translate(-50%, -50%);\n        }\n        \n      }\n\n      .tooltip {\n        font-family: \'SFUIText-Regular\';\n        font-size: 12px;\n        top: -38px;\n        right: -66px;\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        width: 170px;\n        background-color: ', ';\n        color: #0c141d;\n        border-radius: 20px;\n        padding: 10px 5px;\n        &:after {\n          content: \'\';\n          border-top: 6px dashed ', ';\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          bottom: -6px;\n          right: 76px;\n        }\n      }\n\n      .refresh-btn {\n        background-color: #121d28;\n        border: 1px solid #121d28;\n        padding: 7px;\n        border-radius: 50%;\n        cursor: pointer;\n\n        &:hover {\n          path {\n            fill: #fff;\n          }\n        }\n        \n        &.active {\n          background-color: ', ';\n          border-color: ', ';\n          transition: all 0.2s ease-in-out;\n          path {\n            transition: all 0.2s ease-in-out;\n            fill: #fff;\n          }\n        }\n\n        &.active {\n          animation: glowing 5000ms infinite;\n        }\n\n        > button {\n          border: none;\n          background-color: transparent;\n          position: relative;\n          path {\n            fill: #afb2ba;\n          }\n        }\n      }\n    }\n  }\n  .column-show-holder {\n    position: relative;\n    text-align: left;\n\n    .column-show-icon {\n      width: 30px;\n      height: 30px;\n      background: #121d28;\n      border-radius: 50%;\n      padding: 7px 7px;\n\n      &:hover {\n        path {\n          fill: #fff;\n          transition: all 0.4s ease-out;\n        }\n      }\n    }\n\n    .column-show-list-box {\n      position: absolute;\n      display: none;\n      //display:block;\n      width: 345px;\n      right: 0;\n      z-index: 101;\n      padding-top: 7px;\n      top: 29px;\n\n      & > div {\n        box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n      }\n\n      &:before {\n        content: \'\';\n        position: absolute;\n        /* left: 42%; */\n        /* top: 100%; */\n        width: 0;\n        height: 0;\n\n        border-left: 4px solid transparent;\n        border-right: 4px solid transparent;\n        border-bottom: 6px solid ', ';\n        transform: translate(327px, -6px);\n      }\n\n      .column-show-info {\n        background: #182738;\n        color: #afb2ba;\n        font-family: \'SFUIText-Regular\';\n        padding: 15px;\n        font-size: 12px;\n        border-bottom: solid 1px #303f51;\n        line-height: 15px;\n        border-top-left-radius: 2px;\n        border-top-right-radius: 2px;\n        .column-show-info-header {\n          font-family: SFUIText-Medium;\n          font-size: 14px;\n          padding-bottom: 5px;\n        }\n      }\n\n      .column-show-list {\n        background: #182738;\n        color: #fff;\n        padding: 5px;\n        border-bottom-left-radius: 2px;\n        border-bottom-right-radius: 2px;\n        & .label {\n          margin-right: 0px;\n\n          & > input {\n            & ~ span {\n              color: #fff;\n              background: #303f51;\n              &:hover {\n                background: #303f51;\n                color: ', ';\n              }\n            }\n\n            &:checked ~ span {\n              background: ', ';\n              &:hover {\n                background: ', ';\n                color: #fff;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &:hover {\n      .column-show-list-box {\n        display: block;\n      }\n    }\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  .table-title {\n    font-family: \'SFUIText-Medium\';\n    font-size: 18px;\n    letter-spacing: 0.3px;\n    color: ', ';\n  }\n  .title-right-area {\n    display: flex;\n    align-items: center;\n    & > div {\n      margin-left: 10px;\n    }\n\n    .refresh-section {\n      position: relative;\n\n      @keyframes glowing {\n        0% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        15% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        30% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        45% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        60% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        75% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        90% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        100% {\n          box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n        }\n      }\n\n      .red-dot {\n        position: absolute;\n        top: 0;\n        right 0;\n        width: 16px\n        height: 16px;\n        border-radius: 100%;\n        background-color: rgba(255, 108, 86, 0.1);\n        &:after {\n          content: \'\';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 6px;\n          height: 6px;\n          background-color: #FF6C56;\n          border-radius: 100%;\n          transform: translate(-50%, -50%);\n        }\n        \n      }\n\n      .tooltip {\n        font-family: \'SFUIText-Regular\';\n        font-size: 12px;\n        top: -38px;\n        right: -66px;\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        width: 170px;\n        background-color: ', ';\n        color: #0c141d;\n        border-radius: 20px;\n        padding: 10px 5px;\n        &:after {\n          content: \'\';\n          border-top: 6px dashed ', ';\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          bottom: -6px;\n          right: 76px;\n        }\n      }\n\n      .refresh-btn {\n        background-color: #121d28;\n        border: 1px solid #121d28;\n        padding: 7px;\n        border-radius: 50%;\n        cursor: pointer;\n\n        &:hover {\n          path {\n            fill: #fff;\n          }\n        }\n        \n        &.active {\n          background-color: ', ';\n          border-color: ', ';\n          transition: all 0.2s ease-in-out;\n          path {\n            transition: all 0.2s ease-in-out;\n            fill: #fff;\n          }\n        }\n\n        &.active {\n          animation: glowing 5000ms infinite;\n        }\n\n        > button {\n          border: none;\n          background-color: transparent;\n          position: relative;\n          path {\n            fill: #afb2ba;\n          }\n        }\n      }\n    }\n  }\n  .column-show-holder {\n    position: relative;\n    text-align: left;\n\n    .column-show-icon {\n      width: 30px;\n      height: 30px;\n      background: #121d28;\n      border-radius: 50%;\n      padding: 7px 7px;\n\n      &:hover {\n        path {\n          fill: #fff;\n          transition: all 0.4s ease-out;\n        }\n      }\n    }\n\n    .column-show-list-box {\n      position: absolute;\n      display: none;\n      //display:block;\n      width: 345px;\n      right: 0;\n      z-index: 101;\n      padding-top: 7px;\n      top: 29px;\n\n      & > div {\n        box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n      }\n\n      &:before {\n        content: \'\';\n        position: absolute;\n        /* left: 42%; */\n        /* top: 100%; */\n        width: 0;\n        height: 0;\n\n        border-left: 4px solid transparent;\n        border-right: 4px solid transparent;\n        border-bottom: 6px solid ', ';\n        transform: translate(327px, -6px);\n      }\n\n      .column-show-info {\n        background: #182738;\n        color: #afb2ba;\n        font-family: \'SFUIText-Regular\';\n        padding: 15px;\n        font-size: 12px;\n        border-bottom: solid 1px #303f51;\n        line-height: 15px;\n        border-top-left-radius: 2px;\n        border-top-right-radius: 2px;\n        .column-show-info-header {\n          font-family: SFUIText-Medium;\n          font-size: 14px;\n          padding-bottom: 5px;\n        }\n      }\n\n      .column-show-list {\n        background: #182738;\n        color: #fff;\n        padding: 5px;\n        border-bottom-left-radius: 2px;\n        border-bottom-right-radius: 2px;\n        & .label {\n          margin-right: 0px;\n\n          & > input {\n            & ~ span {\n              color: #fff;\n              background: #303f51;\n              &:hover {\n                background: #303f51;\n                color: ', ';\n              }\n            }\n\n            &:checked ~ span {\n              background: ', ';\n              &:hover {\n                background: ', ';\n                color: #fff;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &:hover {\n      .column-show-list-box {\n        display: block;\n      }\n    }\n  }\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n'], ['\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n']),
-    _templateObject7 = _taggedTemplateLiteral(['\n  font-family: \'SFUIText-Regular\';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ', ';\n  padding: 7px 14px;\n  border-top: 1px solid ', ';\n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: auto;\n'], ['\n  font-family: \'SFUIText-Regular\';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ', ';\n  padding: 7px 14px;\n  border-top: 1px solid ', ';\n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: auto;\n']),
-    _templateObject8 = _taggedTemplateLiteral([''], ['']),
-    _templateObject9 = _taggedTemplateLiteral(['\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ', ';\n  }\n\n  &:nth-child(even) > td {\n    background: ', ';\n  }\n\n  &:hover {\n    .asset-play {\n      color: ', ';\n    }\n  }\n\n  ', ' {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ', ';\n  }\n'], ['\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ', ';\n  }\n\n  &:nth-child(even) > td {\n    background: ', ';\n  }\n\n  &:hover {\n    .asset-play {\n      color: ', ';\n    }\n  }\n\n  ', ' {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ', ';\n  }\n']),
-    _templateObject10 = _taggedTemplateLiteral(['\n  font-family: \'SFUIText-Regular\';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ', '; \n  padding: 7px 14px;\n // border-top: 1px solid ', '; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ', ';\n  max-width:  ', ';\n\n  &.tableHolder{\n    padding:0px;\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ', ';\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ', ';\n        path{\n          fill: ', ';\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ', ';\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ', ';\n          min-width: 200px;\n        }\n\n        &:before{\n          content: \'\';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ', ';\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ', ';\n  }\n\n\n'], ['\n  font-family: \'SFUIText-Regular\';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ', '; \n  padding: 7px 14px;\n // border-top: 1px solid ', '; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ', ';\n  max-width:  ', ';\n\n  &.tableHolder{\n    padding:0px;\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ', ';\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ', ';\n        path{\n          fill: ', ';\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ', ';\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ', ';\n          min-width: 200px;\n        }\n\n        &:before{\n          content: \'\';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ', ';\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ', ';\n  }\n\n\n']),
-    _templateObject11 = _taggedTemplateLiteral(['\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n'], ['\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n']),
-    _templateObject12 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ', ';\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ', ';\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n']),
-    _templateObject13 = _taggedTemplateLiteral(['\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ', ';\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 75px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ', ';\n    .span-select-all-button {\n      display: ', ';\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ', ';\n    }\n  }\n'], ['\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ', ';\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 75px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ', ';\n    .span-select-all-button {\n      display: ', ';\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ', ';\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _lodash = require('lodash');
-
-var _button = require('../../atoms/button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _label = require('../../atoms/label');
-
-var _label2 = _interopRequireDefault(_label);
-
-var _card = require('../../atoms/card');
-
-var _card2 = _interopRequireDefault(_card);
-
-var _icon = require('../../atoms/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _checkbox = require('../../atoms/checkbox');
-
-var _checkbox2 = _interopRequireDefault(_checkbox);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _tableColumn = require('./table-column');
-
-var _tableColumn2 = _interopRequireDefault(_tableColumn);
-
-var _tableHeader = require('./table-header');
-
-var _tableHeader2 = _interopRequireDefault(_tableHeader);
-
-var _dateTime = require('../../atoms/dateTime/dateTime');
-
-var _dateTime2 = _interopRequireDefault(_dateTime);
-
-var _filter = require('../../molecules/filter/filter');
-
-var _filter2 = _interopRequireDefault(_filter);
-
-var _permissionIconMap = require('../../../tokens/permissionIconMap');
-
-var _permissionIconMap2 = _interopRequireDefault(_permissionIconMap);
-
-var _TableErrorScreen = require('../../molecules/errorScreen/TableErrorScreen');
-
-var _TableErrorScreen2 = _interopRequireDefault(_TableErrorScreen);
-
-var _inputText = require('../../atoms/inputText');
-
-var _inputText2 = _interopRequireDefault(_inputText);
-
-var _Shimmer = require('../../atoms/loader/ShimmerComponent/Shimmer');
-
-var _Shimmer2 = _interopRequireDefault(_Shimmer);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var Table = function (_Component) {
-  _inherits(Table, _Component);
-
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _lodash = require("lodash");
+var _button = _interopRequireDefault(require("../../atoms/button"));
+var _label = _interopRequireDefault(require("../../atoms/label"));
+var _card = _interopRequireDefault(require("../../atoms/card"));
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _checkbox = _interopRequireDefault(require("../../atoms/checkbox"));
+var _tokens = require("@desynova-digital/tokens");
+var _tableColumn = _interopRequireDefault(require("./table-column"));
+var _tableHeader = _interopRequireDefault(require("./table-header"));
+var _dateTime = _interopRequireDefault(require("../../atoms/dateTime/dateTime"));
+var _filter = _interopRequireDefault(require("../../molecules/filter/filter"));
+var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permissionIconMap"));
+var _TableErrorScreen = _interopRequireDefault(require("../../molecules/errorScreen/TableErrorScreen"));
+var _inputText = _interopRequireDefault(require("../../atoms/inputText"));
+var _Shimmer = _interopRequireDefault(require("../../atoms/loader/ShimmerComponent/Shimmer"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Table = /*#__PURE__*/function (_Component) {
   function Table(props) {
-    _classCallCheck(this, Table);
-
-    var _this = _possibleConstructorReturn(this, (Table.__proto__ || Object.getPrototypeOf(Table)).call(this, props));
-
-    _this.spiltColumns = function () {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Table);
+    _this = _callSuper(this, Table, [props]);
+    (0, _defineProperty2["default"])(_this, "spiltColumns", function () {
       _this.defaultShowColumns = [];
       _this.extraColumns = [];
       _this.nestedTable = [];
-
       _this.actionIconCol = [];
-
       var extraColumnsSchema = {
         title: '',
         field: 'extra_columns',
         type: 'extra_columns'
       };
-
       _this.columns = _this.columns.filter(function (item, idx) {
         if (item.type === 'action_icon') {
           _this.actionIconCol.push(item);
@@ -134,32 +63,26 @@ var Table = function (_Component) {
           return item;
         }
       });
-
       _this.defaultShowColumns = JSON.parse(JSON.stringify(_this.columns));
       _this.extraColumns = JSON.parse(JSON.stringify(_this.columns));
-
       if (_this.columns.length <= _this.props.maxShowNoOfColumns && !_this.props.showActions) {} else if (_this.columns.length <= _this.props.maxShowNoOfColumns - 1 && _this.props.showActions) {
         var _this$defaultShowColu;
-
         /*
          * console.log(this.columns);
          *  this.defaultShowColumns.push({ title: '', field: 'video_src' });
          */
-        if (_this.actionIconCol.length > 0) (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, _toConsumableArray(_this.actionIconCol));
+        if (_this.actionIconCol.length > 0) (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
       } else if (_this.columns.length > _this.props.maxShowNoOfColumns - 1 && _this.props.showActions) {
         var _this$defaultShowColu2;
-
         _this.defaultShowColumns.splice(_this.props.maxShowNoOfColumns - 1, _this.defaultShowColumns.length);
 
         // this.defaultShowColumns.push({ title: '', field: 'video_src' });
-        if (_this.actionIconCol.length > 0) (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, _toConsumableArray(_this.actionIconCol));
-
+        if (_this.actionIconCol.length > 0) (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
         _this.defaultShowColumns.push(extraColumnsSchema);
         _this.extraColumns.splice(0, _this.props.maxShowNoOfColumns - 1);
       } else if (_this.columns.length > _this.props.maxShowNoOfColumns && !_this.props.showActions) {
         _this.defaultShowColumns.splice(_this.props.maxShowNoOfColumns, _this.defaultShowColumns.length);
         _this.defaultShowColumns.push(extraColumnsSchema);
-
         _this.extraColumns.splice(0, _this.props.maxShowNoOfColumns);
       }
 
@@ -190,30 +113,33 @@ var Table = function (_Component) {
         nestedTable: _this.nestedTable,
         showColumnArr: _this.getFieldArr(_this.defaultShowColumns)
       };
-    };
-
-    _this.getFieldArr = function (cols) {
+    });
+    (0, _defineProperty2["default"])(_this, "getFieldArr", function (cols) {
       return cols.map(function (item) {
         return item.field;
       });
-    };
-
-    _this.actionClickEvents = function (e, action, idx) {
+    });
+    // actions onClick event
+    (0, _defineProperty2["default"])(_this, "actionClickEvents", function (e, action, idx) {
       // action eg. play, ingest_delete etc
       var actionClickHandler = _this.props.actionClickHandler;
       var items = _this.state.items;
-
       if (actionClickHandler) {
         actionClickHandler(action, items[idx], e);
-        _this.setState({ isAllRowsSelected: false });
+        _this.setState({
+          isAllRowsSelected: false
+        });
       } else {
         console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
       }
-    };
-
-    _this.actionElements = function (item, column, idx) {
+    });
+    // actions elements
+    (0, _defineProperty2["default"])(_this, "actionElements", function (item, column, idx) {
       if (item[column.field] === undefined) {
-        return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+        return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "100%"
+        });
       }
       var arrLength = item[column.field].length;
       var elements = item[column.field].reduce(function (acc, curr) {
@@ -227,133 +153,108 @@ var Table = function (_Component) {
           acc.remaining.push(curr);
         }
         return acc;
-      }, { first: [], remaining: [] });
-
-      return _react2.default.createElement(
-        'div',
-        { className: 'action-icons-cell' },
-        item[column.field] && _typeof(item[column.field]) === 'object' ? _react2.default.createElement(
-          'div',
-          { style: { display: 'flex', alignItems: 'center' } },
-          elements.first.map(function (action, i) {
-            return _react2.default.createElement(_button2.default, {
-              theme: _this.props.theme,
-              key: action,
-              className: 'action-item-btn',
-              style: { border: 'none' },
-              appearance: 'cta',
-              width: 20,
-              height: 20,
-              iconWidth: 13,
-              iconHeight: 13,
-              label: _this.props.actionLable[action],
-              icon: column.valueIconMap && column.valueIconMap[action] ? column.valueIconMap[action] : _permissionIconMap2.default[action],
-              onClick: function onClick(e) {
-                return _this.actionClickEvents(e, action, idx);
-              }
-            });
-          }),
-          elements.remaining.length > 0 && _react2.default.createElement(
-            'div',
-            { className: 'more-action-holder' },
-            _react2.default.createElement(
-              'div',
-              { className: 'more-action-icon' },
-              _react2.default.createElement(_icon2.default, { name: 'more-ver', width: 3, height: 13, theme: _this.props.theme })
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'more-action-list-box' },
-              _react2.default.createElement(
-                'div',
-                { className: 'more-action-list' },
-                elements.remaining.map(function (action, i) {
-                  return _react2.default.createElement(
-                    'div',
-                    {
-                      className: 'action-item-btn nested',
-                      key: i,
-                      onClick: function onClick(e) {
-                        return _this.actionClickEvents(e, action, idx);
-                      }
-                    },
-                    _react2.default.createElement(
-                      'div',
-                      null,
-                      _react2.default.createElement(_icon2.default, {
-                        theme: _this.props.theme,
-                        name: column.valueIconMap && column.valueIconMap[action] ? column.valueIconMap[action] : _permissionIconMap2.default[action],
-                        width: 14,
-                        height: 14
-                      })
-                    ),
-                    _react2.default.createElement(
-                      'div',
-                      null,
-                      _this.props.actionLable && _this.props.actionLable[action]
-                    )
-                  );
-                })
-              )
-            )
-          )
-        ) : null
-      );
-    };
-
-    _this.defaultCellRenderer = function (item, column, idx) {
+      }, {
+        first: [],
+        remaining: []
+      });
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "action-icons-cell"
+      }, item[column.field] && (0, _typeof2["default"])(item[column.field]) === 'object' ? /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, elements.first.map(function (action, i) {
+        return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+          theme: _this.props.theme,
+          key: action,
+          className: "action-item-btn",
+          style: {
+            border: 'none'
+          },
+          appearance: "cta",
+          width: 20,
+          height: 20,
+          iconWidth: 13,
+          iconHeight: 13,
+          label: _this.props.actionLable[action],
+          icon: column.valueIconMap && column.valueIconMap[action] ? column.valueIconMap[action] : _permissionIconMap["default"][action],
+          onClick: function onClick(e) {
+            return _this.actionClickEvents(e, action, idx);
+          }
+        });
+      }), elements.remaining.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "more-action-holder"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "more-action-icon"
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "more-ver",
+        width: 3,
+        height: 13,
+        theme: _this.props.theme
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "more-action-list-box"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "more-action-list"
+      }, elements.remaining.map(function (action, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "action-item-btn nested",
+          key: i,
+          onClick: function onClick(e) {
+            return _this.actionClickEvents(e, action, idx);
+          }
+        }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+          theme: _this.props.theme,
+          name: column.valueIconMap && column.valueIconMap[action] ? column.valueIconMap[action] : _permissionIconMap["default"][action],
+          width: 14,
+          height: 14
+        })), /*#__PURE__*/_react["default"].createElement("div", null, _this.props.actionLable && _this.props.actionLable[action]));
+      }))))) : null);
+    });
+    (0, _defineProperty2["default"])(_this, "defaultCellRenderer", function (item, column, idx) {
       var tableLoading = _this.props.tableLoading;
-
       switch (column.type) {
         case 'video_src':
           {
-            return _react2.default.createElement('div', {}, _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'span',
-                { className: 'video-button-box' },
-                _react2.default.createElement(_button2.default, {
-                  theme: _this.props.theme,
-                  onClick: function onClick(e) {
-                    _this.videoPlayBtnClickHandler(e, idx, item[column.field]);
-                  },
-                  appearance: 'cta',
-                  icon: 'play',
-                  display: 'rounded',
-                  width: 25,
-                  height: 25,
-                  iconWidth: 8,
-                  iconHeight: 10
-                })
-              )
-            ));
+            return /*#__PURE__*/_react["default"].createElement('div', {}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+              className: "video-button-box"
+            }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+              theme: _this.props.theme,
+              onClick: function onClick(e) {
+                _this.videoPlayBtnClickHandler(e, idx, item[column.field]);
+              },
+              appearance: "cta",
+              icon: "play",
+              display: "rounded",
+              width: 25,
+              height: 25,
+              iconWidth: 8,
+              iconHeight: 10
+            }))));
           }
-
         case 'extra_columns':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+              return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                height: "16px",
+                width: "100%"
+              });
             } else {
-              return _react2.default.createElement('div', {
+              return /*#__PURE__*/_react["default"].createElement('div', {
                 onClick: function onClick(e) {
                   _this.toggleExtraDetails(e, idx);
                 }
-              }, _react2.default.createElement(
-                'div',
-                { className: _this.state.showExtraRow === idx ? 'show-row' : 'hide-row' },
-                _react2.default.createElement(
-                  'span',
-                  { className: 'open-close-extra' },
-                  _react2.default.createElement(_icon2.default, {
-                    theme: _this.props.theme,
-                    name: 'chevron-down',
-                    width: 12,
-                    height: 10,
-                    color: _tokens.colors[_this.props.theme].table.tdColor
-                  })
-                )
-              ));
+              }, /*#__PURE__*/_react["default"].createElement("div", {
+                className: _this.state.showExtraRow === idx ? 'show-row' : 'hide-row'
+              }, /*#__PURE__*/_react["default"].createElement("span", {
+                className: "open-close-extra"
+              }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+                theme: _this.props.theme,
+                name: "chevron-down",
+                width: 12,
+                height: 10,
+                color: _tokens.colors[_this.props.theme].table.tdColor
+              }))));
             }
           }
         /**
@@ -362,23 +263,25 @@ var Table = function (_Component) {
         case 'link_text':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+              return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                height: "16px",
+                width: "100%"
+              });
             } else {
               if (item.actions === undefined) {
-                return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+                return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                  height: "16px",
+                  width: "100%"
+                });
               } else {
                 var isPlayable = Array.isArray(item.actions) ? item.actions.includes("play") : false;
-                return _react2.default.createElement(
-                  'div',
-                  {
-                    className: 'text-box ' + (isPlayable ? 'asset-play' : ''),
-                    title: item[column.field],
-                    onClick: function onClick(e) {
-                      return isPlayable ? _this.actionClickEvents(e, 'play', idx) : e.preventDefault();
-                    }
-                  },
-                  item[column.field].toString()
-                );
+                return /*#__PURE__*/_react["default"].createElement("div", {
+                  className: "text-box ".concat(isPlayable ? 'asset-play' : ''),
+                  title: item[column.field],
+                  onClick: function onClick(e) {
+                    return isPlayable ? _this.actionClickEvents(e, 'play', idx) : e.preventDefault();
+                  }
+                }, item[column.field].toString());
               }
             }
           }
@@ -388,70 +291,78 @@ var Table = function (_Component) {
         case 'link_field':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+              return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                height: "16px",
+                width: "100%"
+              });
             } else {
               var _isPlayable = true;
-              return _react2.default.createElement(
-                'div',
-                {
-                  className: 'text-box ' + (_isPlayable ? 'asset-play' : ''),
-                  title: item[column.field],
-                  onClick: function onClick(e) {
-                    return _isPlayable ? _this.actionClickEvents(e, 'play', idx) : e.preventDefault();
-                  }
-                },
-                item[column.field].toString()
-              );
+              return /*#__PURE__*/_react["default"].createElement("div", {
+                className: "text-box ".concat(_isPlayable ? 'asset-play' : ''),
+                title: item[column.field],
+                onClick: function onClick(e) {
+                  return _isPlayable ? _this.actionClickEvents(e, 'play', idx) : e.preventDefault();
+                }
+              }, item[column.field].toString());
             }
           }
-
         case 'action_icon':
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+            return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+              height: "16px",
+              width: "100%"
+            });
           } else {
             return _this.actionElements(item, column, idx);
           }
-
         case 'avatar':
           return _this.getAvatar(item[column.field]);
-
         case 'date':
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+            return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+              height: "16px",
+              width: "100%"
+            });
           } else {
-            return _react2.default.createElement(
-              'div',
-              { className: 'text-box', style: { whiteSpace: 'nowrap' } },
-              item[column.field] ? _dateTime2.default.toDateString(new Date(item[column.field]), 'DD/MM/YYYY') : null
-            );
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              className: "text-box",
+              style: {
+                whiteSpace: 'nowrap'
+              }
+            }, item[column.field] ? _dateTime["default"].toDateString(new Date(item[column.field]), 'DD/MM/YYYY') : null);
           }
-
         case 'time':
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+            return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+              height: "16px",
+              width: "100%"
+            });
           } else {
-            return _react2.default.createElement(
-              'div',
-              { className: 'text-box', style: { whiteSpace: 'nowrap' } },
-              item[column.field] ? _dateTime2.default.toTimeString(new Date(item[column.field]), 'HH:MM AP') : null
-            );
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              className: "text-box",
+              style: {
+                whiteSpace: 'nowrap'
+              }
+            }, item[column.field] ? _dateTime["default"].toTimeString(new Date(item[column.field]), 'HH:MM AP') : null);
           }
-
         case 'datetime':
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+            return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+              height: "16px",
+              width: "100%"
+            });
           } else {
-            return _react2.default.createElement(
-              'div',
-              { className: 'text-box', style: { whiteSpace: 'nowrap' } },
-              item[column.field] ? _dateTime2.default.toDateTimeString(new Date(item[column.field])) : null
-            );
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              className: "text-box",
+              style: {
+                whiteSpace: 'nowrap'
+              }
+            }, item[column.field] ? _dateTime["default"].toDateTimeString(new Date(item[column.field])) : null);
           }
-
         case 'icon':
           if (item[column.field] && Array.isArray(item[column.field])) {
             return item[column.field].map(function (iconItem) {
-              return _react2.default.createElement(_icon2.default, {
+              return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
                 theme: _this.props.theme,
                 name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
                 width: 18,
@@ -461,124 +372,111 @@ var Table = function (_Component) {
             });
           }
           return null;
-
         case 'icon_circle':
           if (item[column.field] && Array.isArray(item[column.field])) {
             return item[column.field].map(function (iconItem) {
-              return _react2.default.createElement(
-                'div',
-                {
-                  className: 'icon-circle',
-                  style: {
-                    background: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].background ? column.iconColorMap[iconItem].background : _tokens.colors[_this.props.theme].table.titleBackgroundColor
-                  }
-                  //   style={{
-                  //     background:
-                  //       column.iconColorMap &&
-                  //       column.iconColorMap[iconItem] &&
-                  //       column.iconColorMap[iconItem].background
-                  //         ? column.iconColorMap[iconItem].background
-                  //         : this.props.theme == 'nexc'
-                  //         ? '#60BEF8'
-                  //         : '#00cec6'
-                  //   }}
-                },
-                _react2.default.createElement(_icon2.default, {
-                  theme: _this.props.theme,
-                  name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
-                  width: 14,
-                  height: 14,
-                  color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color : '#FFF'
-                })
-              );
+              return /*#__PURE__*/_react["default"].createElement("div", {
+                className: "icon-circle",
+                style: {
+                  background: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].background ? column.iconColorMap[iconItem].background : _tokens.colors[_this.props.theme].table.titleBackgroundColor
+                }
+                //   style={{
+                //     background:
+                //       column.iconColorMap &&
+                //       column.iconColorMap[iconItem] &&
+                //       column.iconColorMap[iconItem].background
+                //         ? column.iconColorMap[iconItem].background
+                //         : this.props.theme == 'nexc'
+                //         ? '#60BEF8'
+                //         : '#00cec6'
+                //   }}
+              }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+                theme: _this.props.theme,
+                name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
+                width: 14,
+                height: 14,
+                color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color : '#FFF'
+              }));
             });
           }
           return null;
-
         case 'label':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+              return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                height: "16px",
+                width: "100%"
+              });
             } else {
               if (item[column.field] || column.percentageField && column.percentageField.field && item[column.percentageField.field]) {
-                return _react2.default.createElement(
-                  _label2.default,
-                  {
-                    percentageStatus: column.percentageField && column.percentageField.field && item[column.percentageField.field],
-                    percentageField: column.percentageField,
-                    status: item[column.field]
-                  },
-                  item[column.field]
-                );
+                return /*#__PURE__*/_react["default"].createElement(_label["default"], {
+                  percentageStatus: column.percentageField && column.percentageField.field && item[column.percentageField.field],
+                  percentageField: column.percentageField,
+                  status: item[column.field]
+                }, item[column.field]);
               }
             }
-
             return null;
           }
-
         case 'dubbing_status':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+              return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                height: "16px",
+                width: "100%"
+              });
             } else {
               if (item[column.field] && Array.isArray(item[column.field])) {
-                return _react2.default.createElement(
-                  DubbingStatusStyles,
-                  { theme: _this.props.theme },
-                  item[column.field].map(function (el) {
-                    return _react2.default.createElement(
-                      'div',
-                      { className: 'detail-block', key: el.language },
-                      _react2.default.createElement('div', { className: 'status-color ' + el.review_status.toLowerCase() }),
-                      _react2.default.createElement(
-                        'p',
-                        { className: 'language-name' },
-                        el.language
-                      )
-                    );
-                  })
-                );
+                return /*#__PURE__*/_react["default"].createElement(DubbingStatusStyles, {
+                  theme: _this.props.theme
+                }, item[column.field].map(function (el) {
+                  return /*#__PURE__*/_react["default"].createElement("div", {
+                    className: "detail-block",
+                    key: el.language
+                  }, /*#__PURE__*/_react["default"].createElement("div", {
+                    className: "status-color ".concat(el.review_status.toLowerCase())
+                  }), /*#__PURE__*/_react["default"].createElement("p", {
+                    className: "language-name"
+                  }, el.language));
+                }));
               }
             }
             break;
           }
-
         case 'rowChecked':
           {
             if (tableLoading) {
-              return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+              return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+                height: "16px",
+                width: "100%"
+              });
             } else {
-              return _react2.default.createElement(
-                'div',
-                {
-                  onClick: function onClick(e) {
-                    _this.rowCheckChange(e, !item.rowChecked, item, idx);
-                  }
-                },
-                _react2.default.createElement('input', { checked: item.rowChecked ? true : false, type: 'checkbox' }),
-                _react2.default.createElement(
-                  'label',
-                  null,
-                  _react2.default.createElement('span', null)
-                )
-              );
+              return /*#__PURE__*/_react["default"].createElement("div", {
+                onClick: function onClick(e) {
+                  _this.rowCheckChange(e, !item.rowChecked, item, idx);
+                }
+              }, /*#__PURE__*/_react["default"].createElement("input", {
+                checked: item.rowChecked ? true : false,
+                type: "checkbox"
+              }), /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement("span", null)));
             }
           }
-
         default:
           if (tableLoading) {
-            return _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100%' });
+            return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+              height: "16px",
+              width: "100%"
+            });
           } else {
             if (typeof item[column.field] === 'string' || typeof item[column.field] === 'number' || Array.isArray(item[column.field])) {
               var className = 'text-box';
               if (item[column.field]) {
                 className = className + ' text-' + item[column.field].toString().toLowerCase().split(' ').join('');
               }
-              return _react2.default.createElement(
-                'div',
-                { className: className, title: item[column.field] },
-                item[column.field].toString()
-              );
+              return /*#__PURE__*/_react["default"].createElement("div", {
+                className: className,
+                title: item[column.field]
+              }, item[column.field].toString());
             }
             if (item[column.field]) {
               return item[column.field];
@@ -603,55 +501,34 @@ var Table = function (_Component) {
        * </div>
        *   )
        */
-    };
-
-    _this.getActionArrayOfString = function (jsonObj) {
+    });
+    (0, _defineProperty2["default"])(_this, "getActionArrayOfString", function (jsonObj) {
       var arrObj = [];
       Object.keys(jsonObj).forEach(function (k) {
         if (jsonObj[k]) {
           arrObj.push(k);
         }
       });
-
       return arrObj;
-    };
-
-    _this.getAvatar = function (data) {
+    });
+    (0, _defineProperty2["default"])(_this, "getAvatar", function (data) {
       var returnDom = null;
       if (data && data.user_image && data.user_image !== '') {
-        returnDom = _react2.default.createElement(
-          'div',
-          null,
-          'image'
-        );
+        returnDom = /*#__PURE__*/_react["default"].createElement("div", null, "image");
       } else {
-        returnDom = data && data.name ? _react2.default.createElement(
-          'div',
-          null,
-          _react2.default.createElement(
-            'div',
-            { className: 'initial-placeholder', title: data.name },
-            data.name ? data.name.split(' ')[0] ? data.name.split(' ')[1] ? data.name.split(' ')[0][0] + '' + data.name.split(' ')[1][0] : data.name.split(' ')[0][0] : null : null
-          ),
-          _react2.default.createElement(
-            'div',
-            { className: 'avatar-details' },
-            'FUll NAme ',
-            _react2.default.createElement('br', null),
-            'email@address.com'
-          )
-        ) : null;
+        returnDom = data && data.name ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "initial-placeholder",
+          title: data.name
+        }, data.name ? data.name.split(' ')[0] ? data.name.split(' ')[1] ? data.name.split(' ')[0][0] + '' + data.name.split(' ')[1][0] : data.name.split(' ')[0][0] : null : null), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "avatar-details"
+        }, "FUll NAme ", /*#__PURE__*/_react["default"].createElement("br", null), "email@address.com")) : null;
       }
-
-      return _react2.default.createElement(
-        AvatarBox,
-        { className: 'avatar-box' },
-        returnDom
-      );
-    };
-
-    _this.showCloumnCheckChange = function (field, isChecked) {
-      var colsSelected = [].concat(_toConsumableArray(_this.state.showColumnArr));
+      return /*#__PURE__*/_react["default"].createElement(AvatarBox, {
+        className: "avatar-box"
+      }, returnDom);
+    });
+    (0, _defineProperty2["default"])(_this, "showCloumnCheckChange", function (field, isChecked) {
+      var colsSelected = (0, _toConsumableArray2["default"])(_this.state.showColumnArr);
       if (isChecked) {
         colsSelected.push(field);
       } else {
@@ -660,35 +537,43 @@ var Table = function (_Component) {
           colsSelected.splice(colsSelected.indexOf(field), 1);
         }
       }
-
       _this.setState({
         showColumnArr: colsSelected
       });
-    };
-
-    _this.handleInputChange = function (text) {
+    });
+    /**
+     * This function hadles the onchange event for search input field
+     * @param {string} text Input Filed value
+     */
+    (0, _defineProperty2["default"])(_this, "handleInputChange", function (text) {
       _this.setState({
         searchedText: text
       });
       _this.handleDebounce(text);
-    };
-
-    _this.resetSearchTextAndFilters = function () {
+    });
+    /**
+     * This function reset Search & filters.
+     */
+    (0, _defineProperty2["default"])(_this, "resetSearchTextAndFilters", function () {
       _this.handleInputChange('');
       _this._filterRef && _this._filterRef.current && this_filterRef.current.resetSelectedUserFilter();
-    };
-
-    _this.handleDebounce = (0, _lodash.debounce)(function (text) {
+    });
+    /**
+     * This function triggers API call with the text as searched keyword
+     * @param {string} text the searched text
+     */
+    (0, _defineProperty2["default"])(_this, "handleDebounce", (0, _lodash.debounce)(function (text) {
       var getSearchedRows = _this.props.getSearchedRows;
-
       getSearchedRows(text);
-    }, 250);
-
-    _this.tableOperation = function (operation) {
+    }, 250));
+    /**
+     * This function performs operations on the table based on type.
+     * @param {string} operation the operation that need to be performed
+     */
+    (0, _defineProperty2["default"])(_this, "tableOperation", function (operation) {
       var _this$props = _this.props,
-          refreshDashboard = _this$props.refreshDashboard,
-          getSearchedRows = _this$props.getSearchedRows;
-
+        refreshDashboard = _this$props.refreshDashboard,
+        getSearchedRows = _this$props.getSearchedRows;
       _this.setState({
         searchedText: ''
       });
@@ -701,17 +586,16 @@ var Table = function (_Component) {
           getSearchedRows('');
           break;
       }
-    };
-
+    });
     _this.columns = _this.getColumns(props);
     var spiltColumns = _this.spiltColumns();
-
     _this.state = {
       items: _this.getDisplayedItems(_this.columns, props.items),
       originalRows: props.items,
       defaultShowColumns: spiltColumns.defaultShowColumns,
       extraColumns: spiltColumns.extraColumns,
-      nestedTable: spiltColumns.nestedTable, // especially for dubbing
+      nestedTable: spiltColumns.nestedTable,
+      // especially for dubbing
       selectedRows: [],
       showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : [],
       isAllRowsSelected: false,
@@ -721,9 +605,9 @@ var Table = function (_Component) {
     };
     return _this;
   }
-
-  _createClass(Table, [{
-    key: 'componentDidUpdate',
+  (0, _inherits2["default"])(Table, _Component);
+  return (0, _createClass2["default"])(Table, [{
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (prevState.items !== this.state.items) {
         this.setState({
@@ -738,7 +622,7 @@ var Table = function (_Component) {
       }
     }
   }, {
-    key: 'toggleExtraDetails',
+    key: "toggleExtraDetails",
     value: function toggleExtraDetails(e, idx) {
       if (this.state.showExtraRow !== idx) {
         this.setState({
@@ -749,22 +633,15 @@ var Table = function (_Component) {
           showExtraRow: null
         });
       }
-
       this.props.onToggleExtraDetails(e, idx);
     }
   }, {
-    key: 'videoPlayBtnClickHandler',
+    key: "videoPlayBtnClickHandler",
     value: function videoPlayBtnClickHandler(e, idx, videoObj) {
       this.props.onVideoPlayClick(e, idx, videoObj);
     }
-
-    // actions onClick event
-
-
-    // actions elements
-
   }, {
-    key: 'componentWillReceiveProps',
+    key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(newProps) {
       this.setState({
         showExtraRow: null
@@ -790,33 +667,29 @@ var Table = function (_Component) {
       this.forceUpdate();
     }
   }, {
-    key: 'getColumns',
+    key: "getColumns",
     value: function getColumns(props) {
-      return _react2.default.Children.toArray(props.children).map(function (element) {
+      return _react["default"].Children.toArray(props.children).map(function (element) {
         return element.props;
       });
     }
   }, {
-    key: 'getDisplayedItems',
+    key: "getDisplayedItems",
     value: function getDisplayedItems(columns, allItems) {
-      var items = [].concat(_toConsumableArray(allItems));
+      var items = (0, _toConsumableArray2["default"])(allItems);
       var sortColumn = columns.find(function (column) {
         return column.sort;
       });
-
       if (!sortColumn || items.length === 0) return items;
-
       var comparator = sortColumn.comparator || this.guessComparator(items[0], sortColumn);
       items.sort(function (row1, row2) {
         return comparator(sortColumn, row1, row2);
       });
-
       if (sortColumn.sort === 'desc') items.reverse();
-
       return items;
     }
   }, {
-    key: 'guessComparator',
+    key: "guessComparator",
     value: function guessComparator(firstItem, sortColumn) {
       // If a comparator isn't specified, try to guess based on the type of the data.
       var sampleValue = firstItem[sortColumn.field];
@@ -828,9 +701,8 @@ var Table = function (_Component) {
      * @param {array of selected asset items} array
      * @returns array of all actions common b/w selected items
      */
-
   }, {
-    key: 'findCommon',
+    key: "findCommon",
     value: function findCommon(array) {
       if (array.length === 0) {
         return [];
@@ -849,19 +721,17 @@ var Table = function (_Component) {
      * @param {index of selected item} indexesToRemove
      * @returns
      */
-
   }, {
-    key: 'removeObjects',
+    key: "removeObjects",
     value: function removeObjects(arr, indexesToRemove) {
       return arr.filter(function (obj, index) {
         return indexesToRemove.includes(index);
       });
     }
   }, {
-    key: 'execute',
+    key: "execute",
     value: function execute(allChecked) {
       var _this2 = this;
-
       if (allChecked) {
         this.state.items.map(function (itemSelectedRows, i) {
           itemSelectedRows.rowChecked = true;
@@ -899,22 +769,19 @@ var Table = function (_Component) {
       }
     }
   }, {
-    key: 'rowCheckChange',
+    key: "rowCheckChange",
     value: function rowCheckChange(e, value, item, idx) {
-      var _state = this.state,
-          items = _state.items,
-          selectedRows = _state.selectedRows;
-
+      var _this$state = this.state,
+        items = _this$state.items,
+        selectedRows = _this$state.selectedRows;
       if (selectedRows.length == items.length - 1 && value === true) {
         this.execute(true);
       } else {
-        var _props = this.props,
-            dashboard_common_actions = _props.dashboard_common_actions,
-            common_actions = _props.common_actions;
-
+        var _this$props2 = this.props,
+          dashboard_common_actions = _this$props2.dashboard_common_actions,
+          common_actions = _this$props2.common_actions;
         var table = e.target.closest('table');
         var checkboxNodes = table.querySelectorAll('thead tr th input[type="checkbox"]');
-
         if (value) {
           items.map(function (itemSelectedRows, i) {
             if (idx === i) {
@@ -922,7 +789,6 @@ var Table = function (_Component) {
             }
             return itemSelectedRows;
           });
-
           var selected_row_items = this.removeObjects(items, selectedRows);
           selected_row_items = selected_row_items.concat(items[idx]);
           var arrayIngestDbId = selected_row_items.map(function (ele) {
@@ -962,14 +828,11 @@ var Table = function (_Component) {
             }
             return itemSelectedRows;
           });
-
           var arrOfSelected = selectedRows;
           var idxOfSelected = arrOfSelected.indexOf(idx);
-
           if (idxOfSelected >= 0) {
             arrOfSelected.splice(idxOfSelected, 1);
           }
-
           var _selected_row_items = this.removeObjects(items, arrOfSelected);
           var _arrayIngestDbId = _selected_row_items.map(function (ele) {
             return ele.ingest_db_id;
@@ -979,7 +842,6 @@ var Table = function (_Component) {
            * finalAns is an array of all selected asset items common Actions
            */
           var _finalAns = this.findCommon(_selected_row_items);
-
           if (_finalAns.length != 0) {
             var _intersectionDashboardCommonActions = common_actions.filter(function (item) {
               return _finalAns.includes(item);
@@ -997,24 +859,23 @@ var Table = function (_Component) {
               ingestedDbIdArray: _arrayIngestDbId
             });
           }
-
           this.setState({
             selectedRows: arrOfSelected,
             isAllRowsSelected: false
-            // () => {
-            //   this.setState({
-            //     isAllRowsSelected: false,
-            //   })
-            // }
-          });
+          }
+          // () => {
+          //   this.setState({
+          //     isAllRowsSelected: false,
+          //   })
+          // }
+          );
         }
       }
     }
   }, {
-    key: 'allRowCheckChange',
+    key: "allRowCheckChange",
     value: function allRowCheckChange(e, value) {
       var _this3 = this;
-
       /*
        * var table = e.target.parentNode.parentNode.parentNode.parentNode.parentNode
        * console.log(table );
@@ -1036,7 +897,6 @@ var Table = function (_Component) {
           return itemSelectedRows;
           // }
         });
-
         this.setState(function (prevState) {
           return {
             selectedRows: _this3.props.items.map(function (item, idx) {
@@ -1061,7 +921,6 @@ var Table = function (_Component) {
           return itemSelectedRows;
           // }
         });
-
         this.setState(function (prevState) {
           return {
             selectedRows: [],
@@ -1072,596 +931,415 @@ var Table = function (_Component) {
         });
       }
     }
-
-    /**
-     * This function hadles the onchange event for search input field
-     * @param {string} text Input Filed value
-     */
-
-
-    /**
-     * This function reset Search & filters.
-     */
-
-
-    /**
-     * This function triggers API call with the text as searched keyword
-     * @param {string} text the searched text
-     */
-
-
-    /**
-     * This function performs operations on the table based on type.
-     * @param {string} operation the operation that need to be performed
-     */
-
   }, {
-    key: 'refreshClicked',
+    key: "refreshClicked",
     value: function refreshClicked() {
       this.props.tableLoadingActionFunc(true);
-      return getTableData({ page: 1 }, false, true);
+      return getTableData({
+        page: 1
+      }, false, true);
     }
   }, {
-    key: 'tableLoadingFirst',
+    key: "tableLoadingFirst",
     value: function tableLoadingFirst() {
       var divArray = new Array(15).fill(null);
-      return _react2.default.createElement(
-        'div',
-        null,
-        divArray.map(function (_, index) {
-          return _react2.default.createElement(
-            'div',
-            {
-              style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: '15px'
-              }
-            },
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '110px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '110px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '120px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '110px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '100px' }),
-            _react2.default.createElement(_Shimmer2.default, { height: '16px', width: '50px' })
-          );
-        })
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", null, divArray.map(function (_, index) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '15px'
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "100px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "110px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "110px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "120px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "100px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "110px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "100px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "100px"
+        }), /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+          height: "16px",
+          width: "50px"
+        }));
+      }));
     }
   }, {
-    key: 'returnTableStatus',
+    key: "returnTableStatus",
     value: function returnTableStatus() {
       if (this.props.tableLoading && !this.props.tableLoadingAction) {
-        return _react2.default.createElement(
-          'div',
-          { style: { padding: '10px' } },
-          this.tableLoadingFirst()
-        );
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            padding: '10px'
+          }
+        }, this.tableLoadingFirst());
       } else {
         if (this.state.items.length == 0) {
           if (this.props.tableLoading === false) {
-            return _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                Table.Element,
-                this.props,
-                _react2.default.createElement(Table.Header, {
-                  theme: this.props.theme,
-                  columns: this.defaultShowColumns,
-                  selectedColumns: this.state.showColumnArr,
-                  onSort: this.props.onSort
-                })
-              ),
-              _react2.default.createElement(_TableErrorScreen2.default, null)
-            );
+            return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Table.Element, this.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+              theme: this.props.theme,
+              columns: this.defaultShowColumns,
+              selectedColumns: this.state.showColumnArr,
+              onSort: this.props.onSort
+            })), /*#__PURE__*/_react["default"].createElement(_TableErrorScreen["default"], null));
           } else {
-            return _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                Table.Element,
-                this.props,
-                _react2.default.createElement(Table.Header, {
-                  theme: this.props.theme,
-                  columns: this.defaultShowColumns,
-                  selectedColumns: this.state.showColumnArr,
-                  onSort: this.props.onSort
-                })
-              ),
-              _react2.default.createElement(
-                'div',
-                { style: { padding: '10px' } },
-                this.tableLoadingFirst()
-              ),
-              ';'
-            );
+            return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Table.Element, this.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+              theme: this.props.theme,
+              columns: this.defaultShowColumns,
+              selectedColumns: this.state.showColumnArr,
+              onSort: this.props.onSort
+            })), /*#__PURE__*/_react["default"].createElement("div", {
+              style: {
+                padding: '10px'
+              }
+            }, this.tableLoadingFirst()), ";");
           }
         }
       }
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this4 = this;
-
-      var _props2 = this.props,
-          theme = _props2.theme,
-          refreshDashboard = _props2.refreshDashboard,
-          isRefreshActivated = _props2.isRefreshActivated,
-          isRefreshDotVisible = _props2.isRefreshDotVisible,
-          showSearchBox = _props2.showSearchBox,
-          showTableHeader = _props2.showTableHeader,
-          pageDropdown = _props2.pageDropdown,
-          getTableData = _props2.getTableData,
-          downloadAvailable = _props2.downloadAvailable,
-          tableLoading = _props2.tableLoading,
-          tableLoadingAction = _props2.tableLoadingAction,
-          filtersStructure = _props2.filtersStructure,
-          dropDownHandle = _props2.dropDownHandle,
-          downloadHandle = _props2.downloadHandle;
-      var _state2 = this.state,
-          nestedTable = _state2.nestedTable,
-          searchedText = _state2.searchedText,
-          items = _state2.items;
-
+      var _this$props3 = this.props,
+        theme = _this$props3.theme,
+        refreshDashboard = _this$props3.refreshDashboard,
+        isRefreshActivated = _this$props3.isRefreshActivated,
+        isRefreshDotVisible = _this$props3.isRefreshDotVisible,
+        showSearchBox = _this$props3.showSearchBox,
+        showTableHeader = _this$props3.showTableHeader,
+        pageDropdown = _this$props3.pageDropdown,
+        getTableData = _this$props3.getTableData,
+        downloadAvailable = _this$props3.downloadAvailable,
+        tableLoading = _this$props3.tableLoading,
+        tableLoadingAction = _this$props3.tableLoadingAction,
+        filtersStructure = _this$props3.filtersStructure,
+        dropDownHandle = _this$props3.dropDownHandle,
+        downloadHandle = _this$props3.downloadHandle;
+      var _this$state2 = this.state,
+        nestedTable = _this$state2.nestedTable,
+        searchedText = _this$state2.searchedText,
+        items = _this$state2.items;
       var rows = this.state.items.map(function (item, index) {
-        return _react2.default.createElement(
-          _react2.default.Fragment,
-          { key: index },
-          _react2.default.createElement(
-            Table.Row,
-            {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          key: index
+        }, /*#__PURE__*/_react["default"].createElement(Table.Row, {
+          theme: _this4.props.theme,
+          key: index,
+          className: item.rowChecked ? 'selected-row ' + (item._divider_ ? 'divider-row' : '') : item._divider_ ? 'divider-row' : ''
+        }, _this4.defaultShowColumns.map(function (column) {
+          var cellRenderer = column.children || _this4.defaultCellRenderer;
+          if (_this4.state.showColumnArr.indexOf(column.field) > -1) {
+            return /*#__PURE__*/_react["default"].createElement(Table.Cell, {
+              className: "table-cell",
               theme: _this4.props.theme,
-              key: index,
-              className: item.rowChecked ? 'selected-row ' + (item._divider_ ? 'divider-row' : '') : item._divider_ ? 'divider-row' : ''
-            },
-            _this4.defaultShowColumns.map(function (column) {
-              var cellRenderer = column.children || _this4.defaultCellRenderer;
-              if (_this4.state.showColumnArr.indexOf(column.field) > -1) {
-                return _react2.default.createElement(
-                  Table.Cell,
-                  {
-                    className: 'table-cell',
-                    theme: _this4.props.theme,
-                    key: index + column.title + Math.random(),
-                    maxWidth: column.maxWidth,
-                    column: {
-                      column: column,
-                      width: column.field === 'extra_columns' ? '40px' : 'auto'
-                    }
-                  },
-                  cellRenderer(item, column, index)
-                );
+              key: index + column.title + Math.random(),
+              maxWidth: column.maxWidth,
+              column: {
+                column: column,
+                width: column.field === 'extra_columns' ? '40px' : 'auto'
               }
-            })
-          ),
-          _this4.state.showExtraRow === index ? _react2.default.createElement(
-            Table.Row,
-            { theme: _this4.props.theme, key: 'row-' + index + 'extra' },
-            _react2.default.createElement(
-              Table.Cell,
-              {
-                className: 'table-inner-cell',
-                theme: _this4.props.theme,
-                column: {},
-                colSpan: _this4.props.maxShowNoOfColumns + 1
-                // className="tableHolder"
-              },
-              nestedTable.length > 0 && item[nestedTable[0].field].rows.length > 0 ? _react2.default.createElement(
-                Table.Card,
-                { theme: _this4.props.theme, width: '100%' },
-                _react2.default.createElement(
-                  TableInner.Element,
-                  { theme: _this4.props.theme, className: 'nested-table' },
-                  _react2.default.createElement(Table.Header, {
-                    theme: _this4.props.theme,
-                    columns: item[nestedTable[0].field].column_elements,
-                    selectedColumns: item[nestedTable[0].field].column_elements.map(function (column) {
-                      return column.field;
-                    })
-                  }),
-                  item[nestedTable[0].field].rows.map(function (element, i) {
-                    return _react2.default.createElement(
-                      Table.Body,
-                      { theme: _this4.props.theme, key: 'nested-table-' + i },
-                      _react2.default.createElement(
-                        'tr',
-                        null,
-                        item[nestedTable[0].field].column_elements.map(function (inner) {
-                          var cellRenderer = inner.children || _this4.defaultCellRenderer;
-                          return _react2.default.createElement(
-                            TableInner.Cell,
-                            {
-                              theme: _this4.props.theme,
-                              key: inner.title + 'n',
-                              column: inner
-                            },
-                            cellRenderer(element, inner, i)
-                          );
-                        })
-                      )
-                    );
-                  })
-                )
-              ) : null,
-              _react2.default.createElement(
-                Table.Card,
-                _extends({}, _this4.props, { width: '100%' }),
-                _react2.default.createElement(
-                  TableInner.Element,
-                  _this4.props,
-                  _react2.default.createElement(Table.Header, {
-                    theme: _this4.props.theme,
-                    columns: _this4.extraColumns,
-                    selectedColumns: _this4.extraColumns.map(function (column) {
-                      return column.field;
-                    })
-                    // displayAs="extraDetails"
-                    , onSort: _this4.props.onSort
-                  }),
-                  _react2.default.createElement(
-                    Table.Body,
-                    null,
-                    _react2.default.createElement(
-                      Table.Row,
-                      { theme: _this4.props.theme, key: 'row-' + index + 'child' },
-                      _this4.extraColumns.map(function (column) {
-                        var cellRenderer = column.children || _this4.defaultCellRenderer;
-                        return _react2.default.createElement(
-                          TableInner.Cell,
-                          {
-                            theme: _this4.props.theme,
-                            key: column.title + 'c',
-                            column: column
-                          },
-                          cellRenderer(item, column, index)
-                        );
-                      })
-                    )
-                  )
-                )
-              )
-            )
-          ) : null
-        );
+            }, cellRenderer(item, column, index));
+          }
+        })), _this4.state.showExtraRow === index ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
+          theme: _this4.props.theme,
+          key: 'row-' + index + 'extra'
+        }, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
+          className: "table-inner-cell",
+          theme: _this4.props.theme,
+          column: {},
+          colSpan: _this4.props.maxShowNoOfColumns + 1
+          // className="tableHolder"
+        }, nestedTable.length > 0 && item[nestedTable[0].field].rows.length > 0 ? /*#__PURE__*/_react["default"].createElement(Table.Card, {
+          theme: _this4.props.theme,
+          width: "100%"
+        }, /*#__PURE__*/_react["default"].createElement(TableInner.Element, {
+          theme: _this4.props.theme,
+          className: "nested-table"
+        }, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+          theme: _this4.props.theme,
+          columns: item[nestedTable[0].field].column_elements,
+          selectedColumns: item[nestedTable[0].field].column_elements.map(function (column) {
+            return column.field;
+          })
+        }), item[nestedTable[0].field].rows.map(function (element, i) {
+          return /*#__PURE__*/_react["default"].createElement(Table.Body, {
+            theme: _this4.props.theme,
+            key: "nested-table-".concat(i)
+          }, /*#__PURE__*/_react["default"].createElement("tr", null, item[nestedTable[0].field].column_elements.map(function (inner) {
+            var cellRenderer = inner.children || _this4.defaultCellRenderer;
+            return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
+              theme: _this4.props.theme,
+              key: inner.title + 'n',
+              column: inner
+            }, cellRenderer(element, inner, i));
+          })));
+        }))) : null, /*#__PURE__*/_react["default"].createElement(Table.Card, (0, _extends2["default"])({}, _this4.props, {
+          width: "100%"
+        }), /*#__PURE__*/_react["default"].createElement(TableInner.Element, _this4.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+          theme: _this4.props.theme,
+          columns: _this4.extraColumns,
+          selectedColumns: _this4.extraColumns.map(function (column) {
+            return column.field;
+          })
+          // displayAs="extraDetails"
+          ,
+          onSort: _this4.props.onSort
+        }), /*#__PURE__*/_react["default"].createElement(Table.Body, null, /*#__PURE__*/_react["default"].createElement(Table.Row, {
+          theme: _this4.props.theme,
+          key: 'row-' + index + 'child'
+        }, _this4.extraColumns.map(function (column) {
+          var cellRenderer = column.children || _this4.defaultCellRenderer;
+          return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
+            theme: _this4.props.theme,
+            key: column.title + 'c',
+            column: column
+          }, cellRenderer(item, column, index));
+        }))))))) : null);
       });
-
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        showTableHeader && _react2.default.createElement(
-          Table.Title,
-          {
-            style: {
-              display: 'flex'
-            },
-            className: 'table-title-holder',
-            theme: this.props.theme
-          },
-          _react2.default.createElement(
-            'div',
-            { className: 'table-title' },
-            _react2.default.createElement(
-              'p',
-              null,
-              this.props.tableTitle
-            )
-          ),
-          _react2.default.createElement(
-            _react2.default.Fragment,
-            null,
-            tableLoading && !tableLoadingAction && _react2.default.createElement(
-              TableTitleLoadingInitial,
-              { theme: this.props.theme },
-              _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '150px' })
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'title-right-area' },
-              showSearchBox && (!tableLoading || tableLoading && tableLoadingAction) && _react2.default.createElement(
-                SearchContainer,
-                { theme: this.props.theme },
-                _react2.default.createElement(
-                  'span',
-                  { className: 'search-icon-wrapper' },
-                  _react2.default.createElement(_icon2.default, { name: 'search', width: 12, height: 12, color: '#999999' })
-                ),
-                _react2.default.createElement(_inputText2.default, {
-                  className: 'input-field',
-                  label: 'Search',
-                  value: searchedText,
-                  onChange: function onChange(e) {
-                    _this4.props.tableLoadingActionFunc(true);
-                    _this4.handleInputChange(e.target.value);
-                  }
-                }),
-                searchedText && searchedText.length && _react2.default.createElement(
-                  'span',
-                  {
-                    className: 'close-icon-wrapper',
-                    onClick: function onClick() {
-                      return _this4.tableOperation('clearInput');
-                    }
-                  },
-                  _react2.default.createElement(_icon2.default, {
-                    theme: this.props.theme,
-                    name: 'cross',
-                    width: 12,
-                    height: 10,
-                    color: '#999999'
-                  })
-                )
-              ) || _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '322px' }),
-              !tableLoading && pageDropdown && pageDropdown || tableLoadingAction ? pageDropdown : dropDownHandle ? null : _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '100px' }),
-              this.props.searchable ? _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(_button2.default, {
-                  theme: this.props.theme,
-                  appearance: 'cta',
-                  icon: 'search',
-                  display: 'rounded',
-                  width: 34,
-                  height: 34,
-                  iconWidth: 16,
-                  iconHeight: 16
-                })
-              ) : null,
-              _react2.default.createElement(
-                'div',
-                { className: 'refresh-section' },
-                isRefreshActivated && _react2.default.createElement(
-                  'div',
-                  { className: 'tooltip' },
-                  'Refresh to get updated reports'
-                ),
-                isRefreshDotVisible && _react2.default.createElement('div', { className: 'red-dot' }),
-                (!tableLoading || tableLoadingAction) && _react2.default.createElement(
-                  'div',
-                  {
-                    className: '' + (isRefreshActivated ? 'refresh-btn active' : 'refresh-btn'),
-                    onClick: function onClick() {
-                      return _this4.tableOperation('refresh');
-                    }
-                  },
-                  _react2.default.createElement(_button2.default, {
-                    theme: this.props.theme,
-                    display: 'rounded',
-                    appearance: 'cta',
-                    icon: 'data-refresh',
-                    width: 16,
-                    height: 16
-                  })
-                ) || _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '30px' })
-              ),
-              this.props.filtersStructure && this.props.filtersStructure.length && !tableLoading || tableLoadingAction && filtersStructure.length ? _react2.default.createElement(_filter2.default, {
-                theme: this.props.theme,
-                ref: this._filterRef,
-                initialFilters: this.props.initialFilters,
-                refreshDashboard: this.props.refreshDashboard,
-                tableLoadingActionFunc: this.props.tableLoadingActionFunc,
-                filtersStructure: this.props.filtersStructure,
-                selectedFilters: this.props.selectedFilters,
-                applyFilters: this.props.applyFilters,
-                showSelectedFiltersAsChip: this.props.showSelectedFiltersAsChip,
-                filterMessage: this.props.filterMessage,
-                handleUserIdFilterChange: this.props.handleUserIdFilterChange,
-                userIdsList: this.props.userIdsList
-              }) : tableLoading && filtersStructure.length ? _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '30px' }) : null,
-              downloadAvailable && (!tableLoading || tableLoading && tableLoadingAction) && _react2.default.createElement(
-                'div',
-                { className: 'refresh-section' },
-                _react2.default.createElement(
-                  'div',
-                  {
-                    className: 'refresh-btn',
-                    onClick: function onClick() {
-                      return getTableData({ page: 1 }, false, true);
-                    }
-                  },
-                  _react2.default.createElement(_button2.default, {
-                    theme: this.props.theme,
-                    display: 'rounded',
-                    appearance: 'cta',
-                    icon: 'download-icon',
-                    width: 16,
-                    height: 16,
-                    iconWidth: 12,
-                    iconHeight: 12
-                  })
-                )
-              ) || (downloadHandle ? null : _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '30px' })),
-              false && _react2.default.createElement(
-                'div',
-                { className: 'column-show-holder' },
-                _react2.default.createElement(
-                  'div',
-                  { className: 'column-show-icon' },
-                  _react2.default.createElement(_icon2.default, {
-                    theme: this.props.theme,
-                    name: 'controls',
-                    width: 16,
-                    height: 16,
-                    color: '#afb2ba'
-                  })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { className: 'column-show-list-box' },
-                  _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement(
-                      'div',
-                      { className: 'column-show-info' },
-                      _react2.default.createElement(
-                        'div',
-                        { className: 'column-show-info-header' },
-                        'Table Filters'
-                      ),
-                      _react2.default.createElement(
-                        'div',
-                        null,
-                        'Select/deselect to show/hide columns.'
-                      ),
-                      _react2.default.createElement(
-                        'div',
-                        null,
-                        'Drag and arrange the column order.'
-                      )
-                    ),
-                    _react2.default.createElement(
-                      'div',
-                      { className: 'column-show-list' },
-                      _react2.default.createElement(
-                        _checkbox2.default.Group,
-                        {
-                          theme: this.props.theme,
-                          name: 'example2',
-                          type: 'label',
-                          onChange: function onChange(e) {
-                            _this4.showCloumnCheckChange(e.target.value, e.target.checked);
-                          },
-                          align: 'horizontal',
-                          selected: this.state.showColumnArr ? this.state.showColumnArr : []
-                        },
-                        this.columns ? this.columns.map(function (item) {
-                          return _react2.default.createElement(
-                            _checkbox2.default,
-                            { theme: _this4.props.theme, value: item.field },
-                            item.title
-                          );
-                        }) : null
-                      )
-                    )
-                  )
-                )
-              )
-            )
-          )
-        ),
-        rows.length && this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows && !tableLoading ? _react2.default.createElement(
-          SelectAllButton,
-          {
-            theme: this.props.theme,
-            isActive: !this.state.isAllRowsSelected,
-            onClick: function onClick(e) {
-              _this4.execute(!_this4.state.isAllRowsSelected);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showTableHeader && /*#__PURE__*/_react["default"].createElement(Table.Title, {
+        style: {
+          display: 'flex'
+        },
+        className: "table-title-holder",
+        theme: this.props.theme
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "table-title"
+      }, /*#__PURE__*/_react["default"].createElement("p", null, this.props.tableTitle)), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tableLoading && !tableLoadingAction && /*#__PURE__*/_react["default"].createElement(TableTitleLoadingInitial, {
+        theme: this.props.theme
+      }, /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+        height: "24px",
+        width: "150px"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "title-right-area"
+      }, showSearchBox && (!tableLoading || tableLoading && tableLoadingAction) && /*#__PURE__*/_react["default"].createElement(SearchContainer, {
+        theme: this.props.theme
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "search-icon-wrapper"
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "search",
+        width: 12,
+        height: 12,
+        color: "#999999"
+      })), /*#__PURE__*/_react["default"].createElement(_inputText["default"], {
+        className: "input-field",
+        label: "Search",
+        value: searchedText,
+        onChange: function onChange(e) {
+          _this4.props.tableLoadingActionFunc(true);
+          _this4.handleInputChange(e.target.value);
+        }
+      }), searchedText && searchedText.length && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "close-icon-wrapper",
+        onClick: function onClick() {
+          return _this4.tableOperation('clearInput');
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        theme: this.props.theme,
+        name: "cross",
+        width: 12,
+        height: 10,
+        color: "#999999"
+      }))) || /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+        height: "24px",
+        width: "322px"
+      }), !tableLoading && pageDropdown && pageDropdown || tableLoadingAction ? pageDropdown : dropDownHandle ? null : /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+        height: "24px",
+        width: "100px"
+      }), this.props.searchable ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        theme: this.props.theme,
+        appearance: "cta",
+        icon: "search",
+        display: "rounded",
+        width: 34,
+        height: 34,
+        iconWidth: 16,
+        iconHeight: 16
+      })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "refresh-section"
+      }, isRefreshActivated && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tooltip"
+      }, "Refresh to get updated reports"), isRefreshDotVisible && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "red-dot"
+      }), (!tableLoading || tableLoadingAction) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
+        onClick: function onClick() {
+          return _this4.tableOperation('refresh');
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        theme: this.props.theme,
+        display: "rounded",
+        appearance: "cta",
+        icon: "data-refresh",
+        width: 16,
+        height: 16
+      })) || /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+        height: "24px",
+        width: "30px"
+      })), this.props.filtersStructure && this.props.filtersStructure.length && !tableLoading || tableLoadingAction && filtersStructure.length ? /*#__PURE__*/_react["default"].createElement(_filter["default"], {
+        theme: this.props.theme,
+        ref: this._filterRef,
+        initialFilters: this.props.initialFilters,
+        refreshDashboard: this.props.refreshDashboard,
+        tableLoadingActionFunc: this.props.tableLoadingActionFunc,
+        filtersStructure: this.props.filtersStructure,
+        selectedFilters: this.props.selectedFilters,
+        applyFilters: this.props.applyFilters,
+        showSelectedFiltersAsChip: this.props.showSelectedFiltersAsChip,
+        filterMessage: this.props.filterMessage,
+        handleUserIdFilterChange: this.props.handleUserIdFilterChange,
+        userIdsList: this.props.userIdsList
+      }) : tableLoading && filtersStructure.length ? /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+        height: "24px",
+        width: "30px"
+      }) : null, downloadAvailable && (!tableLoading || tableLoading && tableLoadingAction) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "refresh-section"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "refresh-btn",
+        onClick: function onClick() {
+          return getTableData({
+            page: 1
+          }, false, true);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+        theme: this.props.theme,
+        display: "rounded",
+        appearance: "cta",
+        icon: "download-icon",
+        width: 16,
+        height: 16,
+        iconWidth: 12,
+        iconHeight: 12
+      }))) || (downloadHandle ? null : /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
+        height: "24px",
+        width: "30px"
+      })), false && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "column-show-holder"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "column-show-icon"
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        theme: this.props.theme,
+        name: "controls",
+        width: 16,
+        height: 16,
+        color: "#afb2ba"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "column-show-list-box"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "column-show-info"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "column-show-info-header"
+      }, "Table Filters"), /*#__PURE__*/_react["default"].createElement("div", null, "Select/deselect to show/hide columns."), /*#__PURE__*/_react["default"].createElement("div", null, "Drag and arrange the column order.")), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "column-show-list"
+      }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"].Group, {
+        theme: this.props.theme,
+        name: "example2",
+        type: "label",
+        onChange: function onChange(e) {
+          _this4.showCloumnCheckChange(e.target.value, e.target.checked);
+        },
+        align: "horizontal",
+        selected: this.state.showColumnArr ? this.state.showColumnArr : []
+      }, this.columns ? this.columns.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
+          theme: _this4.props.theme,
+          value: item.field
+        }, item.title);
+      }) : null)))))))), rows.length && this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows && !tableLoading ? /*#__PURE__*/_react["default"].createElement(SelectAllButton, {
+        theme: this.props.theme,
+        isActive: !this.state.isAllRowsSelected,
+        onClick: function onClick(e) {
+          _this4.execute(!_this4.state.isAllRowsSelected);
+        }
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        className: "input-select-all-button",
+        type: "checkbox"
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        className: "label-select-all-button"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "span-select-all-button"
+      }))) : null, /*#__PURE__*/_react["default"].createElement(Table.Card, (0, _extends2["default"])({
+        theme: this.props.theme,
+        className: "table-card"
+      }, this.props, {
+        width: "100%",
+        radius: 2
+      }), this.state.commonActionsSelected.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Table.SelectedAction, {
+        theme: this.props.theme,
+        className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ? 'selectedAction show' : 'selectedAction'
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "action-icons-common"
+      }, this.state.commonActionsSelected.map(function (item, idx) {
+        return item !== 'play' ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
+          theme: _this4.props.theme,
+          className: 'action-button ' + (item === 'play' ? 'play' : 'default'),
+          key: idx,
+          onClick: function onClick(e) {
+            if (_this4.props.commonActionClickHandler) {
+              items.map(function (ele) {
+                return ele.rowChecked = false;
+              });
+              _this4.setState({
+                ingestedDbIdArray: [],
+                isAllRowsSelected: false,
+                commonActionsSelected: [],
+                selectedRows: []
+              });
+              _this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, 'common-action');
+            } else {
+              console.log("pass func as props named 'commonActionClickHandler'... receive args as actionItem name and event obj. ");
             }
           },
-          _react2.default.createElement('input', { className: 'input-select-all-button', type: 'checkbox' }),
-          _react2.default.createElement(
-            'label',
-            { className: 'label-select-all-button' },
-            _react2.default.createElement('span', { className: 'span-select-all-button' })
-          )
-        ) : null,
-        _react2.default.createElement(
-          Table.Card,
-          _extends({
-            theme: this.props.theme,
-            className: 'table-card'
-          }, this.props, {
-            width: '100%',
-            radius: 2
-          }),
-          this.state.commonActionsSelected.length > 0 ? _react2.default.createElement(
-            _react2.default.Fragment,
-            null,
-            _react2.default.createElement(
-              Table.SelectedAction,
-              {
-                theme: this.props.theme,
-                className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ? 'selectedAction show' : 'selectedAction'
-              },
-              _react2.default.createElement(
-                'div',
-                { className: 'action-icons-common' },
-                this.state.commonActionsSelected.map(function (item, idx) {
-                  return item !== 'play' ? _react2.default.createElement(_button2.default, {
-                    theme: _this4.props.theme,
-                    className: 'action-button ' + (item === 'play' ? 'play' : 'default'),
-                    key: idx,
-                    onClick: function onClick(e) {
-                      if (_this4.props.commonActionClickHandler) {
-                        items.map(function (ele) {
-                          return ele.rowChecked = false;
-                        });
-                        _this4.setState({
-                          ingestedDbIdArray: [],
-                          isAllRowsSelected: false,
-                          commonActionsSelected: [],
-                          selectedRows: []
-                        });
-
-                        _this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, 'common-action');
-                      } else {
-                        console.log("pass func as props named 'commonActionClickHandler'... receive args as actionItem name and event obj. ");
-                      }
-                    },
-                    display: 'rounded',
-                    appearance: 'primary',
-                    icon: _permissionIconMap2.default[item],
-                    iconWidth: 10,
-                    iconHeight: 10,
-                    label: _this4.props.actionLable && _this4.props.actionLable[item] ? _this4.props.actionLable[item] : item,
-                    width: 24,
-                    height: 24
-                  }) : null;
-                })
-              )
-            )
-          ) : null,
-          rows.length ? _react2.default.createElement(
-            Table.Element,
-            this.props,
-            _react2.default.createElement(Table.Header, {
-              theme: this.props.theme,
-              columns: this.defaultShowColumns,
-              selectedColumns: !tableLoading || tableLoading && tableLoadingAction ? this.state.showColumnArr : [],
-              onSort: this.props.onSort
-            }),
-            _react2.default.createElement(
-              Table.Body,
-              null,
-              rows
-            )
-          ) : _react2.default.createElement(
-            _react2.default.Fragment,
-            null,
-            this.returnTableStatus()
-          )
-        )
-      );
+          display: "rounded",
+          appearance: "primary",
+          icon: _permissionIconMap["default"][item],
+          iconWidth: 10,
+          iconHeight: 10,
+          label: _this4.props.actionLable && _this4.props.actionLable[item] ? _this4.props.actionLable[item] : item,
+          width: 24,
+          height: 24
+        }) : null;
+      })))) : null, rows.length ? /*#__PURE__*/_react["default"].createElement(Table.Element, this.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+        theme: this.props.theme,
+        columns: this.defaultShowColumns,
+        selectedColumns: !tableLoading || tableLoading && tableLoadingAction ? this.state.showColumnArr : [],
+        onSort: this.props.onSort
+      }), /*#__PURE__*/_react["default"].createElement(Table.Body, null, rows)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.returnTableStatus())));
     }
   }]);
-
-  return Table;
 }(_react.Component);
-
-Table.Header = _tableHeader2.default;
-Table.Column = _tableColumn2.default;
-
-var SearchContainer = _styledComponents2.default.div(_templateObject);
-
-var AvatarBox = _styledComponents2.default.div(_templateObject2);
-Table.SelectedAction = _styledComponents2.default.div(_templateObject3, function (props) {
+Table.Header = _tableHeader["default"];
+Table.Column = _tableColumn["default"];
+var SearchContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 1px solid #303f51;\n  display: flex;\n  align-items: center;\n  input:focus {\n    outline: none;\n  }\n  .search-icon-wrapper {\n    padding-right: 10px;\n  }\n  .input-field {\n    border: none;\n    color: #999999;\n    min-width: 300px;\n    margin-top: 0px;\n  }\n  .close-icon-wrapper {\n    cursor: pointer;\n    &:hover {\n      path {\n        fill: white;\n      }\n    }\n  }\n"])));
+var AvatarBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  & .avatar-details {\n    display: none;\n  }\n\n  .initial-placeholder {\n    background: #78909c;\n    width: 24px;\n    height: 24px;\n    text-align: center;\n    border-radius: 100%;\n    font-size: 12px;\n    color: #fff;\n  }\n"])));
+Table.SelectedAction = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n\n  position: absolute;\n  top: 0;\n  left: 55px;\n  width: 0px;\n  overflow: hidden;\n  transition: all 0.4s ease;\n  height: 38px;\n  background: ", ";//#ccc;\n  display: flex;\n  align-items: center;\n  &.show{\n    width: 146px;\n    overflow: visible;\n  }\n\n  div.action-icons-common{\n    white-space: nowrap;\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .tooltip-container{\n      display: inline-block;\n      margin: 0px 5px;\n    }\n\n    .action-button{\n      // padding: 0px;\n      // border-radius: 50%;\n      // -webkit-appearance: none;\n      // cursor:pointer;\n      // align-items: center;\n      // justify-content: center;\n      // height: 25px;\n      // width: 25px;\n\n      &.default{\n        //background: #666666;\n        //border:1px solid #666666;\n        &:hover{\n          //background: #8e8e8e;\n          //border:1px solid #8e8e8e;\n        }\n      }\n      &.play{\n        background:  ", ";\n        border:1px solid ", ";\n        &:hover{\n          background: #39cac2;\n          border:1px solid #39cac2;\n        }\n      }\n    }\n\n"])), function (props) {
   return _tokens.colors[props.theme].table.background;
 }, function (props) {
   return _tokens.colors[props.theme].table.otherThemeShade;
 }, function (props) {
   return _tokens.colors[props.theme].table.otherThemeShade;
 });
-
-Table.Card = (0, _styledComponents2.default)(_card2.default)(_templateObject4, function (props) {
+Table.Card = (0, _styledComponents["default"])(_card["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  // overflow-x: auto;\n  // overflow-y: hidden;\n  margin: 10px 0;\n  /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  position:relative\n\n  ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n  position: relative;\n  display: flex;\n  margin:0;\n  align-items: center;\n  color: #9e9e9e;\n  transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #9E9E9E;\n  border-radius: 50%;\n  cursor: pointer;  \n  transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n  background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n  border: 10px solid #49dad0\n  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n  content: \"\";\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  border-right: 2px solid transparent;\n  border-bottom: 2px solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n  0%{\n    transform: scale(1);\n  }\n  33%{    \n    transform: scale(.85);\n  }\n  100%{\n    transform: scale(1);    \n  }\n}\n@keyframes checkbox-check{\n  0%{\n    width: 0;\n    height: 0;\n    border-color: #FFF;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  33%{\n    width: 4px;\n    height: 0;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  100%{    \n    width: 4px;\n    height: 9px;    \n    border-color: #FFF;\n    transform: translate3d(0,-.5em,0) rotate(45deg);\n  }\n}\n  \n"])), function (props) {
   // console.log(props.theme);
 });
-Table.Title = _styledComponents2.default.div(_templateObject5, function (props) {
+Table.Title = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  .table-title {\n    font-family: 'SFUIText-Medium';\n    font-size: 18px;\n    letter-spacing: 0.3px;\n    color: ", ";\n  }\n  .title-right-area {\n    display: flex;\n    align-items: center;\n    & > div {\n      margin-left: 10px;\n    }\n\n    .refresh-section {\n      position: relative;\n\n      @keyframes glowing {\n        0% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        15% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        30% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        45% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        60% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        75% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        90% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        100% {\n          box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n        }\n      }\n\n      .red-dot {\n        position: absolute;\n        top: 0;\n        right 0;\n        width: 16px\n        height: 16px;\n        border-radius: 100%;\n        background-color: rgba(255, 108, 86, 0.1);\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 6px;\n          height: 6px;\n          background-color: #FF6C56;\n          border-radius: 100%;\n          transform: translate(-50%, -50%);\n        }\n        \n      }\n\n      .tooltip {\n        font-family: 'SFUIText-Regular';\n        font-size: 12px;\n        top: -38px;\n        right: -66px;\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        width: 170px;\n        background-color: ", ";\n        color: #0c141d;\n        border-radius: 20px;\n        padding: 10px 5px;\n        &:after {\n          content: '';\n          border-top: 6px dashed ", ";\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          bottom: -6px;\n          right: 76px;\n        }\n      }\n\n      .refresh-btn {\n        background-color: #121d28;\n        border: 1px solid #121d28;\n        padding: 7px;\n        border-radius: 50%;\n        cursor: pointer;\n\n        &:hover {\n          path {\n            fill: #fff;\n          }\n        }\n        \n        &.active {\n          background-color: ", ";\n          border-color: ", ";\n          transition: all 0.2s ease-in-out;\n          path {\n            transition: all 0.2s ease-in-out;\n            fill: #fff;\n          }\n        }\n\n        &.active {\n          animation: glowing 5000ms infinite;\n        }\n\n        > button {\n          border: none;\n          background-color: transparent;\n          position: relative;\n          path {\n            fill: #afb2ba;\n          }\n        }\n      }\n    }\n  }\n  .column-show-holder {\n    position: relative;\n    text-align: left;\n\n    .column-show-icon {\n      width: 30px;\n      height: 30px;\n      background: #121d28;\n      border-radius: 50%;\n      padding: 7px 7px;\n\n      &:hover {\n        path {\n          fill: #fff;\n          transition: all 0.4s ease-out;\n        }\n      }\n    }\n\n    .column-show-list-box {\n      position: absolute;\n      display: none;\n      //display:block;\n      width: 345px;\n      right: 0;\n      z-index: 101;\n      padding-top: 7px;\n      top: 29px;\n\n      & > div {\n        box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        /* left: 42%; */\n        /* top: 100%; */\n        width: 0;\n        height: 0;\n\n        border-left: 4px solid transparent;\n        border-right: 4px solid transparent;\n        border-bottom: 6px solid ", ";\n        transform: translate(327px, -6px);\n      }\n\n      .column-show-info {\n        background: #182738;\n        color: #afb2ba;\n        font-family: 'SFUIText-Regular';\n        padding: 15px;\n        font-size: 12px;\n        border-bottom: solid 1px #303f51;\n        line-height: 15px;\n        border-top-left-radius: 2px;\n        border-top-right-radius: 2px;\n        .column-show-info-header {\n          font-family: SFUIText-Medium;\n          font-size: 14px;\n          padding-bottom: 5px;\n        }\n      }\n\n      .column-show-list {\n        background: #182738;\n        color: #fff;\n        padding: 5px;\n        border-bottom-left-radius: 2px;\n        border-bottom-right-radius: 2px;\n        & .label {\n          margin-right: 0px;\n\n          & > input {\n            & ~ span {\n              color: #fff;\n              background: #303f51;\n              &:hover {\n                background: #303f51;\n                color: ", ";\n              }\n            }\n\n            &:checked ~ span {\n              background: ", ";\n              &:hover {\n                background: ", ";\n                color: #fff;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &:hover {\n      .column-show-list-box {\n        display: block;\n      }\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.titleColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.titleBackgroundColor;
@@ -1691,20 +1369,16 @@ Table.compare = {
     return String(row1[column.field]) - String(row2[column.field]);
   }
 };
-
-Table.Element = _styledComponents2.default.table(_templateObject6);
+Table.Element = _styledComponents["default"].table(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n"])));
 var TableInner = {};
-TableInner.Element = _styledComponents2.default.table(_templateObject6);
-
-TableInner.Cell = _styledComponents2.default.td(_templateObject7, function (props) {
+TableInner.Element = _styledComponents["default"].table(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n"])));
+TableInner.Cell = _styledComponents["default"].td(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Regular';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", ";\n  padding: 7px 14px;\n  border-top: 1px solid ", ";\n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: auto;\n"])), function (props) {
   return _tokens.colors[props.theme].table.InnerTdColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.border;
 });
-
-Table.Body = _styledComponents2.default.tbody(_templateObject8);
-
-Table.Row = _styledComponents2.default.tr(_templateObject9, function (props) {
+Table.Body = _styledComponents["default"].tbody(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));
+Table.Row = _styledComponents["default"].tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:hover {\n    .asset-play {\n      color: ", ";\n    }\n  }\n\n  ", " {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ", ";\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.rowSelectedBackground;
 }, function (props) {
   return _tokens.colors[props.theme].table.evenRowBackground;
@@ -1713,8 +1387,7 @@ Table.Row = _styledComponents2.default.tr(_templateObject9, function (props) {
 }, Table.Card, function (props) {
   if (typeof props.theme === 'string') return 'background:' + _tokens.colors[props.theme].table.innerTableBackground;
 });
-
-Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
+Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Regular';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", "; \n  padding: 7px 14px;\n // border-top: 1px solid ", "; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ", ";\n  max-width:  ", ";\n\n  &.tableHolder{\n    padding:0px;\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ", ";\n        path{\n          fill: ", ";\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ", ";\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ", ";\n          min-width: 200px;\n        }\n\n        &:before{\n          content: '';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ", ";\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ", ";\n  }\n\n\n"])), function (props) {
   return _tokens.colors[props.theme].table.tdColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.border;
@@ -1737,13 +1410,11 @@ Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
 }, function (props) {
   return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
 });
-
-var TableTitleLoadingInitial = _styledComponents2.default.div(_templateObject11);
-
-var DubbingStatusStyles = _styledComponents2.default.div(_templateObject12, function (props) {
+var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n"])));
+var DubbingStatusStyles = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ", ";\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.ApprovedBackground;
 });
-var SelectAllButton = _styledComponents2.default.div(_templateObject13, function (props) {
+var SelectAllButton = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 75px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ", ";\n    .span-select-all-button {\n      display: ", ";\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ", ";\n    }\n  }\n"])), function (props) {
   return props.isActive ? '1px solid #9E9E9E' : '';
 }, function (props) {
   return !props.isActive ? '#49dad0' : '';
@@ -1752,22 +1423,20 @@ var SelectAllButton = _styledComponents2.default.div(_templateObject13, function
 }, function (props) {
   return !props.isActive ? 'checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards' : '';
 });
-
 Table.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  items: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,
-  tableTitle: _propTypes2.default.string,
-  onSort: _propTypes2.default.func,
-  refreshDashboard: _propTypes2.default.func,
-  isRefreshActivated: _propTypes2.default.bool,
-  isRefreshDotVisible: _propTypes2.default.bool,
-  getSearchedRows: _propTypes2.default.func,
-  showSearchBox: _propTypes2.default.bool,
-  handleUserIdFilterChange: _propTypes2.default.func,
-  userIdsList: _propTypes2.default.instanceOf(Object),
-  pageDropdown: _propTypes2.default.instanceOf(Object)
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
+  tableTitle: _propTypes["default"].string,
+  onSort: _propTypes["default"].func,
+  refreshDashboard: _propTypes["default"].func,
+  isRefreshActivated: _propTypes["default"].bool,
+  isRefreshDotVisible: _propTypes["default"].bool,
+  getSearchedRows: _propTypes["default"].func,
+  showSearchBox: _propTypes["default"].bool,
+  handleUserIdFilterChange: _propTypes["default"].func,
+  userIdsList: _propTypes["default"].instanceOf(Object),
+  pageDropdown: _propTypes["default"].instanceOf(Object)
 };
-
 Table.defaultProps = {
   theme: 'dark',
   videoPlayBtn: false,
@@ -1780,5 +1449,4 @@ Table.defaultProps = {
   selectable: false,
   showTableHeader: true
 };
-
-exports.default = Table;
+var _default = exports["default"] = Table;