show-scrollbar property added in f-table-schema

packages/flow-table/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.5.0] - 2024-07-08
+
+### Minor Changes
+
+- `show-scrollbar` property added in `f-table-schema`
+
 ## [2.4.8] - 2024-07-08
 
 ### Patch Changes

packages/flow-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-table",
-  "version": "2.4.8",
+  "version": "2.5.0",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

packages/flow-table/src/components/f-table-schema/f-table-schema.scss

@@ -9,5 +9,14 @@
 		flex: 1 1;
 		overflow: auto;
 		@include scrollbar();
+		&[show-scrollbar] {
+			scrollbar-width: thin;
+
+			&::-webkit-scrollbar {
+				display: block;
+				width: 6px;
+				height: 6px;
+			}
+		}
 	}
 }

packages/flow-table/src/components/f-table-schema/f-table-schema.ts

@@ -182,6 +182,16 @@ export class FTableSchema extends FRoot {
 		this.headerCellTemplate = val;
 	}
 
+	/**
+	 * to show scrollbar
+	 */
+	@property({ type: Boolean, reflect: true, attribute: "show-scrollbar" })
+	showScrollbar = false;
+
+	set ["show-scrollbar"](val: boolean) {
+		this.showScrollbar = val;
+	}
+
 	@state()
 	offset = 0;
 
@@ -466,7 +476,7 @@ export class FTableSchema extends FRoot {
 					  </f-div>`
 					: nothing}
 			</slot>
-			<div class="f-table-schema-wrapper">
+			<div class="f-table-schema-wrapper" ?show-scrollbar=${this.showScrollbar}>
 				<f-table
 					id="f-table-element"
 					.variant=${this.variant}

stories/flow-table/f-table-schema.stories.ts

@@ -75,6 +75,7 @@ export const Playground = {
 					.sortOrder=${args["sort-order"]}
 					.searchTerm=${args["search-term"]}
 					.showSearchBar=${args["show-search-bar"]}
+					.showScrollbar=${args["show-scrollbar"]}
 					.stickyCellBackground=${args["sticky-cell-background"]}
 					@next=${handleNext}
 					@toggle-row-details=${toggleRowDetails}
@@ -164,6 +165,11 @@ export const Playground = {
 			control: {
 				type: "boolean"
 			}
+		},
+		["show-scrollbar"]: {
+			control: {
+				type: "boolean"
+			}
 		}
 	},
 
@@ -181,6 +187,7 @@ export const Playground = {
 		["sort-order"]: "asc",
 		["search-term"]: "",
 		["show-search-bar"]: true,
+		["show-scrollbar"]: false,
 		["sticky-cell-background"]: "default",
 		["header-cell-template"]: (val: string) => {
 			return html`<f-div gap="small" align="middle-center">
@@ -413,6 +420,28 @@ export const ShowSearchBar = {
 	name: "show-search-bar"
 };
 
+export const ShowScrollBar = {
+	render: () => {
+		const data = getFakeUsers(20, 5);
+
+		return html`
+			<f-div gap="small" height="100%" overflow="scroll" gap="auto" width="100%">
+				<f-div direction="column" gap="medium" overflow="hidden">
+					<f-text> show-scrollbar="true"</f-text>
+					<f-table-schema show-scrollbar .data=${data}> </f-table-schema>
+				</f-div>
+				<f-divider></f-divider>
+				<f-div direction="column" gap="medium" overflow="hidden">
+					<f-text> show-scrollbar="false"</f-text>
+					<f-table-schema .showScrollbar=${false} .data=${data}> </f-table-schema>
+				</f-div>
+			</f-div>
+		`;
+	},
+
+	name: "show-scrollbar"
+};
+
 export const ToggleRowDetails = {
 	render: () => {
 		const data = getFakeUsers(10, 5);