@visns-studio/visns-components 5.10.7 → 5.10.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
88
88
|
},
|
|
89
89
|
"name": "@visns-studio/visns-components",
|
|
90
|
-
"version": "5.10.
|
|
90
|
+
"version": "5.10.8",
|
|
91
91
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
92
92
|
"main": "src/index.js",
|
|
93
93
|
"files": [
|
|
@@ -1713,15 +1713,37 @@ function Form({
|
|
|
1713
1713
|
/>
|
|
1714
1714
|
</div>
|
|
1715
1715
|
{tableData?.dataSource?.length > 0 && (
|
|
1716
|
-
<div
|
|
1716
|
+
<div
|
|
1717
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
1718
|
+
style={{
|
|
1719
|
+
width: formSettings?.save?.return?.width
|
|
1720
|
+
? `min(${parseInt(formSettings.save.return.width)}px, 100vw - 40px)`
|
|
1721
|
+
: '100%',
|
|
1722
|
+
maxWidth: formSettings?.save?.return?.width
|
|
1723
|
+
? `${parseInt(formSettings.save.return.width)}px`
|
|
1724
|
+
: '100%',
|
|
1725
|
+
overflow: 'auto',
|
|
1726
|
+
margin: formSettings?.save?.return?.width ? '0 auto' : undefined
|
|
1727
|
+
}}
|
|
1728
|
+
>
|
|
1717
1729
|
<ReactDataGrid
|
|
1718
1730
|
idProperty="form-table-result"
|
|
1719
1731
|
columns={tableData.columns}
|
|
1720
1732
|
dataSource={tableData.dataSource}
|
|
1721
|
-
style={{
|
|
1733
|
+
style={{
|
|
1734
|
+
minHeight: 550,
|
|
1735
|
+
width: formSettings?.save?.return?.width
|
|
1736
|
+
? `${parseInt(formSettings.save.return.width)}px`
|
|
1737
|
+
: '100%'
|
|
1738
|
+
}}
|
|
1722
1739
|
showActiveRowIndicator={false}
|
|
1723
1740
|
selected={selected}
|
|
1724
1741
|
onSelectionChange={handleSelectionChange}
|
|
1742
|
+
enableColumnAutosize={true}
|
|
1743
|
+
skipHeaderOnAutoSize={true}
|
|
1744
|
+
resizable={true}
|
|
1745
|
+
reorderColumns={true}
|
|
1746
|
+
virtualizeColumns={false}
|
|
1725
1747
|
{...(tableProps && tableProps.groupBy
|
|
1726
1748
|
? {
|
|
1727
1749
|
defaultGroupBy: tableProps.groupBy,
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import Form from '../components/crm/Form';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Example demonstrating table width configuration in Form component
|
|
6
|
+
*
|
|
7
|
+
* This example shows how to use the "width" property in the JSON config
|
|
8
|
+
* to control the table container width when displaying return data.
|
|
9
|
+
*/
|
|
10
|
+
const TableWidthConfigExample = () => {
|
|
11
|
+
const [selectedWidth, setSelectedWidth] = useState('1500');
|
|
12
|
+
|
|
13
|
+
// Base form settings that can be modified
|
|
14
|
+
const getFormSettings = (width) => ({
|
|
15
|
+
primaryKey: 'id',
|
|
16
|
+
url: '/api/example',
|
|
17
|
+
fields: [
|
|
18
|
+
{
|
|
19
|
+
id: 'name',
|
|
20
|
+
label: 'Name',
|
|
21
|
+
type: 'text',
|
|
22
|
+
required: true
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: 'email',
|
|
26
|
+
label: 'Email',
|
|
27
|
+
type: 'email',
|
|
28
|
+
required: true
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
save: {
|
|
32
|
+
return: {
|
|
33
|
+
type: 'table',
|
|
34
|
+
width: width, // This controls the table container width
|
|
35
|
+
param: 'data',
|
|
36
|
+
props: {
|
|
37
|
+
// Optional table props like grouping
|
|
38
|
+
// groupBy: ['status']
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
const widthOptions = [
|
|
45
|
+
{ value: '', label: 'Default (100%)', description: 'Uses full available width' },
|
|
46
|
+
{ value: '800', label: '800px', description: 'Compact table for smaller datasets' },
|
|
47
|
+
{ value: '1200', label: '1200px', description: 'Standard wide table' },
|
|
48
|
+
{ value: '1500', label: '1500px', description: 'Extra wide table for many columns' },
|
|
49
|
+
{ value: '2000', label: '2000px', description: 'Very wide table for detailed data' }
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<div style={{ padding: '20px' }}>
|
|
54
|
+
<h2>Table Width Configuration Example</h2>
|
|
55
|
+
|
|
56
|
+
<div style={{
|
|
57
|
+
marginBottom: '30px',
|
|
58
|
+
padding: '20px',
|
|
59
|
+
backgroundColor: '#f8fafc',
|
|
60
|
+
borderRadius: '8px',
|
|
61
|
+
border: '1px solid #e2e8f0'
|
|
62
|
+
}}>
|
|
63
|
+
<h3>Configuration:</h3>
|
|
64
|
+
<div style={{ marginBottom: '15px' }}>
|
|
65
|
+
<label style={{ fontWeight: 'bold', marginRight: '10px' }}>
|
|
66
|
+
Table Width:
|
|
67
|
+
</label>
|
|
68
|
+
<select
|
|
69
|
+
value={selectedWidth}
|
|
70
|
+
onChange={(e) => setSelectedWidth(e.target.value)}
|
|
71
|
+
style={{
|
|
72
|
+
padding: '8px 12px',
|
|
73
|
+
borderRadius: '4px',
|
|
74
|
+
border: '1px solid #d1d5db',
|
|
75
|
+
marginRight: '15px'
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
{widthOptions.map(option => (
|
|
79
|
+
<option key={option.value} value={option.value}>
|
|
80
|
+
{option.label}
|
|
81
|
+
</option>
|
|
82
|
+
))}
|
|
83
|
+
</select>
|
|
84
|
+
<span style={{ color: '#6b7280', fontSize: '14px' }}>
|
|
85
|
+
{widthOptions.find(opt => opt.value === selectedWidth)?.description}
|
|
86
|
+
</span>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div style={{
|
|
90
|
+
backgroundColor: '#1f2937',
|
|
91
|
+
color: '#f9fafb',
|
|
92
|
+
padding: '15px',
|
|
93
|
+
borderRadius: '6px',
|
|
94
|
+
fontFamily: 'monospace',
|
|
95
|
+
fontSize: '14px',
|
|
96
|
+
overflow: 'auto'
|
|
97
|
+
}}>
|
|
98
|
+
<pre>{JSON.stringify({
|
|
99
|
+
save: {
|
|
100
|
+
return: {
|
|
101
|
+
type: 'table',
|
|
102
|
+
width: selectedWidth || undefined,
|
|
103
|
+
param: 'data'
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}, null, 2)}</pre>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div style={{
|
|
111
|
+
border: '1px solid #d1d5db',
|
|
112
|
+
borderRadius: '8px',
|
|
113
|
+
overflow: 'hidden',
|
|
114
|
+
backgroundColor: 'white'
|
|
115
|
+
}}>
|
|
116
|
+
<div style={{
|
|
117
|
+
padding: '15px',
|
|
118
|
+
backgroundColor: '#f8fafc',
|
|
119
|
+
borderBottom: '1px solid #e2e8f0',
|
|
120
|
+
fontWeight: 'bold'
|
|
121
|
+
}}>
|
|
122
|
+
Form with Table Width: {selectedWidth ? `${selectedWidth}px` : 'Default'}
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div style={{ padding: '20px' }}>
|
|
126
|
+
<Form
|
|
127
|
+
formSettings={getFormSettings(selectedWidth)}
|
|
128
|
+
formType="create"
|
|
129
|
+
// Mock other required props
|
|
130
|
+
style={{}}
|
|
131
|
+
// The Form component will use the width configuration when displaying return data
|
|
132
|
+
/>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div style={{
|
|
137
|
+
marginTop: '30px',
|
|
138
|
+
padding: '20px',
|
|
139
|
+
backgroundColor: '#fef3c7',
|
|
140
|
+
borderRadius: '8px',
|
|
141
|
+
border: '1px solid #f59e0b'
|
|
142
|
+
}}>
|
|
143
|
+
<h3>How It Works:</h3>
|
|
144
|
+
<ul style={{ marginTop: '10px', lineHeight: '1.6' }}>
|
|
145
|
+
<li><strong>JSON Configuration:</strong> Set the <code>width</code> property in <code>save.return</code></li>
|
|
146
|
+
<li><strong>Container Width:</strong> The table container will be set to the specified width in pixels</li>
|
|
147
|
+
<li><strong>Responsive:</strong> Uses <code>min(width, 100vw - 40px)</code> to prevent overflow on small screens</li>
|
|
148
|
+
<li><strong>Centering:</strong> Tables with custom width are automatically centered</li>
|
|
149
|
+
<li><strong>Scrolling:</strong> Horizontal scrolling is enabled when content exceeds container width</li>
|
|
150
|
+
</ul>
|
|
151
|
+
|
|
152
|
+
<h4 style={{ marginTop: '20px' }}>Supported Formats:</h4>
|
|
153
|
+
<ul style={{ marginTop: '5px' }}>
|
|
154
|
+
<li><code>"width": "1500"</code> - String format (pixels)</li>
|
|
155
|
+
<li><code>"width": 1500</code> - Number format (pixels)</li>
|
|
156
|
+
<li><code>width</code> property omitted - Uses default 100% width</li>
|
|
157
|
+
</ul>
|
|
158
|
+
|
|
159
|
+
<h4 style={{ marginTop: '20px' }}>Example Scenarios:</h4>
|
|
160
|
+
<ul style={{ marginTop: '5px' }}>
|
|
161
|
+
<li><strong>800px:</strong> Perfect for 4-6 columns with moderate content</li>
|
|
162
|
+
<li><strong>1200px:</strong> Good for 6-8 columns or tables with longer text content</li>
|
|
163
|
+
<li><strong>1500px:</strong> Ideal for 8-12 columns or detailed reporting tables</li>
|
|
164
|
+
<li><strong>2000px:</strong> Best for very wide tables with many columns or complex data</li>
|
|
165
|
+
</ul>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
export default TableWidthConfigExample;
|