@annalib/anna-core 38.0.0 → 38.0.2

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

@@ -1,586 +1,586 @@
-@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 !important;
-    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-style($bg-color) {
-    background: $bg-color;
-    padding: 2px 8px;
-    line-height: normal;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 0;
-
-    .upper-label {
-        @include fonts(Roboto, var(--table-header-fs), normal, 700, normal, normal, 0.3px);
-        color: $charcoal;
-        margin-bottom: 0;
-    }
-
-    .lower-label {
-        @include fonts(Roboto, var(--table-header-fs), normal, 700, 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.dummy-header {
-        justify-content: center;
-        margin-left: 50% !important;
-        margin-right: 50% !important;
-        width: -webkit-fill-available;
-    }
-
-    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;
-    }
-}
-
-@function get-box-shadow-for-first-header($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-last-header($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-middle-header($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
-@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 {
-        background: $bg-color;
-
-        th {
-            box-shadow: none !important;
-            cursor: default;
-            @include table-header-style($bg-color);
-        }
-
-        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-
-        @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            @if ($i == $box-shadow-start-index) {
-                th:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-first-header($box-shadow-map) !important;
-                }
-            } @else if($i == $box-shadow-end-index) {
-                th:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-last-header($box-shadow-map) !important;
-                }
-            } @else {
-                th:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-middle-header($box-shadow-map) !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-common-styling($bg-color) {
-    padding: 2px 8px;
-    background: $bg-color;
-    position: sticky;
-    position: -webkit-sticky;
-
-    .upper-label {
-        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
-        color: $charcoal;
-    }
-
-    .lower-label {
-        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
-        color: $darkGray;
-        margin-top: -3px;
-    }
-
-    br {
-        display: block;
-        content: "";
-        margin-top: -6px;
-    }
-}
-
-@function get-box-shadow-for-first-total-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-last-total-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return 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;
-    }
-}
-
-@function get-box-shadow-for-middle-total-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color;
-    }
-}
-
-@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 {
-            top: $sticky-top !important;
-            @include total-row-common-styling($bg-color);
-        }
-
-        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-
-        @for $i from $box-shadow-start-index through $box-shadow-end-index {
-            @if ($i == $box-shadow-start-index) {
-                td:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-first-total-row($box-shadow-map) !important;
-                }
-            } @else if($i == $box-shadow-end-index) {
-                td:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-last-total-row($box-shadow-map) !important;
-                }
-            } @else {
-                td:nth-of-type(#{$i}) {
-                    box-shadow: get-box-shadow-for-middle-total-row($box-shadow-map) !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-common-styling($bg-color: white) {
-    div:nth-child(1) {
-        color: #000;
-        @include ellipsify();
-        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
-    }
-
-    div:nth-child(2) {
-        color: #a7a7a7;
-        @include ellipsify();
-        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
-    }
-}
-
-@function get-box-shadow-for-first-table-data($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    } @else {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-last-table-data($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return 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;
-    } @else {
-        @return inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-middle-table-data($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    } @else {
-        @return inset 0 -1px 0 0 $top-bottom-box-shadow-color;
-    }
-}
-
-@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
-    td {
-        cursor: pointer;
-        background: $bg-color;
-        box-shadow: none !important;
-
-        @include table-data-common-styling($bg-color);
-    }
-
-    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
-    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
-
-    @for $i from $box-shadow-start-index through $box-shadow-end-index {
-        @if ($i == $box-shadow-start-index) {
-            td:nth-of-type(#{$i}) {
-                box-shadow: get-box-shadow-for-first-table-data($box-shadow-map) !important;
-            }
-        } @else if($i == $box-shadow-end-index) {
-            td:nth-of-type(#{$i}) {
-                box-shadow: get-box-shadow-for-last-table-data($box-shadow-map) !important;
-            }
-        } @else {
-            td:nth-of-type(#{$i}) {
-                box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map) !important;
-            }
-        }
-    }
-
-    $map-length: list.length($sticky-left-map);
-    $last-column-index: if($map-length > 0, nth(map-keys($sticky-left-map), $map-length), null);
-
-    @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);
-        }
-    }
-
-    // @if ($last-column-index != null) {
-    //     td:nth-child(n + #{$last-column-index}),
-    //     th:nth-child(n + #{$last-column-index}) {
-    //         position: relative;
-    //         top: -1px !important;
-    //         // background-color: lightblue !important; /* Apply styles from non-sticky column to last column **/
-    //     }
-    // }
-}
-
-@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;
-        tr td {
-            filter: none !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;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@function get-box-shadow-for-bottom-border-first-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color;
-    } @else {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-bottom-border-last-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color;
-    } @else {
-        @return inset -1px 0 0 0 $left-right-box-shadow-color;
-    }
-}
-
-@function get-box-shadow-for-bottom-border-middle-row($box-shadow-map) {
-    $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");
-
-    @if ($show-right-border-box-shadow) {
-        @return inset 1px 0 0 0 $top-bottom-box-shadow-color;
-    } @else {
-        @return none;
-    }
-}
-
-@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");
-    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-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}) {
-                        box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map) !important;
-                    }
-                } @else if($i == $box-shadow-end-index) {
-                    td:nth-of-type(#{$i}) {
-                        box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map) !important;
-                    }
-                } @else {
-                    td:nth-of-type(#{$i}) {
-                        box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map) !important;
-                    }
-                }
-            }
-        }
-    }
-}
-
-$default-box-shadow-map: (
-    "show-right-border-box-shadow": true,
-    "top-bottom-bs-color": #d4d4d4,
-    "left-right-bs-color": #d4d4d4,
-);
-
-@mixin default-table-header-without-sticky-map($box-shadow-map: $default-box-shadow-map, $bg-color: #ededed) {
-    th {
-        border: none;
-        @include table-header-style($bg-color);
-        box-shadow: get-box-shadow-for-middle-header($box-shadow-map);
-    }
-
-    th:first-of-type {
-        box-shadow: get-box-shadow-for-first-header($box-shadow-map);
-    }
-
-    th:last-of-type {
-        box-shadow: get-box-shadow-for-last-header($box-shadow-map);
-    }
-}
-
-$default-box-shadow-map-for-table-data: (
-    "show-right-border-box-shadow": true,
-    "top-bottom-bs-color": #d4d4d4,
-    "left-right-bs-color": #d4d4d4,
-);
-
-@mixin default-table-body-without-sticky-map(
-    $box-shadow-map: $default-box-shadow-map-for-table-data,
-    $bg-color: white
-) {
-    td {
-        padding: 2px 8px;
-        border: none;
-        @include table-data-common-styling($bg-color);
-        box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map);
-    }
-
-    td:first-of-type {
-        box-shadow: get-box-shadow-for-first-table-data($box-shadow-map);
-    }
-
-    td:last-of-type {
-        box-shadow: get-box-shadow-for-last-table-data($box-shadow-map);
-    }
-}
-
-$default-box-shadow-map-for-bottom-border: (
-    "show-right-border-box-shadow": true,
-    "top-bottom-bs-color": #d4d4d4,
-    "left-right-bs-color": #d4d4d4,
-);
-
-@mixin default-bottom-border($box-shadow-map: $default-box-shadow-map-for-bottom-border) {
-    tr:last-of-type {
-        td {
-            box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map);
-        }
-
-        td:first-of-type {
-            box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map);
-        }
-
-        td:last-of-type {
-            box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map);
-        }
-    }
-}
+@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 !important;
+    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-style($bg-color) {
+    background: $bg-color;
+    padding: 2px 8px;
+    line-height: normal;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+
+    .upper-label {
+        @include fonts(Roboto, var(--table-header-fs), normal, 700, normal, normal, 0.3px);
+        color: $charcoal;
+        margin-bottom: 0;
+    }
+
+    .lower-label {
+        @include fonts(Roboto, var(--table-header-fs), normal, 700, 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.dummy-header {
+        justify-content: center;
+        margin-left: 50% !important;
+        margin-right: 50% !important;
+        width: -webkit-fill-available;
+    }
+
+    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;
+    }
+}
+
+@function get-box-shadow-for-first-header($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return 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;
+    }
+}
+
+@function get-box-shadow-for-last-header($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return 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;
+    }
+}
+
+@function get-box-shadow-for-middle-header($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return inset 0 1px 0 0 $top-bottom-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
+    }
+}
+
+@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 {
+        background: $bg-color;
+
+        th {
+            box-shadow: none !important;
+            cursor: default;
+            @include table-header-style($bg-color);
+        }
+
+        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+
+        @for $i from $box-shadow-start-index through $box-shadow-end-index {
+            @if ($i == $box-shadow-start-index) {
+                th:nth-of-type(#{$i}) {
+                    box-shadow: get-box-shadow-for-first-header($box-shadow-map) !important;
+                }
+            } @else if($i == $box-shadow-end-index) {
+                th:nth-of-type(#{$i}) {
+                    box-shadow: get-box-shadow-for-last-header($box-shadow-map) !important;
+                }
+            } @else {
+                th:nth-of-type(#{$i}) {
+                    box-shadow: get-box-shadow-for-middle-header($box-shadow-map) !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-common-styling($bg-color) {
+    padding: 2px 8px;
+    background: $bg-color;
+    position: sticky;
+    position: -webkit-sticky;
+
+    .upper-label {
+        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
+        color: $charcoal;
+    }
+
+    .lower-label {
+        @include fonts(Roboto, var(--table-body-fs), normal, 700, normal, normal, 0.3px);
+        color: $darkGray;
+        margin-top: -3px;
+    }
+
+    br {
+        display: block;
+        content: "";
+        margin-top: -6px;
+    }
+}
+
+@function get-box-shadow-for-first-total-row($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return 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;
+    }
+}
+
+@function get-box-shadow-for-last-total-row($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return 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;
+    }
+}
+
+@function get-box-shadow-for-middle-total-row($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return inset 0 1px 0 0 $top-box-shadow-color, inset 0 -1px 0 0 $bottom-box-shadow-color;
+    }
+}
+
+@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 {
+            top: $sticky-top !important;
+            @include total-row-common-styling($bg-color);
+        }
+
+        $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+        $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+
+        @for $i from $box-shadow-start-index through $box-shadow-end-index {
+            @if ($i == $box-shadow-start-index) {
+                td:nth-of-type(#{$i}) {
+                    box-shadow: get-box-shadow-for-first-total-row($box-shadow-map) !important;
+                }
+            } @else if($i == $box-shadow-end-index) {
+                td:nth-of-type(#{$i}) {
+                    box-shadow: get-box-shadow-for-last-total-row($box-shadow-map) !important;
+                }
+            } @else {
+                td:nth-of-type(#{$i}) {
+                    box-shadow: get-box-shadow-for-middle-total-row($box-shadow-map) !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-common-styling($bg-color: white) {
+    div:nth-child(1) {
+        color: #000;
+        @include ellipsify();
+        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
+    }
+
+    div:nth-child(2) {
+        color: #a7a7a7;
+        @include ellipsify();
+        @include fonts(Roboto, var(--table-body-fs), normal, 400, normal, normal, 0px);
+    }
+}
+
+@function get-box-shadow-for-first-table-data($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
+    } @else {
+        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
+    }
+}
+
+@function get-box-shadow-for-last-table-data($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return 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;
+    } @else {
+        @return inset -1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
+    }
+}
+
+@function get-box-shadow-for-middle-table-data($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset 0 -1px 0 0 $top-bottom-box-shadow-color;
+    } @else {
+        @return inset 0 -1px 0 0 $top-bottom-box-shadow-color;
+    }
+}
+
+@mixin table-data($sticky-left-map, $box-shadow-map, $bg-color: white) {
+    td {
+        cursor: pointer;
+        background: $bg-color;
+        box-shadow: none !important;
+
+        @include table-data-common-styling($bg-color);
+    }
+
+    $box-shadow-start-index: map.get($box-shadow-map, "start-index");
+    $box-shadow-end-index: map.get($box-shadow-map, "end-index");
+
+    @for $i from $box-shadow-start-index through $box-shadow-end-index {
+        @if ($i == $box-shadow-start-index) {
+            td:nth-of-type(#{$i}) {
+                box-shadow: get-box-shadow-for-first-table-data($box-shadow-map) !important;
+            }
+        } @else if($i == $box-shadow-end-index) {
+            td:nth-of-type(#{$i}) {
+                box-shadow: get-box-shadow-for-last-table-data($box-shadow-map) !important;
+            }
+        } @else {
+            td:nth-of-type(#{$i}) {
+                box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map) !important;
+            }
+        }
+    }
+
+    $map-length: list.length($sticky-left-map);
+    $last-column-index: if($map-length > 0, nth(map-keys($sticky-left-map), $map-length), null);
+
+    @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);
+        }
+    }
+
+    // @if ($last-column-index != null) {
+    //     td:nth-child(n + #{$last-column-index}),
+    //     th:nth-child(n + #{$last-column-index}) {
+    //         position: relative;
+    //         top: -1px !important;
+    //         // background-color: lightblue !important; /* Apply styles from non-sticky column to last column **/
+    //     }
+    // }
+}
+
+@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;
+        tr td {
+            filter: none !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;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@function get-box-shadow-for-bottom-border-first-row($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return inset 1px 0 0 0 $left-right-box-shadow-color;
+    } @else {
+        @return inset 1px 0 0 0 $left-right-box-shadow-color;
+    }
+}
+
+@function get-box-shadow-for-bottom-border-last-row($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return inset 1px 0 0 0 $left-right-box-shadow-color, inset -1px 0 0 0 $left-right-box-shadow-color;
+    } @else {
+        @return inset -1px 0 0 0 $left-right-box-shadow-color;
+    }
+}
+
+@function get-box-shadow-for-bottom-border-middle-row($box-shadow-map) {
+    $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");
+
+    @if ($show-right-border-box-shadow) {
+        @return inset 1px 0 0 0 $top-bottom-box-shadow-color;
+    } @else {
+        @return none;
+    }
+}
+
+@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");
+    $top-bottom-box-shadow-color: map.get($box-shadow-map, "top-bottom-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}) {
+                        box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map) !important;
+                    }
+                } @else if($i == $box-shadow-end-index) {
+                    td:nth-of-type(#{$i}) {
+                        box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map) !important;
+                    }
+                } @else {
+                    td:nth-of-type(#{$i}) {
+                        box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map) !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+$default-box-shadow-map: (
+    "show-right-border-box-shadow": true,
+    "top-bottom-bs-color": #d4d4d4,
+    "left-right-bs-color": #d4d4d4,
+);
+
+@mixin default-table-header-without-sticky-map($box-shadow-map: $default-box-shadow-map, $bg-color: #ededed) {
+    th {
+        border: none;
+        @include table-header-style($bg-color);
+        box-shadow: get-box-shadow-for-middle-header($box-shadow-map);
+    }
+
+    th:first-of-type {
+        box-shadow: get-box-shadow-for-first-header($box-shadow-map);
+    }
+
+    th:last-of-type {
+        box-shadow: get-box-shadow-for-last-header($box-shadow-map);
+    }
+}
+
+$default-box-shadow-map-for-table-data: (
+    "show-right-border-box-shadow": true,
+    "top-bottom-bs-color": #d4d4d4,
+    "left-right-bs-color": #d4d4d4,
+);
+
+@mixin default-table-body-without-sticky-map(
+    $box-shadow-map: $default-box-shadow-map-for-table-data,
+    $bg-color: white
+) {
+    td {
+        padding: 2px 8px;
+        border: none;
+        @include table-data-common-styling($bg-color);
+        box-shadow: get-box-shadow-for-middle-table-data($box-shadow-map);
+    }
+
+    td:first-of-type {
+        box-shadow: get-box-shadow-for-first-table-data($box-shadow-map);
+    }
+
+    td:last-of-type {
+        box-shadow: get-box-shadow-for-last-table-data($box-shadow-map);
+    }
+}
+
+$default-box-shadow-map-for-bottom-border: (
+    "show-right-border-box-shadow": true,
+    "top-bottom-bs-color": #d4d4d4,
+    "left-right-bs-color": #d4d4d4,
+);
+
+@mixin default-bottom-border($box-shadow-map: $default-box-shadow-map-for-bottom-border) {
+    tr:last-of-type {
+        td {
+            box-shadow: get-box-shadow-for-bottom-border-middle-row($box-shadow-map);
+        }
+
+        td:first-of-type {
+            box-shadow: get-box-shadow-for-bottom-border-first-row($box-shadow-map);
+        }
+
+        td:last-of-type {
+            box-shadow: get-box-shadow-for-bottom-border-last-row($box-shadow-map);
+        }
+    }
+}