tabulator-tables 5.5.4 → 5.6.1

package/src/scss/tabulator.scss

@@ -37,6 +37,13 @@ $footerSeparatorColor:#999 !default; //footer bottom separator color
 $footerActiveColor:#d00 !default; //footer bottom active text color
 
 
+//range selection
+$rangeBorderColor: #2975DD !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: #3876ca !default; //header background color when selected
+$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
+$rangeHeaderHighlightBackground: #D6D6D6 !default; //header background color when highlighted
+$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
 
 //Tabulator Containing Element
 .tabulator{
@@ -72,6 +79,13 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		user-select: none;
 	}
 	
+	&.tabulator-ranges{
+		.tabulator-cell:not(.tabulator-editing){
+			user-select: none;
+		}
+	}
+	
+	
 	//column header containing element
 	.tabulator-header{
 		position:relative;
@@ -92,6 +106,8 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		-webkit-user-select: none;
 		-o-user-select: none;
 		
+		outline: none;
+		
 		&.tabulator-header-hidden{
 			display:none;
 		}
@@ -128,6 +144,16 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				pointer-events: none;
 			}
 			
+			&.tabulator-range-highlight{
+				background-color: $rangeHeaderHighlightBackground;
+				color: $rangeHeaderTextHighlightBackground;
+			}
+			
+			&.tabulator-range-selected{
+				background-color: $rangeHeaderSelectedBackground;
+				color: $rangeHeaderSelectedTextColor;
+			}
+			
 			//hold content of column header
 			.tabulator-col-content{
 				box-sizing:border-box;
@@ -158,7 +184,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					overflow: hidden;
 					text-overflow: ellipsis;
 					vertical-align:bottom;
-
+					
 					&.tabulator-col-title-wrap{
 						white-space: normal;
 						text-overflow: initial;
@@ -295,7 +321,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				&[aria-sort="descending"]{
 					.tabulator-col-content .tabulator-col-sorter{
 						color: $sortArrowActive;
-
+						
 						@media (hover:hover) and (pointer:fine){
 							&.tabulator-col-sorter-element .tabulator-arrow:hover{
 								cursor:pointer;
@@ -376,6 +402,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		
 		.tabulator-calcs-holder{
 			box-sizing:border-box;
+			display: inline-block;
 			
 			background:lighten($headerBackgroundColor, 5%) !important;
 			
@@ -393,7 +420,8 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			}
 		}
 		
-		.tabulator-frozen-rows-holder{		
+		.tabulator-frozen-rows-holder{	
+			display: inline-block;	
 			&:empty{
 				display: none;
 			}
@@ -419,13 +447,13 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			align-items:center;
 			justify-content: center;
 			
+			min-width:100%;
+			width:100%;
+			
 			&[tabulator-render-mode="virtual"]{
 				min-height:100%;
-				min-width:100%;
 			}
 			
-			width:100%;
-			
 			.tabulator-placeholder-contents {
 				display: inline-block;
 				text-align: center;
@@ -466,6 +494,36 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 			}
 			
 		}
+		
+		.tabulator-range-overlay {
+			position: absolute;
+			inset: 0;
+			z-index: 10;
+			pointer-events: none;
+			
+			& .tabulator-range {
+				position: absolute;
+				box-sizing: border-box;
+				border: 1px solid $rangeBorderColor;
+				
+				&.tabulator-range-active::after {
+					content: '';
+					position: absolute;
+					right: -3px;
+					bottom: -3px;
+					width: 6px;
+					height: 6px;
+					background-color: $rangeHandleColor;
+					border-radius: 999px;
+				}
+			}
+			
+			& .tabulator-range-cell-active {
+				position: absolute;
+				box-sizing: border-box;
+				border: 2px solid $rangeBorderColor;
+			}
+		}
 	}
 	
 	//footer element
@@ -599,7 +657,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		margin-left: -3px;
 		margin-right: -3px;
 		
-		z-index: 10;
+		z-index: 11;
 		vertical-align: middle;
 		
 		@media (hover:hover) and (pointer:fine){
@@ -703,6 +761,28 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		z-index:15;
 	}
 	
+	&.tabulator-range-highlight{
+		.tabulator-cell.tabulator-range-row-header{
+			background-color: $rangeHeaderHighlightBackground;
+			color: $rangeHeaderTextHighlightBackground;
+		}
+		
+		&.tabulator-range-selected{
+			.tabulator-cell.tabulator-range-row-header{
+				background-color: $rangeHeaderSelectedBackground;
+				color: $rangeHeaderSelectedTextColor;
+			}	
+		}
+	}
+
+	
+	&.tabulator-range-selected{
+		.tabulator-cell.tabulator-range-row-header{
+			background-color: $rangeHeaderSelectedBackground;
+			color: $rangeHeaderSelectedTextColor;
+		}
+	}
+	
 	//row resize handles
 	.tabulator-row-resize-handle{
 		position:absolute;
@@ -723,8 +803,6 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		}
 	}
 	
-	
-	
 	.tabulator-responsive-collapse{
 		box-sizing:border-box;
 		
@@ -763,6 +841,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 		white-space:nowrap;
 		overflow:hidden;
 		text-overflow:ellipsis;
+		outline:none;
 		
 		&.tabulator-frozen{
 			display: inline-block;
@@ -831,7 +910,11 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 				}
 			}
 		}
-
+		
+		&.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){
+			background-color: $rowSelectedBackground;
+		}
+		
 		.tabulator-data-tree-branch-empty{
 			display:inline-block;
 			width:7px;
@@ -960,7 +1043,7 @@ $footerActiveColor:#d00 !default; //footer bottom active text color
 					display:none;
 				}
 			}
-
+			
 			svg{
 				stroke:$rowBackgroundColor;
 			}
@@ -1497,5 +1580,4 @@ body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen){
 			}
 		}
 	}
