@annalib/anna-core 20.2.20 → 20.2.21

package/src/lib/anna-common-scss/_gt-table.scss

@@ -1,425 +1,425 @@
-@use "../anna-common-scss/fonts" as *;
-@use "../anna-common-scss/colors" as *;
-@use "sass:list";
-@use "sass:map";
-
-@mixin sticky-left($leftOffset, $zIndex) {
-    position: sticky;
-    left: $leftOffset;
-    z-index: $zIndex !important;
-}
-
-@mixin ellipsify() {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-@mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0) {
-    .table-container {
-        &::-webkit-scrollbar-track {
-            margin-top: $margin-top;
-            margin-left: $margin-left;
-        }
-    }
-}
-
-@mixin table-fixed-style($width: 100%) {
-    table {
-        margin-bottom: 0;
-        table-layout: fixed;
-        width: $width;
-    }
-}
-
-@mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed) {
-    $last-sticky-col: 0;
-    @if (list.length(map.keys($sticky-left-map)) > 0) {
-        $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
-    }
-
-    .scroll-left-shadow-effect .header-row th:nth-of-type(#{$last-sticky-col}) {
-        border: none !important;
-        filter: drop-shadow(2px 0 0px $lightGray-4);
-    }
-
-    .header-row {
-        th {
-            background: $bg-color;
-            padding: 2px 8px;
-            line-height: normal;
-            position: sticky;
-            top: 0;
-            box-shadow: none !important;
-            cursor: default;
-            .upper-label {
-                @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
-                color: $charcoal;
-                margin-bottom: 0;
-            }
-
-            .lower-label {
-                @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
-                color: $darkGray;
-                margin-bottom: 0;
-            }
-
-            div.row {
-                display: flex;
-                flex-wrap: nowrap;
-                justify-content: space-between;
-                align-items: center;
-                width: max-content;
-            }
-
-            div.sort-filter-container {
-                display: flex;
-                flex-wrap: nowrap;
-                align-items: center;
-                margin-left: $fs-4;
-                margin-right: auto;
-            }
-
-            span.mdi-filter-variant {
-                font-size: 13px !important;
-                top: -1px !important;
-                position: relative;
-            }
-        }
-
-        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-        $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-        $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
-        $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
-
-        @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            @if ($i == $box-shadow-start-index) {
-                th:nth-of-type(#{$i}) {
-                    @if ($show-right-border-box-shadow) {
-                        box-shadow:
-                            inset 1px 0 0 0 $left-right-box-shadow-color,
-                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
-                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    } @else {
-                        box-shadow:
-                            inset 1px 0 0 0 $left-right-box-shadow-color,
-                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
-                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    }
-                }
-            } @else if($i == $box-shadow-end-index) {
-                th:nth-of-type(#{$i}) {
-                    @if ($show-right-border-box-shadow) {
-                        box-shadow:
-                            inset -1px 0 0 0 $left-right-box-shadow-color,
-                            inset 1px 0 0 0 $left-right-box-shadow-color,
-                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
-                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    } @else {
-                        box-shadow:
-                            inset -1px 0 0 0 $left-right-box-shadow-color,
-                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
-                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    }
-                }
-            } @else {
-                th:nth-of-type(#{$i}) {
-                    @if ($show-right-border-box-shadow) {
-                        box-shadow:
-                            inset 1px 0 0 0 $left-right-box-shadow-color,
-                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
-                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    } @else {
-                        box-shadow:
-                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
-                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                    }
-                }
-            }
-        }
-
-        @each $columnNumber, $sticky-prop in $sticky-left-map {
-            $left-offset: map.get($sticky-prop, "left");
-            $z-index: map.get($sticky-prop, "z-index");
-
-            th:nth-of-type(#{$columnNumber}) {
-                @include sticky-left($left-offset, $z-index);
-            }
-        }
-    }
-}
-
-@mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white) {
-    $sticky-top: map.get($sticky-top-left-map, "top");
-    $sticky-left-map: map.get($sticky-top-left-map, "sticky-left");
-    $last-sticky-col: 0;
-
-    @if (list.length(map.keys($sticky-left-map)) > 0) {
-        $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
-    }
-
-    .scroll-left-shadow-effect:not(.no-data-table) .total-row td:nth-of-type(#{$last-sticky-col}) {
-        filter: drop-shadow(2px 0 2px $lightGray-4);
-    }
-
-    .total-row {
-        td {
-            padding: 2px 8px;
-            background: $bg-color;
-            position: sticky;
-            top: $sticky-top !important;
-
-            .upper-label {
-                @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
-                color: $charcoal;
-            }
-
-            .lower-label {
-                @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
-                color: $darkGray;
-            }
-
-            br {
-                display: block;
-                content: "";
-                margin-top: -3px;
-            }
-        }
-
-        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-        $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-        $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
-        $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
-        $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
-        $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
-
-        @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            @if ($i == $box-shadow-start-index) {
-                td:nth-of-type(#{$i}) {
-                    @if ($show-right-border-box-shadow) {
-                        box-shadow:
-                            inset 1px 0 0 0 $top-box-shadow-color,
-                            inset 0 1px 0 0 $top-box-shadow-color,
-                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    } @else {
-                        box-shadow:
-                            inset 1px 0 0 0 $top-box-shadow-color,
-                            inset 0 1px 0 0 $top-box-shadow-color,
-                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    }
-                }
-            } @else if($i == $box-shadow-end-index) {
-                td:nth-of-type(#{$i}) {
-                    @if ($show-right-border-box-shadow) {
-                        box-shadow:
-                            inset -1px 0 0 0 $top-box-shadow-color,
-                            inset 1px 0 0 0 $left-box-shadow-color,
-                            inset 0 1px 0 0 $top-box-shadow-color,
-                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    } @else {
-                        box-shadow:
-                            inset -1px 0 0 0 $top-box-shadow-color,
-                            inset 0 1px 0 0 $top-box-shadow-color,
-                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    }
-                }
-            } @else {
-                td:nth-of-type(#{$i}) {
-                    @if ($show-right-border-box-shadow) {
-                        box-shadow:
-                            inset 1px 0 0 0 $left-box-shadow-color,
-                            inset 0 1px 0 0 $top-box-shadow-color,
-                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    } @else {
-                        box-shadow:
-                            inset 0 1px 0 0 $top-box-shadow-color,
-                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
-                    }
-                }
-            }
-        }
-
-        @each $columnNumber, $sticky-prop in $sticky-left-map {
-            $left-offset: map.get($sticky-prop, "left");
-            $z-index: map.get($sticky-prop, "z-index");
-
-            td:nth-of-type(#{$columnNumber}) {
-                @include sticky-left($left-offset, $z-index);
-            }
-        }
-    }
-}
-
-@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
-    td {
-        cursor: pointer;
-        background: $bg-color;
-        box-shadow: none !important;
-
-        div:nth-child(1) {
-            color: #000;
-            @include ellipsify();
-            @include fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
-        }
-
-        div:nth-child(2) {
-            color: #a7a7a7;
-            @include ellipsify();
-            @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.3px);
-        }
-    }
-
-    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
-    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
-
-    @for $i from $box-shadow-start-index through $box-shadow-end-index {
-        @if ($i == $box-shadow-start-index) {
-            td:nth-of-type(#{$i}) {
-                @if ($show-right-border-box-shadow) {
-                    box-shadow:
-                        inset 1px 0 0 0 $left-right-box-shadow-color,
-                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                } @else {
-                    box-shadow:
-                        inset 1px 0 0 0 $left-right-box-shadow-color,
-                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
-            }
-        } @else if($i == $box-shadow-end-index) {
-            td:nth-of-type(#{$i}) {
-                @if ($show-right-border-box-shadow) {
-                    box-shadow:
-                        inset 1px 0 0 0 $left-right-box-shadow-color,
-                        inset -1px 0 0 0 $left-right-box-shadow-color,
-                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                } @else {
-                    box-shadow:
-                        inset -1px 0 0 0 $left-right-box-shadow-color,
-                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
-            }
-        } @else {
-            td:nth-of-type(#{$i}) {
-                @if ($show-right-border-box-shadow) {
-                    box-shadow:
-                        inset 1px 0 0 0 $left-right-box-shadow-color,
-                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                } @else {
-                    box-shadow: inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
-                }
-            }
-        }
-    }
-
-    @each $columnNumber, $sticky-prop in $sticky-left-map {
-        $left-offset: map.get($sticky-prop, "left");
-        $z-index: map.get($sticky-prop, "z-index");
-
-        td:nth-of-type(#{$columnNumber}) {
-            @include sticky-left($left-offset, $z-index);
-        }
-    }
-}
-
-@mixin table-data-shadow($columnNumber) {
-    .scroll-left-shadow-effect:not(.no-data-table) td:nth-of-type(#{$columnNumber}) {
-        filter: drop-shadow(2px 0 1px $lightGray-4);
-    }
-}
-
-@mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()) {
-    .table-container.no-data-table > div {
-        height: $table-container-height !important;
-    }
-
-    $box-shadow-start-index: map.get($box-shadow-map, "box-shadow-start-index");
-    $box-shadow-end-index: map.get($box-shadow-map, "box-shadow-end-index");
-    $box-shadow-color: map.get($box-shadow-map, "box-shadow-color");
-
-    tbody {
-        @if (map.has-key($row-height-map, "row-height")) {
-            tr.no-border-tr {
-                height: map.get($row-height-map, "row-height") !important;
-            }
-        }
-
-        tr.no-border-tr:first-of-type {
-            @for $i from $box-shadow-start-index through $box-shadow-end-index {
-                td:nth-of-type(#{$i}) {
-                    @if ($i == $box-shadow-start-index) {
-                        box-shadow: inset 1px 0 0 0 $box-shadow-color !important;
-                    } @else if($i == $box-shadow-end-index) {
-                        box-shadow: inset -1px 0 0 0 $box-shadow-color !important;
-                    } @else {
-                        box-shadow: none !important;
-                    }
-                }
-            }
-        }
-
-        tr.no-border-tr:last-of-type {
-            @for $i from $box-shadow-start-index through $box-shadow-end-index {
-                td:nth-of-type(#{$i}) {
-                    @if ($i == $box-shadow-start-index) {
-                        box-shadow: inset 1px -1px 0 0 $box-shadow-color !important;
-                    } @else if($i == $box-shadow-end-index) {
-                        box-shadow: inset -1px -1px 0 0 $box-shadow-color !important;
-                    } @else {
-                        box-shadow: inset 0 -1px 0 0 $box-shadow-color !important;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin table-bottom-border($box-shadow-map) {
-    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
-    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
-    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
-
-    .bottom-border {
-        border-bottom: 1px solid $top-bottom-box-shadow-color;
-    }
-
-    .bottom-border tbody {
-        tr:last-of-type {
-            @for $i from $box-shadow-start-index through $box-shadow-end-index {
-                @if ($i == $box-shadow-start-index) {
-                    td:nth-of-type(#{$i}) {
-                        @if ($show-right-border-box-shadow) {
-                            box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
-                        } @else {
-                            box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
-                        }
-                    }
-                } @else if($i == $box-shadow-end-index) {
-                    td:nth-of-type(#{$i}) {
-                        @if ($show-right-border-box-shadow) {
-                            box-shadow:
-                                inset 1px 0 0 0 $left-right-box-shadow-color,
-                                inset -1px 0 0 0 $left-right-box-shadow-color !important;
-                        } @else {
-                            box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color !important;
-                        }
-                    }
-                } @else {
-                    td:nth-of-type(#{$i}) {
-                        @if ($show-right-border-box-shadow) {
-                            box-shadow: inset 1px 0 0 0 $top-bottom-box-shadow-color !important;
-                        } @else {
-                            box-shadow: none !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+@use "../anna-common-scss/fonts" as *;
+@use "../anna-common-scss/colors" as *;
+@use "sass:list";
+@use "sass:map";
+
+@mixin sticky-left($leftOffset, $zIndex) {
+    position: sticky;
+    left: $leftOffset;
+    z-index: $zIndex !important;
+}
+
+@mixin ellipsify() {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+@mixin table-container-scroll-bar($margin-left: 0, $margin-top: 0) {
+    .table-container {
+        &::-webkit-scrollbar-track {
+            margin-top: $margin-top;
+            margin-left: $margin-left;
+        }
+    }
+}
+
+@mixin table-fixed-style($width: 100%) {
+    table {
+        margin-bottom: 0;
+        table-layout: fixed;
+        width: $width;
+    }
+}
+
+@mixin table-header($sticky-left-map, $box-shadow-map, $bg-color: #ededed) {
+    $last-sticky-col: 0;
+    @if (list.length(map.keys($sticky-left-map)) > 0) {
+        $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
+    }
+
+    .scroll-left-shadow-effect .header-row th:nth-of-type(#{$last-sticky-col}) {
+        border: none !important;
+        filter: drop-shadow(2px 0 0px $lightGray-4);
+    }
+
+    .header-row {
+        th {
+            background: $bg-color;
+            padding: 2px 8px;
+            line-height: normal;
+            position: sticky;
+            top: 0;
+            box-shadow: none !important;
+            cursor: default;
+            .upper-label {
+                @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
+                color: $charcoal;
+                margin-bottom: 0;
+            }
+
+            .lower-label {
+                @include fonts(Roboto, 0.6875rem, normal, 500, normal, normal, 0.3px);
+                color: $darkGray;
+                margin-bottom: 0;
+            }
+
+            div.row {
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+                align-items: center;
+                width: max-content;
+            }
+
+            div.sort-filter-container {
+                display: flex;
+                flex-wrap: nowrap;
+                align-items: center;
+                margin-left: $fs-4;
+                margin-right: auto;
+            }
+
+            span.mdi-filter-variant {
+                font-size: 13px !important;
+                top: -1px !important;
+                position: relative;
+            }
+        }
+
+        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+        $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
+        $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
+        $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
+
+        @for $i from $box-shadow-start-index through $box-shadow-end-index {
+            @if ($i == $box-shadow-start-index) {
+                th:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    }
+                }
+            } @else if($i == $box-shadow-end-index) {
+                th:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset -1px 0 0 0 $left-right-box-shadow-color,
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset -1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    }
+                }
+            } @else {
+                th:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-right-box-shadow-color,
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 0 1px 0 0 $top-bottom-box-shadow-color,
+                            inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                    }
+                }
+            }
+        }
+
+        @each $columnNumber, $sticky-prop in $sticky-left-map {
+            $left-offset: map.get($sticky-prop, "left");
+            $z-index: map.get($sticky-prop, "z-index");
+
+            th:nth-of-type(#{$columnNumber}) {
+                @include sticky-left($left-offset, $z-index);
+            }
+        }
+    }
+}
+
+@mixin total-row($sticky-top-left-map, $box-shadow-map, $bg-color: white) {
+    $sticky-top: map.get($sticky-top-left-map, "top");
+    $sticky-left-map: map.get($sticky-top-left-map, "sticky-left");
+    $last-sticky-col: 0;
+
+    @if (list.length(map.keys($sticky-left-map)) > 0) {
+        $last-sticky-col: list.nth(map.keys($sticky-left-map), -1);
+    }
+
+    .scroll-left-shadow-effect:not(.no-data-table) .total-row td:nth-of-type(#{$last-sticky-col}) {
+        filter: drop-shadow(2px 0 2px $lightGray-4);
+    }
+
+    .total-row {
+        td {
+            padding: 2px 8px;
+            background: $bg-color;
+            position: sticky;
+            top: $sticky-top !important;
+
+            .upper-label {
+                @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
+                color: $charcoal;
+            }
+
+            .lower-label {
+                @include fonts(Roboto, 0.75rem, normal, 900, normal, normal, 0.3px);
+                color: $darkGray;
+            }
+
+            br {
+                display: block;
+                content: "";
+                margin-top: -3px;
+            }
+        }
+
+        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+        $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
+        $top-box-shadow-color: map.get($box-shadow-map, "top-bs-color");
+        $left-box-shadow-color: map.get($box-shadow-map, "left-bs-color");
+        $bottom-box-shadow-color: map.get($box-shadow-map, "bottom-bs-color");
+        $right-box-shadow-color: map.get($box-shadow-map, "right-bs-color");
+
+        @for $i from $box-shadow-start-index through $box-shadow-end-index {
+            @if ($i == $box-shadow-start-index) {
+                td:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $top-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 1px 0 0 0 $top-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    }
+                }
+            } @else if($i == $box-shadow-end-index) {
+                td:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset -1px 0 0 0 $top-box-shadow-color,
+                            inset 1px 0 0 0 $left-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset -1px 0 0 0 $top-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    }
+                }
+            } @else {
+                td:nth-of-type(#{$i}) {
+                    @if ($show-right-border-box-shadow) {
+                        box-shadow:
+                            inset 1px 0 0 0 $left-box-shadow-color,
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    } @else {
+                        box-shadow:
+                            inset 0 1px 0 0 $top-box-shadow-color,
+                            inset 0 -1px 0 0 $bottom-box-shadow-color !important;
+                    }
+                }
+            }
+        }
+
+        @each $columnNumber, $sticky-prop in $sticky-left-map {
+            $left-offset: map.get($sticky-prop, "left");
+            $z-index: map.get($sticky-prop, "z-index");
+
+            td:nth-of-type(#{$columnNumber}) {
+                @include sticky-left($left-offset, $z-index);
+            }
+        }
+    }
+}
+
+@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
+    td {
+        cursor: pointer;
+        background: $bg-color;
+        box-shadow: none !important;
+
+        div:nth-child(1) {
+            color: #000;
+            @include ellipsify();
+            @include fonts(Roboto, 0.75rem, normal, normal, normal, normal, 0px);
+        }
+
+        div:nth-child(2) {
+            color: #a7a7a7;
+            @include ellipsify();
+            @include fonts(Roboto, 0.75rem, normal, 500, normal, normal, 0.3px);
+        }
+    }
+
+    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
+    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
+    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
+
+    @for $i from $box-shadow-start-index through $box-shadow-end-index {
+        @if ($i == $box-shadow-start-index) {
+            td:nth-of-type(#{$i}) {
+                @if ($show-right-border-box-shadow) {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                } @else {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                }
+            }
+        } @else if($i == $box-shadow-end-index) {
+            td:nth-of-type(#{$i}) {
+                @if ($show-right-border-box-shadow) {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset -1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                } @else {
+                    box-shadow:
+                        inset -1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                }
+            }
+        } @else {
+            td:nth-of-type(#{$i}) {
+                @if ($show-right-border-box-shadow) {
+                    box-shadow:
+                        inset 1px 0 0 0 $left-right-box-shadow-color,
+                        inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                } @else {
+                    box-shadow: inset 0 -1px 0 0 $top-bottom-box-shadow-color !important;
+                }
+            }
+        }
+    }
+
+    @each $columnNumber, $sticky-prop in $sticky-left-map {
+        $left-offset: map.get($sticky-prop, "left");
+        $z-index: map.get($sticky-prop, "z-index");
+
+        td:nth-of-type(#{$columnNumber}) {
+            @include sticky-left($left-offset, $z-index);
+        }
+    }
+}
+
+@mixin table-data-shadow($columnNumber) {
+    .scroll-left-shadow-effect:not(.no-data-table) td:nth-of-type(#{$columnNumber}) {
+        filter: drop-shadow(2px 0 1px $lightGray-4);
+    }
+}
+
+@mixin no-data-table($table-container-height, $box-shadow-map, $row-height-map: ()) {
+    .table-container.no-data-table > div {
+        height: $table-container-height !important;
+    }
+
+    $box-shadow-start-index: map.get($box-shadow-map, "box-shadow-start-index");
+    $box-shadow-end-index: map.get($box-shadow-map, "box-shadow-end-index");
+    $box-shadow-color: map.get($box-shadow-map, "box-shadow-color");
+
+    tbody {
+        @if (map.has-key($row-height-map, "row-height")) {
+            tr.no-border-tr {
+                height: map.get($row-height-map, "row-height") !important;
+            }
+        }
+
+        tr.no-border-tr:first-of-type {
+            @for $i from $box-shadow-start-index through $box-shadow-end-index {
+                td:nth-of-type(#{$i}) {
+                    @if ($i == $box-shadow-start-index) {
+                        box-shadow: inset 1px 0 0 0 $box-shadow-color !important;
+                    } @else if($i == $box-shadow-end-index) {
+                        box-shadow: inset -1px 0 0 0 $box-shadow-color !important;
+                    } @else {
+                        box-shadow: none !important;
+                    }
+                }
+            }
+        }
+
+        tr.no-border-tr:last-of-type {
+            @for $i from $box-shadow-start-index through $box-shadow-end-index {
+                td:nth-of-type(#{$i}) {
+                    @if ($i == $box-shadow-start-index) {
+                        box-shadow: inset 1px -1px 0 0 $box-shadow-color !important;
+                    } @else if($i == $box-shadow-end-index) {
+                        box-shadow: inset -1px -1px 0 0 $box-shadow-color !important;
+                    } @else {
+                        box-shadow: inset 0 -1px 0 0 $box-shadow-color !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin table-bottom-border($box-shadow-map) {
+    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+    $show-right-border-box-shadow: map.get($box-shadow-map, "show-right-border-box-shadow");
+    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-bs-color");
+    $left-right-box-shadow-color: map.get($box-shadow-map, "left-right-bs-color");
+
+    .bottom-border {
+        border-bottom: 1px solid $top-bottom-box-shadow-color;
+    }
+
+    .bottom-border tbody {
+        tr:last-of-type {
+            @for $i from $box-shadow-start-index through $box-shadow-end-index {
+                @if ($i == $box-shadow-start-index) {
+                    td:nth-of-type(#{$i}) {
+                        @if ($show-right-border-box-shadow) {
+                            box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
+                        } @else {
+                            box-shadow: inset 1px 0 0 0 $left-right-box-shadow-color !important;
+                        }
+                    }
+                } @else if($i == $box-shadow-end-index) {
+                    td:nth-of-type(#{$i}) {
+                        @if ($show-right-border-box-shadow) {
+                            box-shadow:
+                                inset 1px 0 0 0 $left-right-box-shadow-color,
+                                inset -1px 0 0 0 $left-right-box-shadow-color !important;
+                        } @else {
+                            box-shadow: inset -1px 0 0 0 $left-right-box-shadow-color !important;
+                        }
+                    }
+                } @else {
+                    td:nth-of-type(#{$i}) {
+                        @if ($show-right-border-box-shadow) {
+                            box-shadow: inset 1px 0 0 0 $top-bottom-box-shadow-color !important;
+                        } @else {
+                            box-shadow: none !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}