@enki-tek/fms-web-components 0.0.84 → 0.0.85

package/components/EnkiTable/EnkiTable.svelte

@@ -1,23 +1,21 @@
 <script>
-    import { Table } from 'sveltestrap';
-    export let size = "lg"
-    export let type = ' ';
-	export let className ='' ;
-    const tableTypes = {
-        hover:'table-hover' ,
-        striped:'table-striped'
-    }
-    let tableClasses = ['table' ,className];
-    if (tableTypes.hasOwnProperty(type.trim())) {
-        tableClasses.push(tableTypes[type.trim()]);
-    }
-        
+	import { Table } from 'sveltestrap';
+	export let size = 'lg';
+	export let type = ' ';
+	export let className = '';
+	const tableTypes = {
+		hover: 'table-hover',
+		striped: 'table-striped'
+	};
+	let tableClasses = [className];
+	if (tableTypes.hasOwnProperty(type.trim())) {
+		tableClasses.push(tableTypes[type.trim()]);
+	}
 </script>
 
-<Table {...$$restProps} size = {size} class={tableClasses.join(' ')}   >
-    <slot />
+<Table {...$$restProps} {size} class={tableClasses.join(' ')} >
+	<slot />
 </Table>
-
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@@ -27,6 +25,17 @@
   font-style: normal;
   font-weight: 700;
   font-family: Roboto !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.table-scroll) {
+  position: relative !important;
+}
+:global(.table-scroll thead) {
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
 }
 .th-div {
   font-size: 17px;

package/components/EnkiTable/Table.scss

@@ -1,32 +1,45 @@
 @import './../variable.scss';
 
 %common-fonts {
-    color: $Title-Color;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 700;
-    font-family: $bodyFonts !important;
+	color: $Title-Color;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 700;
+	font-family: $bodyFonts !important;
+    text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+:global(.table-scroll) {
+	position: relative !important;
+}
+
+:global(.table-scroll thead) {
+	top: 0;
+	position: sticky !important;
+	z-index: 1;
 }
 
 .th-div {
-    @extend %common-fonts;
-    font-size: 17px;
-    text-wrap: nowrap;
-    text-transform: capitalize;
-    padding-right: 40px !important;
+	@extend %common-fonts;
+	font-size: 17px;
+	text-wrap: nowrap;
+	text-transform: capitalize;
+	padding-right: 40px !important;
 }
 
 .td-div {
-    width: 12.5rem;
-    padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
-    @extend %common-fonts;
-    font-weight: 400;
-    vertical-align: top;
-    text-wrap: balance;
+	width: 12.5rem;
+	padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+	@extend %common-fonts;
+	font-weight: 400;
+	vertical-align: top;
+	text-wrap: balance;
 }
 
-@media (max-width:768px){
-    .th-div {
-        font-size: 15px;
-    }
-}
+@media (max-width: 768px) {
+	.th-div {
+		font-size: 15px;
+	}
+}

package/components/EnkiTable/TableBody.svelte

@@ -15,6 +15,17 @@
   font-style: normal;
   font-weight: 700;
   font-family: Roboto !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.table-scroll) {
+  position: relative !important;
+}
+:global(.table-scroll thead) {
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
 }
 .th-div {
   font-size: 17px;

package/components/EnkiTable/TableCell.svelte

@@ -17,6 +17,17 @@ let tdStyles = ['td-div', className]
   font-style: normal;
   font-weight: 700;
   font-family: Roboto !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.table-scroll) {
+  position: relative !important;
+}
+:global(.table-scroll thead) {
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
 }
 .th-div {
   font-size: 17px;

package/components/EnkiTable/TableHead.svelte

@@ -14,6 +14,17 @@
   font-style: normal;
   font-weight: 700;
   font-family: Roboto !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.table-scroll) {
+  position: relative !important;
+}
+:global(.table-scroll thead) {
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
 }
 .th-div {
   font-size: 17px;

package/components/EnkiTable/TableHeadCell.svelte

@@ -17,6 +17,17 @@
   font-style: normal;
   font-weight: 700;
   font-family: Roboto !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.table-scroll) {
+  position: relative !important;
+}
+:global(.table-scroll thead) {
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
 }
 .th-div {
   font-size: 17px;

package/components/EnkiTable/TableRow.svelte

@@ -21,6 +21,17 @@
   font-style: normal;
   font-weight: 700;
   font-family: Roboto !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global(.table-scroll) {
+  position: relative !important;
+}
+:global(.table-scroll thead) {
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
 }
 .th-div {
   font-size: 17px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.84",
+  "version": "0.0.85",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",