-}
-
+}

package/src/scss/themes/bulma/tabulator_bulma.scss

@@ -38,6 +38,13 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 // $footerSeparatorColor:#999 !default; //footer bottom separator color
 // $footerActiveColor:#d00 !default; //footer bottom active text color
 
+//range selection
+$rangeBorderColor: #{darken($rowSelectedBackground, 10%)} !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
+$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
+
+
 @import "../../tabulator.scss";
 
 .tabulator{

package/src/scss/themes/materialize/tabulator_materialize.scss

@@ -26,7 +26,6 @@ $rowHoverBackground:$table-striped-color !default; //row background color on hov
 $rowSelectedBackground:$primary-color !default; //row background color when selected
 $rowSelectedBackgroundHover: $primary-color !default;//row background color when selected and hovered
 
-
 $editBoxColor:$primary-color !default; //border color for edit boxes
 $errorColor:#dd0000 !default; //error indication
 
@@ -35,6 +34,13 @@ $footerBorderColor:$table-border-color !default; //footer border color
 $footerSeparatorColor:$table-border-color !default; //footer bottom separator color
 $footerActiveColor:$primary-color !default; //footer bottom active text color
 
+//range selection
+$rangeBorderColor: #{darken($primary-color, 10%)} !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
+$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
+
+
 @import "../../tabulator.scss";
 
 .tabulator{

package/src/scss/themes/tabulator_midnight.scss

@@ -35,6 +35,19 @@ $footerBorderColor:#aaa !default; //footer border color
 $footerSeparatorColor:#999 !default; //footer bottom separator color
 $footerActiveColor:#fff !default; //footer bottom active text color
 
+$headerHighlightBackground: #777 !default; //header background color when highlighted
+$headerTextHighlightBackground: #fff !default; //header background color when highlighted
+
+//range selection
+$rangeBorderColor: #ccc !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
+$rangeHeaderSelectedTextColor: #333 !default; //header text color when selected
+$rangeHeaderHighlightBackground: #999 !default; //header background color when highlighted
+$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
+
+
+
 @import "../tabulator.scss";
 
 //Tabulator Containing Element

package/src/scss/themes/tabulator_modern.scss

@@ -41,6 +41,15 @@ $handleWidth:10px !default; //width of the row handle
 $handleColor: $primary !default; //color for odd numbered rows
 $handleColorAlt: lighten($primary, 10%) !default; //color for even numbered rows
 
+//range selection
+$rangeBorderColor: #{darken($primary, 10%)} !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
+$rangeHeaderHighlightBackground: $primary !default; //header background color when highlighted
+$rangeHeaderTextHighlightBackground: #fff !default; //header text color when highlighted
+
+
+
 @import "../tabulator.scss";
 
 .tabulator{

package/src/scss/themes/tabulator_site.scss

@@ -22,8 +22,9 @@ $rowBorderColor:#aaa !default; //table border color
 $rowTextColor:#333 !default; //table text color
 $rowHoverBackground:#bbb !default; //row background color on hover
 
-$rowSelectedBackground: #9ABCEA !default; //row background color when selected
-$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
+$rowSelectedBackground: #70c28e !default; //row background color when selected
+$rowSelectedBackgroundHover: #269b51 !default;//row background color when selected and hovered
+
 
 $editBoxColor:#1D68CD !default; //border color for edit boxes
 $errorColor:#dd0000 !default; //error indication
@@ -35,6 +36,14 @@ $footerBorderColor:#aaa !default; //footer border color
 $footerSeparatorColor:#3FB449 !default; //footer bottom separator color
 $footerActiveColor:$footerSeparatorColor !default; //footer bottom active text color
 
+//range selection
+$rangeBorderColor: $rowSelectedBackgroundHover !default; //range border color
+$rangeHandleColor: $rangeBorderColor !default; //range handle color
+$rangeHeaderSelectedBackground: $rangeBorderColor !default; //header background color when selected
+$rangeHeaderSelectedTextColor: #FFFFFF !default; //header text color when selected
+$rangeHeaderHighlightBackground: $rowSelectedBackground !default; //header background color when highlighted
+$rangeHeaderTextHighlightBackground: #000000 !default; //header text color when highlighted
+
 @import "../tabulator.scss";
 
 .tabulator{
@@ -56,10 +65,12 @@ $footerActiveColor:$footerSeparatorColor !default; //footer bottom active text c
 
 		.tabulator-col{
 			background-color: $headerBackgroundColor;
+			
 
 			.tabulator-col-content{
 				padding:8px;
 			}
+			
 		}
 
 		.tabulator-calcs-holder{