{"version":3,"file":"DataTable.Cd85lJmc.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/2nruDLhkJ1AYRnTxQcKv/12X1WrwSC1RgmLbtIv4p/DataTable.js"],"sourcesContent":["// Responsive table with dynamic columns, unlimited rows, customizable header and row text styles, and alternating row colors\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useState}from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function DataTable(props){const{columnHeaders=[\"Header 1\",\"Header 2\",\"Header 3\"],rows=[{columns:[\"Row 1 Col 1\",\"Row 1 Col 2\",\"Row 1 Col 3\"]},{columns:[\"Row 2 Col 1\",\"Row 2 Col 2\",\"Row 2 Col 3\"]},{columns:[\"Row 3 Col 1\",\"Row 3 Col 2\",\"Row 3 Col 3\"]}],headerFont,rowFont,headerTextColor,rowTextColor,headerBackgroundColor,evenRowColor,oddRowColor,borderColor,showBorders,enableMobileSlide=true}=props;const containerRef=useRef(null);const[isDragging,setIsDragging]=useState(false);const[startX,setStartX]=useState(0);const[scrollLeft,setScrollLeft]=useState(0);// Touch/Mouse event handlers for mobile slide\nconst handleStart=clientX=>{if(!enableMobileSlide||!containerRef.current)return;setIsDragging(true);setStartX(clientX-containerRef.current.offsetLeft);setScrollLeft(containerRef.current.scrollLeft);};const handleMove=clientX=>{if(!isDragging||!enableMobileSlide||!containerRef.current)return;const x=clientX-containerRef.current.offsetLeft;const walk=(x-startX)*2// Scroll speed multiplier\n;containerRef.current.scrollLeft=scrollLeft-walk;};const handleEnd=()=>{setIsDragging(false);};// Mouse events\nconst handleMouseDown=e=>{handleStart(e.clientX);};const handleMouseMove=e=>{handleMove(e.clientX);};const handleMouseUp=()=>{handleEnd();};const handleMouseLeave=()=>{handleEnd();};// Touch events\nconst handleTouchStart=e=>{handleStart(e.touches[0].clientX);};const handleTouchMove=e=>{handleMove(e.touches[0].clientX);};const handleTouchEnd=()=>{handleEnd();};const tableStyle={width:\"100%\",borderCollapse:\"collapse\",tableLayout:\"fixed\",minWidth:enableMobileSlide?\"600px\":\"100%\"// Ensure table is wide enough to scroll on mobile\n};const cellStyle={padding:\"12px 8px\",textAlign:\"left\",wordWrap:\"break-word\",border:showBorders?`1px solid ${borderColor}`:\"none\"};const headerCellStyle={...cellStyle,...headerFont,color:headerTextColor,backgroundColor:headerBackgroundColor,fontWeight:headerFont?.fontWeight||\"bold\"};const getRowStyle=index=>({backgroundColor:index%2===0?evenRowColor:oddRowColor});const getRowCellStyle=()=>({...cellStyle,...rowFont,color:rowTextColor});const containerStyle={width:\"100%\",overflowX:enableMobileSlide?\"auto\":\"auto\",cursor:isDragging?\"grabbing\":enableMobileSlide?\"grab\":\"default\",userSelect:isDragging?\"none\":\"auto\",WebkitOverflowScrolling:\"touch\",scrollbarWidth:\"thin\",msOverflowStyle:\"auto\",// Custom scrollbar for webkit browsers\n...enableMobileSlide&&{scrollBehavior:\"smooth\"}};const numColumns=columnHeaders.length;return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:containerStyle,onMouseDown:handleMouseDown,onMouseMove:handleMouseMove,onMouseUp:handleMouseUp,onMouseLeave:handleMouseLeave,onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd,children:/*#__PURE__*/_jsxs(\"table\",{style:tableStyle,children:[/*#__PURE__*/_jsx(\"thead\",{children:/*#__PURE__*/_jsx(\"tr\",{children:columnHeaders.map((header,index)=>/*#__PURE__*/_jsx(\"th\",{style:headerCellStyle,children:header},index))})}),/*#__PURE__*/_jsx(\"tbody\",{children:rows.map((row,rowIndex)=>/*#__PURE__*/_jsx(\"tr\",{style:getRowStyle(rowIndex),children:columnHeaders.map((_,colIndex)=>/*#__PURE__*/_jsx(\"td\",{style:getRowCellStyle(),children:row.columns[colIndex]||\"\"},colIndex))},rowIndex))})]})});}addPropertyControls(DataTable,{columnHeaders:{type:ControlType.Array,title:\"Columns\",control:{type:ControlType.String,defaultValue:\"Header\"},defaultValue:[\"Header 1\",\"Header 2\",\"Header 3\"]},rows:{type:ControlType.Array,title:\"Rows\",control:{type:ControlType.Object,controls:{columns:{type:ControlType.Array,title:\"Columns\",control:{type:ControlType.String,defaultValue:\"Cell\"},defaultValue:[\"Cell\",\"Cell\",\"Cell\"]}}},defaultValue:[{columns:[\"Row 1 Col 1\",\"Row 1 Col 2\",\"Row 1 Col 3\"]},{columns:[\"Row 2 Col 1\",\"Row 2 Col 2\",\"Row 2 Col 3\"]},{columns:[\"Row 3 Col 1\",\"Row 3 Col 2\",\"Row 3 Col 3\"]}]},enableMobileSlide:{type:ControlType.Boolean,title:\"Mobile Slide\",defaultValue:true,enabledTitle:\"Enable\",disabledTitle:\"Disable\"},headerFont:{type:ControlType.Font,title:\"Header Font\",defaultValue:{fontSize:\"15px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},rowFont:{type:ControlType.Font,title:\"Row Font\",defaultValue:{fontSize:\"15px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},headerTextColor:{type:ControlType.Color,title:\"Header Text Color\",defaultValue:\"#000000\"},rowTextColor:{type:ControlType.Color,title:\"Row Text Color\",defaultValue:\"#000000\"},headerBackgroundColor:{type:ControlType.Color,title:\"Header Background Color\",defaultValue:\"#F5F5F5\"},evenRowColor:{type:ControlType.Color,title:\"Even Row Color\",defaultValue:\"#F5F5F5\"},oddRowColor:{type:ControlType.Color,title:\"Odd Row Color\",defaultValue:\"#FFFFFF\"},showBorders:{type:ControlType.Boolean,title:\"Show Borders\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},borderColor:{type:ControlType.Color,title:\"Border Color\",defaultValue:\"#EEEEEE\",hidden:({showBorders})=>!showBorders}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DataTable\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DataTable.map"],"mappings":"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"}