@visns-studio/visns-components 5.10.7 → 5.10.9

package/src/examples/TableWidthConfigExample.jsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import Form from '../components/crm/Form';
+
+/**
+ * Example demonstrating table width configuration in Form component
+ * 
+ * This example shows how to use the "width" property in the JSON config
+ * to control the table container width when displaying return data.
+ */
+const TableWidthConfigExample = () => {
+    const [selectedWidth, setSelectedWidth] = useState('1500');
+    
+    // Base form settings that can be modified
+    const getFormSettings = (width) => ({
+        primaryKey: 'id',
+        url: '/api/example',
+        fields: [
+            {
+                id: 'name',
+                label: 'Name',
+                type: 'text',
+                required: true
+            },
+            {
+                id: 'email',
+                label: 'Email',
+                type: 'email',
+                required: true
+            }
+        ],
+        save: {
+            return: {
+                type: 'table',
+                width: width, // This controls the table container width
+                param: 'data',
+                props: {
+                    // Optional table props like grouping
+                    // groupBy: ['status']
+                }
+            }
+        }
+    });
+
+    const widthOptions = [
+        { value: '', label: 'Default (100%)', description: 'Uses full available width' },
+        { value: '800', label: '800px', description: 'Compact table for smaller datasets' },
+        { value: '1200', label: '1200px', description: 'Standard wide table' },
+        { value: '1500', label: '1500px', description: 'Extra wide table for many columns' },
+        { value: '2000', label: '2000px', description: 'Very wide table for detailed data' }
+    ];
+
+    return (
+        <div style={{ padding: '20px' }}>
+            <h2>Table Width Configuration Example</h2>
+            
+            <div style={{ 
+                marginBottom: '30px', 
+                padding: '20px', 
+                backgroundColor: '#f8fafc', 
+                borderRadius: '8px',
+                border: '1px solid #e2e8f0'
+            }}>
+                <h3>Configuration:</h3>
+                <div style={{ marginBottom: '15px' }}>
+                    <label style={{ fontWeight: 'bold', marginRight: '10px' }}>
+                        Table Width:
+                    </label>
+                    <select 
+                        value={selectedWidth} 
+                        onChange={(e) => setSelectedWidth(e.target.value)}
+                        style={{
+                            padding: '8px 12px',
+                            borderRadius: '4px',
+                            border: '1px solid #d1d5db',
+                            marginRight: '15px'
+                        }}
+                    >
+                        {widthOptions.map(option => (
+                            <option key={option.value} value={option.value}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                    <span style={{ color: '#6b7280', fontSize: '14px' }}>
+                        {widthOptions.find(opt => opt.value === selectedWidth)?.description}
+                    </span>
+                </div>
+                
+                <div style={{ 
+                    backgroundColor: '#1f2937', 
+                    color: '#f9fafb', 
+                    padding: '15px', 
+                    borderRadius: '6px',
+                    fontFamily: 'monospace',
+                    fontSize: '14px',
+                    overflow: 'auto'
+                }}>
+                    <pre>{JSON.stringify({
+                        save: {
+                            return: {
+                                type: 'table',
+                                width: selectedWidth || undefined,
+                                param: 'data'
+                            }
+                        }
+                    }, null, 2)}</pre>
+                </div>
+            </div>
+
+            <div style={{ 
+                border: '1px solid #d1d5db', 
+                borderRadius: '8px',
+                overflow: 'hidden',
+                backgroundColor: 'white'
+            }}>
+                <div style={{ 
+                    padding: '15px', 
+                    backgroundColor: '#f8fafc', 
+                    borderBottom: '1px solid #e2e8f0',
+                    fontWeight: 'bold'
+                }}>
+                    Form with Table Width: {selectedWidth ? `${selectedWidth}px` : 'Default'}
+                </div>
+                
+                <div style={{ padding: '20px' }}>
+                    <Form
+                        formSettings={getFormSettings(selectedWidth)}
+                        formType="create"
+                        // Mock other required props
+                        style={{}}
+                        // The Form component will use the width configuration when displaying return data
+                    />
+                </div>
+            </div>
+
+            <div style={{ 
+                marginTop: '30px', 
+                padding: '20px', 
+                backgroundColor: '#fef3c7', 
+                borderRadius: '8px',
+                border: '1px solid #f59e0b'
+            }}>
+                <h3>How It Works:</h3>
+                <ul style={{ marginTop: '10px', lineHeight: '1.6' }}>
+                    <li><strong>JSON Configuration:</strong> Set the <code>width</code> property in <code>save.return</code></li>
+                    <li><strong>Container Width:</strong> The table container will be set to the specified width in pixels</li>
+                    <li><strong>Responsive:</strong> Uses <code>min(width, 100vw - 40px)</code> to prevent overflow on small screens</li>
+                    <li><strong>Centering:</strong> Tables with custom width are automatically centered</li>
+                    <li><strong>Scrolling:</strong> Horizontal scrolling is enabled when content exceeds container width</li>
+                </ul>
+                
+                <h4 style={{ marginTop: '20px' }}>Supported Formats:</h4>
+                <ul style={{ marginTop: '5px' }}>
+                    <li><code>"width": "1500"</code> - String format (pixels)</li>
+                    <li><code>"width": 1500</code> - Number format (pixels)</li>
+                    <li><code>width</code> property omitted - Uses default 100% width</li>
+                </ul>
+
+                <h4 style={{ marginTop: '20px' }}>Example Scenarios:</h4>
+                <ul style={{ marginTop: '5px' }}>
+                    <li><strong>800px:</strong> Perfect for 4-6 columns with moderate content</li>
+                    <li><strong>1200px:</strong> Good for 6-8 columns or tables with longer text content</li>
+                    <li><strong>1500px:</strong> Ideal for 8-12 columns or detailed reporting tables</li>
+                    <li><strong>2000px:</strong> Best for very wide tables with many columns or complex data</li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default TableWidthConfigExample;

package/src/index.js

@@ -57,7 +57,6 @@ import GenericIndex from './components/crm/generic/GenericIndex';
 import GenericMain from './components/crm/generic/GenericMain';
 import GenericQuote from './components/crm/generic/GenericQuote';
 import GenericReport from './components/crm/generic/GenericReport';
-import GenericReportImproved from './components/crm/generic/GenericReportImproved';
 import GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
@@ -98,7 +97,6 @@ export {
     GenericMain,
     GenericQuote,
     GenericReport,
-    GenericReportImproved,
     GenericSort,
     Loader,
     Login,