Merge pull request #5839 from matuzalemsteles/table-indicator

chore(@clayui/core): adds support for resizer indicator in table
liferay · Jul 2, 2024 · 0531376 · 0531376
2 parents c8c3588 + c214d5c
commit 0531376
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx
@@ -79,12 +79,32 @@ type Props = {
 	 * Sets a text value if the component's content is not plain text.
 	 */
 	textValue?: string;
+
+	/**
+	 * @ignore
+	 */
+	UNSAFE_resizable?: boolean;
+
+	/**
+	 * @ignore
+	 */
+	UNSAFE_resizerClassName?: string;
+
+	/**
+	 * @ignore
+	 */
+	UNSAFE_resizerOnMouseDown?: (
+		event: React.MouseEvent<HTMLDivElement, MouseEvent>
+	) => void;
 } & React.ThHTMLAttributes<HTMLTableCellElement> &
 	React.TdHTMLAttributes<HTMLTableCellElement>;
 
 export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 	function CellInner(
 		{
+			UNSAFE_resizable,
+			UNSAFE_resizerClassName,
+			UNSAFE_resizerOnMouseDown,
 			align,
 			children,
 			className,
@@ -325,6 +345,13 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 				) : (
 					children
 				)}
+
+				{UNSAFE_resizable && (
+					<div
+						className={UNSAFE_resizerClassName}
+						onMouseDown={UNSAFE_resizerOnMouseDown}
+					/>
+				)}
 			</As>
 		);
 	}