react-admin-crud-manager 1.0.7 → 1.0.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/README.md +198 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,7 +55,204 @@ function App() {
|
|
|
55
55
|
- `Table`, `Modal`, `Form`, etc.: Available for advanced use
|
|
56
56
|
|
|
57
57
|
## Props
|
|
58
|
-
|
|
58
|
+
Below is a complete reference of the public props accepted by this package (types, accepted values and defaults). The library exposes a single primary component (`Crud`) that receives a single `config` prop — most configuration lives inside that object.
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
### Crud (default export)
|
|
63
|
+
`<Crud config={config} />`
|
|
64
|
+
- `config` (object) — required. Top-level configuration object used by the CRUD page.
|
|
65
|
+
|
|
66
|
+
Key properties of `config` (types & accepted values):
|
|
67
|
+
|
|
68
|
+
- `title` — string (required)
|
|
69
|
+
- `description` — string (optional)
|
|
70
|
+
- `buttonText` — string (optional)
|
|
71
|
+
- `fetchData` — function (required)
|
|
72
|
+
- Signature: async ({ search, rows_per_page, current_page, ...filters }) => Promise<{ data: Array, pagination?: { current_page: number, rows_per_page: number, total_pages: number, total_records: number } }>
|
|
73
|
+
- The component expects `resp.data` (array) and optional `resp.pagination` when server-side pagination is used.
|
|
74
|
+
- `isStaticData` — boolean (default: false)
|
|
75
|
+
- If true, add/edit/delete are applied client-side on local state instead of re-fetching.
|
|
76
|
+
- `tableConfig` — object (required) — see "Table / tableConfig" below.
|
|
77
|
+
- `modalConfig` — object — see "Modal / modalConfig" below.
|
|
78
|
+
- `filterConfig` — object — used by the filter drawer (see Form field schema below).
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
### Table / `tableConfig` (inside `config`)
|
|
83
|
+
Type: object
|
|
84
|
+
|
|
85
|
+
Common keys:
|
|
86
|
+
- `table_head` — array of column objects (required)
|
|
87
|
+
- `data` — array — rows shown in the table
|
|
88
|
+
- `loading` — boolean — show skeleton when true
|
|
89
|
+
- `search` — object: { enabled?: boolean, placeholder?: string, useServerSideSearch?: boolean, searchKeys?: string[] }
|
|
90
|
+
- `filter` — object: { enabled?: boolean, useServerSideFilters?: boolean }
|
|
91
|
+
- `pagination` — object: { enabled?: boolean, rows_per_page?: number, useServerSidePagination?: boolean, current_page?: number, total_pages?: number, total_records?: number }
|
|
92
|
+
- `emptyMessage` — string — message when no rows
|
|
93
|
+
- `onMenuAction` — function(actionType: string, item: object)
|
|
94
|
+
- `setServerSidePaginationData` — function — used to update server-side pagination/search state
|
|
95
|
+
- `onFilterApply` — function(filters: object)
|
|
96
|
+
- `filterConfig` — object (fields array) — rendered in the FilterDrawer
|
|
97
|
+
|
|
98
|
+
Table column object (`table_head[]`) — accepted keys:
|
|
99
|
+
- `key` — string (required) — property name in row objects
|
|
100
|
+
- `title` — string — column header
|
|
101
|
+
- `type` — string — accepted values: (plain default) | `index` | `group` | `chip` | `date` | `avatar` | `menu_actions`
|
|
102
|
+
- `imageKey`, `titleKey`, `subtitleKey` — string — used by `group`/`avatar` types
|
|
103
|
+
- `onClickDetails` — boolean — if true clicking the cell triggers a view action
|
|
104
|
+
- `variant` — string — used for chips (`contained` | `outline` | `soft`)
|
|
105
|
+
- `chipOptions` — array of { value: string|number|boolean, label: string, color?: string }
|
|
106
|
+
- `defaultColor` — string — default chip color key (e.g., `green`)
|
|
107
|
+
- `className` — string — custom class for cell
|
|
108
|
+
- `format` — string — date format (e.g. `DD MMM YYYY`)
|
|
109
|
+
- `menuList` — array of menu action objects: { title: string, type: string, variant?: string, icon?: ReactNode }
|
|
110
|
+
- `render` — function(row, rowIndex) — custom renderer; if present it overrides built-in renderers
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
### Modal / `modalConfig`
|
|
115
|
+
`modalConfig` groups modal definitions used by the CRUD page.
|
|
116
|
+
|
|
117
|
+
Common modal shapes:
|
|
118
|
+
- `addModal`, `editModal` (object)
|
|
119
|
+
- `title` — string (required)
|
|
120
|
+
- `size` — string (`sm` | `md` | `lg` | `xl` | `full`) (default `md`)
|
|
121
|
+
- `formClass` — string (optional)
|
|
122
|
+
- `formFields` — array of form-field objects (see Form schema)
|
|
123
|
+
- `handleSubmit` — function(formData) — required; should perform API call and return an object used by the parent (see notes)
|
|
124
|
+
- `actionButtons` — array of actionButton objects ({ type, label, color, variant, onClick, disabled, className })
|
|
125
|
+
|
|
126
|
+
- `deleteModal` (object)
|
|
127
|
+
- `title` — string
|
|
128
|
+
- `size` — string
|
|
129
|
+
- `confirmText` — string
|
|
130
|
+
- `referenceKey` — string — key of selectedItem to show as reference in delete dialog
|
|
131
|
+
- `action` — function(selectedItem) — function called to perform delete (should return a response used by the parent)
|
|
132
|
+
- `actionButtons` — array of actionButton objects
|
|
133
|
+
|
|
134
|
+
- `viewModal` (object)
|
|
135
|
+
- `title` — string (required)
|
|
136
|
+
- `size` — string
|
|
137
|
+
- `component` — React component (elementType) — optional, receives `data` prop when provided
|
|
138
|
+
- `fields` — array of view-field objects (see View fields below)
|
|
139
|
+
- `footer` — { cancelButton?: boolean, cancelText?: string }
|
|
140
|
+
|
|
141
|
+
Notes on modal handlers (expected response shapes):
|
|
142
|
+
- `addModal.handleSubmit` should return an object containing `newObject` (the created row) so Crud can insert it into the list when `isStaticData` is true or refresh server-side listing.
|
|
143
|
+
- `editModal.handleSubmit` should return `{ newObject, targetObject }` where `targetObject` identifies which row was updated.
|
|
144
|
+
- `deleteModal.action` should return an object containing `targetObject` (the deleted row) or an appropriate success response.
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
### Form / Form fields (used by `modalConfig.*.formFields` and `filterConfig.fields`)
|
|
149
|
+
Form fields follow the `formFieldType` shape used throughout the UI. Each field is an object with these keys:
|
|
150
|
+
|
|
151
|
+
Common field keys (all field types):
|
|
152
|
+
- `key` — string (required) — the property name for form data
|
|
153
|
+
- `label` — string — human-readable label
|
|
154
|
+
- `type` — string (required) — accepted values:
|
|
155
|
+
- `text` (default input), `number`, `email`, `password`, `select`, `checkbox`, `switch`, `phone`, `textarea`, `image`, `tinyEditor`
|
|
156
|
+
- `required` — boolean
|
|
157
|
+
- `minLength` — number
|
|
158
|
+
- `parentClass` — string — grid class (e.g. `col-span-6`)
|
|
159
|
+
- `placeholder` — string
|
|
160
|
+
- `disabled` — boolean
|
|
161
|
+
|
|
162
|
+
Type-specific keys:
|
|
163
|
+
- select
|
|
164
|
+
- `options` — array of { value: string|number|boolean, label: string }
|
|
165
|
+
- `multiple` — boolean — allow multiple selection
|
|
166
|
+
- `search` — boolean — show search inside dropdown
|
|
167
|
+
- `dropdownMaxHeight` — string (CSS height value)
|
|
168
|
+
- checkbox
|
|
169
|
+
- `options` — array of { value, label }
|
|
170
|
+
- `multiple` — boolean — when true allows selecting multiple values (component prop `multiSelect`)
|
|
171
|
+
- switch
|
|
172
|
+
- `options` — optional array of radio-like options [{ label, value }]
|
|
173
|
+
- `text` — optional description text shown next to the switch
|
|
174
|
+
- phone
|
|
175
|
+
- `countriesList` — boolean — show country selector
|
|
176
|
+
- `defaultCountry` — string (ISO country code like `US`)
|
|
177
|
+
- `search` — boolean — enable searching countries
|
|
178
|
+
- `placeholder` — string
|
|
179
|
+
- textarea
|
|
180
|
+
- `rows` — number
|
|
181
|
+
- image
|
|
182
|
+
- `accept` — string (default: `image/*`)
|
|
183
|
+
- `dragDrop` — boolean
|
|
184
|
+
- tinyEditor
|
|
185
|
+
- `editorKey` — string (TinyMCE api key)
|
|
186
|
+
- `fontFamily` — string
|
|
187
|
+
- `height` — number
|
|
188
|
+
- `imageUploadHandler` — function(blobInfo) => Promise<string> (returns URL)
|
|
189
|
+
|
|
190
|
+
Return values / onSubmit handlers
|
|
191
|
+
- `onSubmit(formData)` receives an object keyed by `field.key` values.
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
### Small/UI components (props summary)
|
|
196
|
+
- `Button` props
|
|
197
|
+
- `variant` — `contained` | `outlined` | `text` (default `contained`)
|
|
198
|
+
- `color` — `primary` | `success` | `error` | `default`
|
|
199
|
+
- `size` — `sm` | `md` | `lg` | `xl` | `default`
|
|
200
|
+
- `fullWidth` — boolean
|
|
201
|
+
- `className`, `onClick`, `type`, `disabled` (standard button props)
|
|
202
|
+
|
|
203
|
+
- `Chip` props
|
|
204
|
+
- `label` — string (required)
|
|
205
|
+
- `variant` — `contained` | `outline` | `soft` (default `contained`)
|
|
206
|
+
- `color` — `blue` | `teal` | `purple` | `yellow` | `green` | `red` | `gray`
|
|
207
|
+
|
|
208
|
+
- `Modal` props (when used directly)
|
|
209
|
+
- `isOpen` — boolean
|
|
210
|
+
- `onClose` — function
|
|
211
|
+
- `icon` — React node
|
|
212
|
+
- `title` — string
|
|
213
|
+
- `size` — `sm` | `md` | `lg` | `xl` | `full`
|
|
214
|
+
- `actionButtons` — array of { type, label, color, variant, onClick, disabled }
|
|
215
|
+
- `loadingBtn` — boolean
|
|
216
|
+
|
|
217
|
+
- `FilterDrawer` props
|
|
218
|
+
- `isOpen` — boolean
|
|
219
|
+
- `onClose` — function
|
|
220
|
+
- `config` — object (fields array — same `formFieldType`)
|
|
221
|
+
- `onApply` — function(filters: object)
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
225
|
+
### Examples
|
|
226
|
+
Minimal CRUD config (client-side):
|
|
227
|
+
|
|
228
|
+
```js
|
|
229
|
+
const config = {
|
|
230
|
+
title: 'Users',
|
|
231
|
+
fetchData: async () => ({ data: users, pagination: null }),
|
|
232
|
+
isStaticData: true,
|
|
233
|
+
tableConfig: {
|
|
234
|
+
table_head: [ { key: 'id', title: 'ID', type: 'index' }, { key: 'name', title: 'Name' } ],
|
|
235
|
+
pagination: { enabled: true }
|
|
236
|
+
},
|
|
237
|
+
modalConfig: {
|
|
238
|
+
addModal: { title: 'Add user', handleSubmit: async (formData)=>({ newObject: formData }), formFields: [ { key: 'name', label: 'Name', type: 'text', required: true } ] }
|
|
239
|
+
}
|
|
240
|
+
};
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
Server-side listing (fetchData must return { data, pagination }):
|
|
244
|
+
|
|
245
|
+
```js
|
|
246
|
+
const fetchData = async ({ search, rows_per_page, current_page }) => {
|
|
247
|
+
const resp = await api.get('/users', { params: { q: search, limit: rows_per_page, page: current_page } });
|
|
248
|
+
return { data: resp.items, pagination: { current_page: resp.page, rows_per_page: resp.limit, total_pages: resp.totalPages, total_records: resp.total } };
|
|
249
|
+
};
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
254
|
+
If you want me to add a TypeScript declaration snippet or a props table per component (or to document `table_head` examples), tell me which parts to expand and I will add them. ✅
|
|
255
|
+
|
|
59
256
|
|
|
60
257
|
## License
|
|
61
258
|
MIT
|