fixed png export for table viz

src/pages/Dashboards/Table.tsx

@@ -59,7 +59,7 @@ const TableViz = (props: { data: TileQueryResponse; tick_config: TickConfig[] })
 
 	return (
 		<Stack ref={containerRef} style={{ flex: 1, width: '100%' }}>
-			<Stack style={{ height: initialHeight }}>
+			<Stack style={{ height: initialHeight }} className='png-export-table-container'>
 				{hasNoData ? (
 					<NoDataView />
 				) : (

src/pages/Dashboards/Tile.tsx

@@ -174,7 +174,7 @@ function TileControls(props: { tile: TileType; data: TileQueryResponse }) {
 
 	const exportTileConfig = useCallback(async () => {
 		const santizedConfig = _.omit(props.tile, 'tile_id');
-		return exportJson(JSON.stringify(santizedConfig, null, 2), name)
+		return exportJson(JSON.stringify(santizedConfig, null, 2), name);
 	}, [name]);
 
 	if (allowDrag)
@@ -258,9 +258,10 @@ const Tile = (props: { id: string }) => {
 	const vizType = _.get(tile, 'visualization.visualization_type', null);
 	const tick_config = _.get(tile, 'visualization.tick_config', []);
 	const Viz = getViz(vizType);
+	const vizTypeExportClassName = `png-export-${vizType || ''}`;
 
 	return (
-		<Stack h="100%" gap={0} className={`png-export-tile-container ${classes.container}`}>
+		<Stack h="100%" gap={0} className={`png-export-tile-container ${classes.container} ${vizTypeExportClassName}`}>
 			<Stack className={`png-export-tile-header ${classes.tileHeader}`} gap={0}>
 				<Stack gap={0}>
 					<Text title={tile.name} lineClamp={1} className={`png-export-tile-title ${classes.tileTitle}`}>

src/utils/exportImage.ts

@@ -6,14 +6,15 @@ export const makeExportClassName = (name: string) => {
 	return `png-capture-${sanitizedName}`;
 };
 
-const onCloneCallback = (element: HTMLElement) => {
+export const onCloneCallback = (element: HTMLElement) => {
 	const containerDiv = element.querySelector('.png-export-tile-container') as HTMLElement;
 	const menuIcon = element.querySelector('.png-export-menu-icon') as HTMLElement;
 	const tileTitleDiv = element.querySelector('.png-export-tile-title') as HTMLElement;
 	const headerDiv = element.querySelector('.png-export-tile-header') as HTMLElement;
 	const tileDescriptionDiv = element.querySelector('.png-export-tile-description') as HTMLElement;
 	const timeRangeText = element.querySelector('.png-export-tile-timerange') as HTMLElement;
 	const logoImage = element.querySelector('.png-export-parseable-logo') as HTMLElement;
+
 	if (headerDiv) {
 		headerDiv.style.height = 'auto';
 		headerDiv.style.alignItems = 'flex-start';
@@ -48,6 +49,32 @@ const onCloneCallback = (element: HTMLElement) => {
 		logoImage.style.marginTop = '4px';
 		logoImage.style.marginLeft = '4px';
 	}
+
+	// checking if its a table
+	// add modular logic if we need customization specific to chart typea
+	if (element.querySelector(':scope > .png-export-table')) {
+		const layoutRow = element.closest('.react-grid-layout') as HTMLElement;
+		const tableContainer = element.querySelector('.png-export-table-container') as HTMLElement;
+
+		if (element) {
+			element.style.width = 'auto';
+		}
+
+		if (layoutRow) {
+			layoutRow.style.height = '100000px';
+		}
+
+		if (tableContainer) {
+			tableContainer.style.height = 'auto';
+		}
+
+		const tbodyCells = element.querySelectorAll('tbody td') as NodeListOf<HTMLElement>;
+
+		tbodyCells.forEach((cell) => {
+			cell.style.maxWidth = 'none';
+			cell.style.whiteSpace = 'normal';
+		});
+	}
 };
 
 const handleCapture = (opts: { className: string; fileName: string }) => {