@visns-studio/visns-components 5.10.2 → 5.10.4
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/README.md +42 -1
- package/package.json +3 -3
- package/src/components/crm/DataGrid.jsx +707 -2686
- package/src/components/crm/Field.jsx +0 -2
- package/src/components/crm/cells/CellWithTooltip.jsx +138 -0
- package/src/components/crm/columns/ColumnRenderers.jsx +1358 -0
- package/src/components/crm/controls/AudioPlayer.jsx +19 -0
- package/src/components/crm/controls/AutoRefreshControls.jsx +37 -0
- package/src/components/crm/controls/DataGridSearch.jsx +238 -0
- package/src/components/crm/modals/GalleryModal.jsx +405 -0
- package/src/components/crm/styles/DataGrid.module.scss +296 -0
- package/src/components/crm/styles/global-datagrid.css +21 -0
- package/src/index.js +11 -0
package/README.md
CHANGED
|
@@ -181,7 +181,7 @@ User profile management.
|
|
|
181
181
|
|
|
182
182
|
### DataGrid Component
|
|
183
183
|
|
|
184
|
-
A powerful data table component with sorting, filtering, and pagination.
|
|
184
|
+
A powerful data table component with sorting, filtering, and pagination. The DataGrid features a modular column renderer architecture with support for 28 different column types.
|
|
185
185
|
|
|
186
186
|
```jsx
|
|
187
187
|
<DataGrid
|
|
@@ -228,6 +228,47 @@ A powerful data table component with sorting, filtering, and pagination.
|
|
|
228
228
|
/>
|
|
229
229
|
```
|
|
230
230
|
|
|
231
|
+
#### Column Renderer Architecture
|
|
232
|
+
|
|
233
|
+
The DataGrid component utilizes a modular column renderer system with 28 specialized column types, all consolidated in the `ColumnRenderers.jsx` file. This architecture provides:
|
|
234
|
+
|
|
235
|
+
- **Consistent API**: All column renderers follow a standardized interface
|
|
236
|
+
- **Extensibility**: Easy to add new column types or modify existing ones
|
|
237
|
+
- **Maintainability**: Centralized location for all column rendering logic
|
|
238
|
+
- **Performance**: Optimized rendering for each specific column type
|
|
239
|
+
|
|
240
|
+
**Supported Column Types:**
|
|
241
|
+
- `boolean` - Yes/No display with tooltips
|
|
242
|
+
- `currency` - Formatted monetary values
|
|
243
|
+
- `date` - Date formatting with validation
|
|
244
|
+
- `datetime` - Date and time formatting
|
|
245
|
+
- `arrayCount` - Count of array elements
|
|
246
|
+
- `colour` - Color picker display
|
|
247
|
+
- `dropdown` - Interactive dropdown selections
|
|
248
|
+
- `image` - Image display from file URLs
|
|
249
|
+
- `file` - File download links with icons
|
|
250
|
+
- `icons` - Multiple icon display
|
|
251
|
+
- `json` - JSON data extraction and display
|
|
252
|
+
- `number` - Numeric values
|
|
253
|
+
- `option` - Option mapping with placeholders
|
|
254
|
+
- `placeholder` - Static placeholder text
|
|
255
|
+
- `age` - Age calculation from dates
|
|
256
|
+
- `coding` - Custom coding logic
|
|
257
|
+
- `relation` - Related data display
|
|
258
|
+
- `relationArray` - Array of related data
|
|
259
|
+
- `richtext` - HTML content rendering
|
|
260
|
+
- `stage` - Stage-based displays
|
|
261
|
+
- `time` - Time formatting
|
|
262
|
+
- `timer` - Interactive timer controls
|
|
263
|
+
- `url` - Clickable links
|
|
264
|
+
- `input_text` - Inline text editing
|
|
265
|
+
- `address` - Formatted address display
|
|
266
|
+
- `createdBy` - User creation tracking
|
|
267
|
+
- `daterange` - Date range formatting
|
|
268
|
+
- `stageCounter` - Visual stage progression
|
|
269
|
+
|
|
270
|
+
All column renderers are exported from `@visns-studio/visns-components` and can be used individually or as part of the DataGrid component.
|
|
271
|
+
|
|
231
272
|
#### DataGrid Props
|
|
232
273
|
|
|
233
274
|
| Prop | Description | Type | Default |
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"@tinymce/tinymce-react": "^6.2.1",
|
|
16
16
|
"@visns-studio/visns-datagrid-community": "^1.0.14",
|
|
17
17
|
"@visns-studio/visns-datagrid-enterprise": "^1.0.14",
|
|
18
|
-
"@vitejs/plugin-react": "^4.5.
|
|
18
|
+
"@vitejs/plugin-react": "^4.5.2",
|
|
19
19
|
"add": "^2.0.6",
|
|
20
20
|
"akar-icons": "^1.9.31",
|
|
21
21
|
"array-move": "^4.0.0",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"mini-css-extract-plugin": "^2.9.2",
|
|
80
80
|
"react": "^18.3.1",
|
|
81
81
|
"react-dom": "^18.3.1",
|
|
82
|
-
"sass": "^1.89.
|
|
82
|
+
"sass": "^1.89.2",
|
|
83
83
|
"sass-loader": "^16.0.5"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
@@ -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.4",
|
|
91
91
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
92
92
|
"main": "src/index.js",
|
|
93
93
|
"files": [
|