Try stacked table

src/assets/style/smoothly.css

@@ -58,5 +58,4 @@
 
 	--smoothly-shadow: 0 0 4px 2px rgba(var(--smoothly-color-contrast), 0.25);
 	--smoothly-shadow-strong: 0 0 4px 4px rgba(var(--smoothly-light-color), 0.25);
-	--table-width: 100%;
 }

src/components.d.ts

@@ -630,11 +630,15 @@ export namespace Components {
         "tooltip": string;
     }
     interface SmoothlyTable {
+        "cardAt"?: string;
         "columns": number;
     }
     interface SmoothlyTableBody {
     }
     interface SmoothlyTableCell {
+        "cardArea"?: "checkbox" | "primary" | "status" | "actions";
+        "cardLabel"?: string;
+        "cardVisibility": "always" | "opened" | "hidden";
         "span"?: number;
     }
     interface SmoothlyTableDemo {
@@ -2881,11 +2885,15 @@ declare namespace LocalJSX {
         "tooltip"?: string;
     }
     interface SmoothlyTable {
+        "cardAt"?: string;
         "columns"?: number;
     }
     interface SmoothlyTableBody {
     }
     interface SmoothlyTableCell {
+        "cardArea"?: "checkbox" | "primary" | "status" | "actions";
+        "cardLabel"?: string;
+        "cardVisibility"?: "always" | "opened" | "hidden";
         "span"?: number;
     }
     interface SmoothlyTableDemo {

src/components/table/cell/index.tsx

@@ -7,10 +7,14 @@ import { Component, h, Host, Prop, VNode } from "@stencil/core"
 })
 export class SmoothlyTableCell {
 	@Prop({ reflect: true }) span?: number = 1
+	@Prop({ reflect: true }) cardLabel?: string
+	@Prop({ reflect: true }) cardArea?: "checkbox" | "primary" | "status" | "actions"
+	@Prop({ reflect: true }) cardVisibility: "always" | "opened" | "hidden" = "always"
 
 	render(): VNode | VNode[] {
 		return (
-			<Host style={{ "--smoothly-table-cell-span": this.span?.toString(10) }}>
+			<Host class="smoothly-table-cell" style={{ "--smoothly-table-cell-span": this.span?.toString(10) }}>
+				{typeof this.cardLabel == "string" && <span class="smoothly-card-field-label">{this.cardLabel}</span>}
 				<slot />
 			</Host>
 		)

src/components/table/cell/style.css

@@ -1,7 +1,4 @@
-:host {
-	grid-column: span var(--smoothly-table-cell-span, 1);
-	display: flex;
-	align-items: center;
-	padding: 0.5rem 1.1rem;
-	white-space: nowrap;
+:host>.smoothly-card-field-label {
+	min-width: var(--smoothly-card-field-label-min-width, 12ch);
+	color: rgb(var(--smoothly-card-label-color, var(--smoothly-medium-color)));
 }

src/components/table/demo/index.tsx

@@ -10,9 +10,9 @@ export class SmoothlyTableDemo {
 		return (
 			<Host>
 				<smoothly-table-demo-filler-row />
-				<smoothly-table-demo-group />
-				<smoothly-table-demo-colspan />
-				<smoothly-table-demo-simple />
+				{/* <smoothly-table-demo-group /> */}
+				{/* <smoothly-table-demo-colspan /> */}
+				{/* <smoothly-table-demo-simple /> */}
 				<smoothly-table-demo-nested-no-cell />
 				<smoothly-table-demo-filtered />
 			</Host>

src/components/table/demo/nested-no-cell/index.tsx

@@ -11,7 +11,7 @@ export class SmoothlyTableDemoNestedNoCell {
 		return (
 			<Host>
 				<smoothly-display type="text" value="Nested" />
-				<smoothly-table color="primary" columns={8}>
+				<smoothly-table color="primary" columns={9} card-at="48rem">
 					<smoothly-table-head>
 						<smoothly-table-row>
 							<div>Id</div>
@@ -22,20 +22,35 @@ export class SmoothlyTableDemoNestedNoCell {
 							<div>EyeColor</div>
 							<div>Gender</div>
 							<div>Company</div>
+							<div></div>
 						</smoothly-table-row>
 					</smoothly-table-head>
 					<smoothly-table-body>
 						{data.map(entry => (
 							<smoothly-table-expandable-row>
 								<smoothly-table-demo-nested-no-cell-inner color="secondary" data={entry.friends} slot={"detail"} />
-								<div>{entry.id}</div>
-								<div>{entry.registered}</div>
-								<div>{entry.name}</div>
-								<div>{entry.age}</div>
-								<div>{entry.balance}</div>
-								<div>{entry.eyeColor}</div>
-								<div>{entry.gender}</div>
-								<div>{entry.company}</div>
+								<smoothly-table-cell card-label="Id">{entry.id}</smoothly-table-cell>
+								<smoothly-table-cell card-label="Registered">{entry.registered}</smoothly-table-cell>
+								<smoothly-table-cell card-area="primary" card-label="Name">
+									{entry.name}
+								</smoothly-table-cell>
+								<smoothly-table-cell card-label="Age">{entry.age}</smoothly-table-cell>
+								<smoothly-table-cell card-label="Balance" card-visibility="opened">
+									{entry.balance}
+								</smoothly-table-cell>
+								<smoothly-table-cell card-area="status" card-label="EyeColor">
+									{entry.eyeColor}
+								</smoothly-table-cell>
+								<smoothly-table-cell card-visibility="hidden">{entry.gender}</smoothly-table-cell>
+								<smoothly-table-cell card-label="Company">{entry.company}</smoothly-table-cell>
+								<smoothly-table-cell card-area="actions">
+									<smoothly-icon
+										name="trash-bin-outline"
+										color="danger"
+										fill="outline"
+										onClick={() => console.log("Delete", entry.name)}
+									/>
+								</smoothly-table-cell>
 							</smoothly-table-expandable-row>
 						))}
 					</smoothly-table-body>

src/components/table/demo/nested-no-cell/inner/index.tsx

@@ -27,10 +27,10 @@ export class SmoothlyTableDemoNestedNoCellInner {
 					<smoothly-table-body>
 						{this.data?.map(entry => (
 							<smoothly-table-expandable-row>
-								<div>{entry.id}</div>
-								<div>{entry.name}</div>
-								<div>{entry.age}</div>
-								<div>{entry.balance}</div>
+								<div class="smoothly-table-cell">{entry.id}</div>
+								<div class="smoothly-table-cell">{entry.name}</div>
+								<div class="smoothly-table-cell">{entry.age}</div>
+								<div class="smoothly-table-cell">{entry.balance}</div>
 							</smoothly-table-expandable-row>
 						))}
 					</smoothly-table-body>

src/components/table/demo/nested-no-cell/inner/style.css

@@ -1,5 +1,5 @@
 :host {
 	display: block;
 	margin: 1em auto;
-	width: 60%;
+	max-width: min(30rem, 100%);
 }

src/components/table/demo/simple/simple.tsx

@@ -34,23 +34,6 @@ export class SmoothlyTableDemoSimple {
 								</smoothly-table-expandable-cell>
 							</smoothly-table-row>
 						))}
-						<smoothly-table-expandable-row>
-							<a class="smoothly-row" href="#" onClick={e => !e.button && e.preventDefault()} target="_blank">
-								<smoothly-table-cell>Cell1 in expandable row</smoothly-table-cell>
-								<smoothly-table-cell>Cell2 in expandable row</smoothly-table-cell>
-							</a>
-							<div slot={"detail"}>
-								Content
-								<br />
-								of
-								<br />
-								the
-								<br />
-								expandable
-								<br />
-								row
-							</div>
-						</smoothly-table-expandable-row>
 						<smoothly-table-row>
 							<smoothly-table-cell>Cell5</smoothly-table-cell>
 							<smoothly-table-expandable-cell>

src/components/table/demo/style.css

@@ -5,5 +5,6 @@
 	max-width: 80rem;
 	width: 100%;
 	margin: auto;
-	padding: 2rem;
+	padding-block: 2rem;
+	padding-inline: 0.5rem;
 }

src/components/table/expandable/arrow.css

@@ -20,7 +20,7 @@
 
 :host::slotted(smoothly-table-cell:first-child:hover)::before,
 :host::slotted(smoothly-table-cell:first-child:has(~ smoothly-table-cell:hover))::before,
-:host>div.content:hover:first-child::before {
+:host>div.smoothly-table-cell:hover:first-child::before {
 	opacity: 1;
 	border-bottom: 1px solid rgb(var(--smoothly-color-contrast));
 	border-right: 1px solid rgb(var(--smoothly-color-contrast));

src/components/table/expandable/cell/index.tsx

@@ -35,7 +35,7 @@ export class SmoothlyTableExpandableCell {
 			<Host
 				style={{ "--smoothly-table-cell-span": this.span?.toString(10) }}
 				onClick={(e: MouseEvent) => this.clickHandler(e)}>
-				<div class={"content"}>
+				<div class={"smoothly-table-cell"}>
 					<slot />
 				</div>
 				<div class={"detail"} ref={(el: HTMLDivElement) => (this.detailElement = el)}>

src/components/table/expandable/cell/style.scss

@@ -4,11 +4,12 @@
 	display: contents;
 }
 
-:host>div {
-	padding: 0.5rem 1.1rem;
+:host > .smoothly-table-cell {
+	padding-inline: var(--smoothly-table-cell-padding-inline, 1.1rem);
+	min-height: var(--smoothly-table-cell-min-height, 2.75rem);
 }
 
-:host>div.content {
+:host > div.smoothly-table-cell {
 	grid-column: span var(--smoothly-table-cell-span, 1);
 	display: flex;
 	box-sizing: border-box;
@@ -25,37 +26,37 @@
 	}
 }
 
-:host[open]>div.content {
+:host[open] > div.smoothly-table-cell {
 	@include arrow-open;
 }
 
-:host>div:first-child {
+:host > div:first-child {
 	cursor: pointer;
 }
 
-:host>div.detail {
+:host > div.detail {
 	grid-column: 1 / -1;
 	grid-row: 2;
 	position: relative;
 }
 
-:host[open]>div.content {
+:host[open] > div.smoothly-table-cell {
 	box-shadow: 1px 1px 1px -1px rgb(var(--smoothly-table-border)) inset,
 		-3px -1px 1px -3px rgb(var(--smoothly-table-border)) inset;
 }
 
-:host[open]>div {
+:host[open] > div {
 	background-color: rgb(var(--smoothly-table-expanded-background));
 	color: rgb(var(--smoothly-table-expanded-foreground));
 	stroke: rgb(var(--smoothly-table-expanded-foreground));
 	fill: rgb(var(--smoothly-table-expanded-foreground));
 }
 
-:host:not([open])>div.detail {
+:host:not([open]) > div.detail {
 	display: none;
 }
 
-:host>div.detail::before {
+:host > div.detail::before {
 	content: "";
 	position: absolute;
 	display: flex;
@@ -70,7 +71,7 @@
 		0px 0px 1px 0px rgb(var(--smoothly-table-border));
 }
 
-:host>div.detail::after {
+:host > div.detail::after {
 	content: "";
 	position: absolute;
 	display: flex;

src/components/table/expandable/row/index.tsx

@@ -6,16 +6,34 @@ import { Component, Event, EventEmitter, h, Host, Prop, VNode, Watch } from "@st
 	scoped: true,
 })
 export class SmoothlyTableExpandableRow {
-	private div?: HTMLDivElement
+	private detailElement?: HTMLDivElement
+	private expandButton?: HTMLDivElement
 	@Prop({ mutable: true, reflect: true }) open = false
 	@Event() smoothlyTableExpandableRowChange: EventEmitter<boolean>
 
+	isStacked(eventPath: EventTarget[]): boolean {
+		for (const el of eventPath) {
+			if (el instanceof HTMLElement && el.tagName.toLowerCase() == "smoothly-table") {
+				return el.classList.contains("cards")
+			}
+		}
+		return false
+	}
+
 	clickHandler(event: MouseEvent): void {
-		const clickedOnDetail = this.div && event.composedPath().includes(this.div)
-		if (!clickedOnDetail) {
-			const selection = window.getSelection()?.toString().trim()
-			if ((selection?.length ?? 0) == 0)
+		const isStacked = this.isStacked(event.composedPath())
+		if (isStacked) {
+			const clickedOnExpandButton = this.expandButton && event.composedPath().includes(this.expandButton)
+			if (clickedOnExpandButton) {
 				this.open = !this.open
+			}
+		} else {
+			const clickedOnDetail = this.detailElement && event.composedPath().includes(this.detailElement)
+			if (!clickedOnDetail) {
+				const selection = window.getSelection()?.toString().trim()
+				if ((selection?.length ?? 0) == 0)
+					this.open = !this.open
+			}
 		}
 	}
 	@Watch("open")
@@ -27,9 +45,10 @@ export class SmoothlyTableExpandableRow {
 		return (
 			<Host onClick={(e: MouseEvent) => this.clickHandler(e)}>
 				<slot />
-				<div class={"detail"} ref={e => (this.div = e)}>
+				<div class={"detail"} ref={e => (this.detailElement = e)}>
 					<slot name="detail" />
 				</div>
+				<div ref={e => (this.expandButton = e)} class="smoothly-expand-button"></div>
 			</Host>
 		)
 	}