diff --git a/BlazorGrid/Styles/bootstrap/scss/_variables.scss b/BlazorGrid/Styles/bootstrap/scss/_variables.scss
index 3ff0c65..b192d65 100644
--- a/BlazorGrid/Styles/bootstrap/scss/_variables.scss
+++ b/BlazorGrid/Styles/bootstrap/scss/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -299,7 +301,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      $spacer / 2 !default;
+$headings-margin-bottom:      math.div($spacer, 2) !default;
 $headings-font-family:        null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -494,7 +496,7 @@ $input-height-border:                   $input-border-width * 2 !default;
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, math.div($input-padding-y, 2)) !default;
 
 $input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
 $input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -564,7 +566,7 @@ $custom-radio-indicator-border-radius:          50% !default;
 $custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
 
 $custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius:         math.div($custom-control-indicator-size, 2) !default;
 $custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
 
 $custom-select-padding-y:           $input-padding-y !default;
@@ -709,12 +711,12 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              $spacer / 2 !default;
+$nav-divider-margin-y:              math.div($spacer, 2) !default;
 
 
 // Navbar
 
-$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-y:                  math.div($spacer, 2) !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
@@ -723,7 +725,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            math.div($nav-link-height - $navbar-brand-height, 2) !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -838,7 +840,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-group-margin:                 math.div($grid-gutter-width, 2) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
diff --git a/BlazorGrid/wwwroot/dist/blazorgrid-bootstrap.min.css b/BlazorGrid/wwwroot/dist/blazorgrid-bootstrap.min.css
index 6e93d14..ccc5ff8 100644
--- a/BlazorGrid/wwwroot/dist/blazorgrid-bootstrap.min.css
+++ b/BlazorGrid/wwwroot/dist/blazorgrid-bootstrap.min.css
@@ -1 +1 @@
-@charset "UTF-8";.blazor-grid-wrapper{position:relative;height:100%;min-height:250px}.blazor-grid-wrapper .grid-overlay{position:absolute;bottom:0;left:0;right:0;top:0;display:flex;flex-flow:column;justify-content:center;background:rgba(255,255,255,.8);z-index:100}.blazor-grid-wrapper .blazor-grid{height:100%;max-height:inherit;min-height:inherit;background-color:inherit;overflow-y:auto;overflow-x:hidden}.blazor-grid-wrapper .blazor-grid .grid-scrollview{display:grid;height:100%;align-content:start;background-color:inherit;min-width:0}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-span-all,.blazor-grid-wrapper .blazor-grid .grid-scrollview>:not(.grid-row){grid-column:1/-1}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-stretch{justify-self:stretch;height:100%}.blazor-grid-wrapper .blazor-grid .grid-row{display:contents}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder{display:block;user-select:none;border-radius:.2rem;background:rgba(0,0,0,.04);overflow:hidden;position:relative}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder>span{top:0;position:absolute;display:block;width:400px;height:100%;animation:placeholderBackground 5s infinite ease-in-out;background:linear-gradient(270deg,transparent,rgba(0,0,0,.08),rgba(0,0,0,.08),transparent);background-size:400px 100%}.blazor-grid-wrapper .blazor-grid .grid-row>*{padding:.75rem .75rem;border-bottom:1px solid rgba(0,0,0,.125);border-left:2px solid transparent;border-top:1px solid transparent;white-space:nowrap;min-width:0;overflow:hidden}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header{background-color:inherit}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>*{top:0;position:sticky;white-space:nowrap;background:#fff;z-index:10;font-weight:700}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>:first-child{border-left-color:transparent!important}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>* .blazor-grid-sort-icon::after{opacity:.5;content:"↑↓";font-size:110%;letter-spacing:-2px;line-height:100%;display:inline-block;min-width:1.5rem;text-align:center}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon::after{opacity:1!important;color:#007bff;letter-spacing:initial}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-asc::after{content:"↓"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-desc::after{content:"↑"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover{color:#007bff!important;background:#f8f9fa}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus .blazor-grid-sort-icon::after,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover .blazor-grid-sort-icon::after{opacity:.5}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:active{background:#e9ecef}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header:hover>:not(:first-child){border-left:2px solid #f8f9fa}.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted>*{background:#007bff;color:#fff}.blazor-grid-wrapper .blazor-grid .grid-row.clickable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:focus>*,.blazor-grid-wrapper .blazor-grid .grid-row.clickable:hover>*{background-color:#f8f9fa;color:#495057}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:active>*{background-color:#e9ecef;color:#212529}@keyframes placeholderBackground{0%{transform:translateX(-400px)}to{transform:translateX(100vw)}}
\ No newline at end of file
+@charset "UTF-8";.blazor-grid-wrapper{position:relative;height:100%;min-height:250px}.blazor-grid-wrapper .grid-overlay{position:absolute;bottom:0;left:0;right:0;top:0;display:flex;flex-flow:column;justify-content:center;background:rgba(255,255,255,.8);z-index:100}.blazor-grid-wrapper .blazor-grid{height:100%;max-height:inherit;min-height:inherit;background-color:inherit;overflow-y:auto;overflow-x:hidden}.blazor-grid-wrapper .blazor-grid .grid-scrollview{display:grid;height:100%;align-content:start;background-color:inherit;min-width:0}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-span-all,.blazor-grid-wrapper .blazor-grid .grid-scrollview>:not(.grid-row){grid-column:1/-1}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-stretch{justify-self:stretch;height:100%}.blazor-grid-wrapper .blazor-grid .grid-row{display:contents}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder{display:block;user-select:none;border-radius:.2rem;background:rgba(0,0,0,.04);overflow:hidden;position:relative}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder>span{top:0;position:absolute;display:block;width:400px;height:100%;animation:placeholderBackground 5s infinite ease-in-out;background:linear-gradient(270deg,transparent,rgba(0,0,0,.08),rgba(0,0,0,.08),transparent);background-size:400px 100%}.blazor-grid-wrapper .blazor-grid .grid-row>*{padding:.75rem .75rem;border-bottom:1px solid rgba(0,0,0,.125);border-left:2px solid transparent;border-top:1px solid transparent;white-space:nowrap;min-width:0;overflow:visible}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header{background-color:inherit}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>*{top:0;position:sticky;white-space:nowrap;background:#fff;z-index:10;font-weight:700}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>:first-child{border-left-color:transparent!important}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>* .blazor-grid-sort-icon::after{opacity:.5;content:"↑↓";font-size:110%;letter-spacing:-2px;line-height:100%;display:inline-block;min-width:1.5rem;text-align:center}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon::after{opacity:1!important;color:#007bff;letter-spacing:initial}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-asc::after{content:"↓"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-desc::after{content:"↑"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover{color:#007bff!important;background:#f8f9fa}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus .blazor-grid-sort-icon::after,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover .blazor-grid-sort-icon::after{opacity:.5}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:active{background:#e9ecef}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header:hover>:not(:first-child){border-left:2px solid #f8f9fa}.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted>*{background:#007bff;color:#fff}.blazor-grid-wrapper .blazor-grid .grid-row.clickable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:focus>*,.blazor-grid-wrapper .blazor-grid .grid-row.clickable:hover>*{background-color:#f8f9fa;color:#495057}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:active>*{background-color:#e9ecef;color:#212529}@keyframes placeholderBackground{0%{transform:translateX(-400px)}to{transform:translateX(100vw)}}
\ No newline at end of file
diff --git a/BlazorGrid/wwwroot/dist/blazorgrid-spectre.min.css b/BlazorGrid/wwwroot/dist/blazorgrid-spectre.min.css
index 5e0728d..1bc56ee 100644
--- a/BlazorGrid/wwwroot/dist/blazorgrid-spectre.min.css
+++ b/BlazorGrid/wwwroot/dist/blazorgrid-spectre.min.css
@@ -1 +1 @@
-@charset "UTF-8";.blazor-grid-wrapper{position:relative;height:100%;min-height:250px}.blazor-grid-wrapper .grid-overlay{position:absolute;bottom:0;left:0;right:0;top:0;display:flex;flex-flow:column;justify-content:center;background:rgba(255,255,255,.8);z-index:100}.blazor-grid-wrapper .blazor-grid{height:100%;max-height:inherit;min-height:inherit;background-color:inherit;overflow-y:auto;overflow-x:hidden}.blazor-grid-wrapper .blazor-grid .grid-scrollview{display:grid;height:100%;align-content:start;background-color:inherit;min-width:0}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-span-all,.blazor-grid-wrapper .blazor-grid .grid-scrollview>:not(.grid-row){grid-column:1/-1}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-stretch{justify-self:stretch;height:100%}.blazor-grid-wrapper .blazor-grid .grid-row{display:contents}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder{display:block;user-select:none;border-radius:.1rem;background:rgba(0,0,0,.04);overflow:hidden;position:relative}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder>span{top:0;position:absolute;display:block;width:400px;height:100%;animation:placeholderBackground 5s infinite ease-in-out;background:linear-gradient(270deg,transparent,rgba(0,0,0,.08),rgba(0,0,0,.08),transparent);background-size:400px 100%}.blazor-grid-wrapper .blazor-grid .grid-row>*{padding:.4rem .4rem;border-bottom:1px solid #dadee4;border-left:2px solid transparent;border-top:1px solid transparent;white-space:nowrap;min-width:0;overflow:hidden}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header{background-color:inherit}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>*{top:0;position:sticky;white-space:nowrap;background:#fff;z-index:10;font-weight:700}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>:first-child{border-left-color:transparent!important}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>* .blazor-grid-sort-icon::after{opacity:.5;content:"↑↓";font-size:110%;letter-spacing:-2px;line-height:100%;display:inline-block;min-width:1.5rem;text-align:center}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon::after{opacity:1!important;color:#5755d9;letter-spacing:initial}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-asc::after{content:"↓"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-desc::after{content:"↑"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover{color:#6362dc!important;background:#eef0f3}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus .blazor-grid-sort-icon::after,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover .blazor-grid-sort-icon::after{opacity:.5}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:active{background:#e8ebef}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header:hover>:not(:first-child){border-left:2px solid #eef0f3}.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted>*{background:#e8ebef;color:#3b4351}.blazor-grid-wrapper .blazor-grid .grid-row.clickable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:focus>*,.blazor-grid-wrapper .blazor-grid .grid-row.clickable:hover>*{background-color:#eef0f3;color:#3b4351}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:active>*{background-color:#e8ebef;color:#3b4351}@keyframes placeholderBackground{0%{transform:translateX(-400px)}to{transform:translateX(100vw)}}
\ No newline at end of file
+@charset "UTF-8";.blazor-grid-wrapper{position:relative;height:100%;min-height:250px}.blazor-grid-wrapper .grid-overlay{position:absolute;bottom:0;left:0;right:0;top:0;display:flex;flex-flow:column;justify-content:center;background:rgba(255,255,255,.8);z-index:100}.blazor-grid-wrapper .blazor-grid{height:100%;max-height:inherit;min-height:inherit;background-color:inherit;overflow-y:auto;overflow-x:hidden}.blazor-grid-wrapper .blazor-grid .grid-scrollview{display:grid;height:100%;align-content:start;background-color:inherit;min-width:0}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-span-all,.blazor-grid-wrapper .blazor-grid .grid-scrollview>:not(.grid-row){grid-column:1/-1}.blazor-grid-wrapper .blazor-grid .grid-scrollview .grid-row-stretch{justify-self:stretch;height:100%}.blazor-grid-wrapper .blazor-grid .grid-row{display:contents}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder{display:block;user-select:none;border-radius:.1rem;background:rgba(0,0,0,.04);overflow:hidden;position:relative}.blazor-grid-wrapper .blazor-grid .grid-row.grid-row-placeholder .grid-cell-placeholder>span{top:0;position:absolute;display:block;width:400px;height:100%;animation:placeholderBackground 5s infinite ease-in-out;background:linear-gradient(270deg,transparent,rgba(0,0,0,.08),rgba(0,0,0,.08),transparent);background-size:400px 100%}.blazor-grid-wrapper .blazor-grid .grid-row>*{padding:.4rem .4rem;border-bottom:1px solid #dadee4;border-left:2px solid transparent;border-top:1px solid transparent;white-space:nowrap;min-width:0;overflow:visible}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header{background-color:inherit}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>*{top:0;position:sticky;white-space:nowrap;background:#fff;z-index:10;font-weight:700}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>:first-child{border-left-color:transparent!important}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>* .blazor-grid-sort-icon::after{opacity:.5;content:"↑↓";font-size:110%;letter-spacing:-2px;line-height:100%;display:inline-block;min-width:1.5rem;text-align:center}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon::after{opacity:1!important;color:#5755d9;letter-spacing:initial}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-asc::after{content:"↓"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sorted .blazor-grid-sort-icon.sorted-desc::after{content:"↑"}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover{color:#6362dc!important;background:#eef0f3}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:focus .blazor-grid-sort-icon::after,.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:hover .blazor-grid-sort-icon::after{opacity:.5}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header>.sortable:active{background:#e8ebef}.blazor-grid-wrapper .blazor-grid .grid-row.grid-header:hover>:not(:first-child){border-left:2px solid #eef0f3}.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted.clickable>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted:hover>*,.blazor-grid-wrapper .blazor-grid .grid-row.highlighted>*{background:#e8ebef;color:#3b4351}.blazor-grid-wrapper .blazor-grid .grid-row.clickable{cursor:pointer}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:focus>*,.blazor-grid-wrapper .blazor-grid .grid-row.clickable:hover>*{background-color:#eef0f3;color:#3b4351}.blazor-grid-wrapper .blazor-grid .grid-row.clickable:active>*{background-color:#e8ebef;color:#3b4351}@keyframes placeholderBackground{0%{transform:translateX(-400px)}to{transform:translateX(100vw)}}
\ No newline at end of file