react-admin-crud-manager 1.2.4 → 1.2.6
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 +145 -11
- package/dist/index.cjs.js +17 -17
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +3375 -1846
- package/dist/index.es.js.map +1 -1
- package/dist/types/data/countries.d.ts +4 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -71,15 +71,15 @@ Below is a complete reference of the public props accepted by this package (type
|
|
|
71
71
|
|
|
72
72
|
#### Table Configuration Keys
|
|
73
73
|
|
|
74
|
-
| Key | Type | Description | Accepted Values / Example
|
|
75
|
-
| ------------ | ----------------------- | --------------------------- |
|
|
76
|
-
| `table_head` | array of column objects | Column definitions | Array of table column objects (see [Table column object](#table-column-object-table_head))
|
|
77
|
-
| `search` | object | Search functionality config | `{ enabled: true, useServerSideSearch?: false, searchKeys?: ["name", "email"] }`
|
|
78
|
-
| `filter` | object | Filter drawer config | `{ enabled: true, useServerSideFilters?: false }`
|
|
79
|
-
| `pagination` | object | Pagination controls | `{ enabled: true, useServerSidePagination?: false }`
|
|
80
|
-
| `sort` | object | Sorting configuration |
|
|
81
|
-
| `exportCSV` | object | Export data as CSV | `{ enabled: true, fileName: "users.csv", fields: [{ label: "Name", key: "name" }, ...] }`
|
|
82
|
-
| `rowClick` | function or boolean | Callback on table row click | `(row: object, rowIndex: number) => void` or `true` (setting true will open details)
|
|
74
|
+
| Key | Type | Description | Accepted Values / Example |
|
|
75
|
+
| ------------ | ----------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
76
|
+
| `table_head` | array of column objects | Column definitions | Array of table column objects (see [Table column object](#table-column-object-table_head)) |
|
|
77
|
+
| `search` | object | Search functionality config | `{ enabled: true, useServerSideSearch?: false, searchKeys?: ["name", "email"] }` |
|
|
78
|
+
| `filter` | object | Filter drawer config | `{ enabled: true, useServerSideFilters?: false }` |
|
|
79
|
+
| `pagination` | object | Pagination controls | `{ enabled: true, useServerSidePagination?: false }` |
|
|
80
|
+
| `sort` | object | Sorting configuration | Enables and controls sorting behavior for the data table. (see [Table Sorting Config](#table-sorting-config)) |
|
|
81
|
+
| `exportCSV` | object | Export data as CSV | `{ enabled: true, fileName: "users.csv", fields: [{ label: "Name", key: "name" }, ...] }` |
|
|
82
|
+
| `rowClick` | function or boolean | Callback on table row click | `(row: object, rowIndex: number) => void` or `true` (setting true will open details) |
|
|
83
83
|
|
|
84
84
|
<br>
|
|
85
85
|
|
|
@@ -104,6 +104,23 @@ Below is a complete reference of the public props accepted by this package (type
|
|
|
104
104
|
|
|
105
105
|
---
|
|
106
106
|
|
|
107
|
+
### Table Sorting Config
|
|
108
|
+
|
|
109
|
+
The `sort` property enables and controls sorting behavior for the data table. It supports both client-side and server-side sorting, along with customizable sorting options.
|
|
110
|
+
|
|
111
|
+
| Property | Type | Required | Description |
|
|
112
|
+
| ---------------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
|
|
113
|
+
| `enabled` | boolean | No | Enables or disables sorting functionality. Default is `true`. |
|
|
114
|
+
| `useServerSideSorting` | boolean | No | If set to `true`, sorting will be handled on the server instead of the client. |
|
|
115
|
+
| `fields` | string[] | No | List of field keys that are sortable. Optional if `options` are provided. |
|
|
116
|
+
| `autoGenerate` | boolean | No | Auto-generate sort options from table headers. |
|
|
117
|
+
| `defaultValue` | string | No | Sets the default selected sorting option on initial load (e.g., `"createdAt_desc"`). |
|
|
118
|
+
| `clearLabel` | string | No | Label displayed for the "clear sorting" option. |
|
|
119
|
+
| `onChange` | function | No | Callback triggered when sorting changes. Receives an object containing `value`, `key`, `order`, and `type`. |
|
|
120
|
+
| `options` | array | No | Custom sorting options. If not provided, options will be auto-generated from sortable table columns. |
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
107
124
|
### modalConfig Definitions
|
|
108
125
|
|
|
109
126
|
#### Add & Edit Modal (`addModal`, `editModal`)
|
|
@@ -671,6 +688,22 @@ const config = {
|
|
|
671
688
|
console.log("Sort changed:", payload);
|
|
672
689
|
// payload contains: { value, option, key, order, type }
|
|
673
690
|
},
|
|
691
|
+
options: [
|
|
692
|
+
{
|
|
693
|
+
value: "name_asc",
|
|
694
|
+
label: "Name (A-Z)",
|
|
695
|
+
key: "name",
|
|
696
|
+
order: "asc",
|
|
697
|
+
type: "string",
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
value: "name_desc",
|
|
701
|
+
label: "Name (Z-A)",
|
|
702
|
+
key: "name",
|
|
703
|
+
order: "desc",
|
|
704
|
+
type: "string",
|
|
705
|
+
},
|
|
706
|
+
],
|
|
674
707
|
},
|
|
675
708
|
table_head: [
|
|
676
709
|
{ key: "name", title: "Name" },
|
|
@@ -681,7 +714,108 @@ const config = {
|
|
|
681
714
|
};
|
|
682
715
|
```
|
|
683
716
|
|
|
684
|
-
###
|
|
717
|
+
### Primary Color Customization
|
|
718
|
+
|
|
719
|
+
You can override the default primary color used across the UI by defining CSS variables in your global `:root`.
|
|
720
|
+
|
|
721
|
+
Simply add the following variables to your main CSS file (e.g., `root.css`, `global.css`):
|
|
722
|
+
|
|
723
|
+
````css
|
|
724
|
+
:root {
|
|
725
|
+
--primary-50: #eff6ff;
|
|
726
|
+
--primary-100: #dbeafe;
|
|
727
|
+
--primary-200: #bfdbfe;
|
|
728
|
+
--primary-300: #93c5fd;
|
|
729
|
+
--primary-400: #60a5fa;
|
|
730
|
+
--primary-500: #3b82f6;
|
|
731
|
+
--primary-600: #2563eb;
|
|
732
|
+
--primary-700: #1d4ed8;
|
|
733
|
+
--primary-800: #1e40af;
|
|
734
|
+
--primary-900: #1e3a8a;
|
|
735
|
+
}
|
|
736
|
+
````
|
|
737
|
+
### CSS Class Customization
|
|
738
|
+
|
|
739
|
+
The following table lists all available CSS classes that can be overridden to customize the UI.
|
|
740
|
+
|
|
741
|
+
---
|
|
742
|
+
|
|
743
|
+
#### Class Reference
|
|
744
|
+
|
|
745
|
+
| Component | Key | Class Name | Description |
|
|
746
|
+
| ------------------ | ------------------ | ------------------------------- | --------------------------- |
|
|
747
|
+
| **Crud Page** | `root` | `crud_page` | Main container of CRUD page |
|
|
748
|
+
| | `deleteContent` | `crud_page_delete_content` | Delete confirmation content |
|
|
749
|
+
| **Button** | `root` | `crud_button` | Default button styling |
|
|
750
|
+
| **Chip** | `root` | `crud_chip` | Chip/tag element |
|
|
751
|
+
| **Spinner** | `root` | `crud_spinner` | Loading spinner |
|
|
752
|
+
| **Modal** | `root` | `crud_modal` | Modal root |
|
|
753
|
+
| | `overlay` | `crud_modal_overlay` | Modal overlay |
|
|
754
|
+
| | `container` | `crud_modal_container` | Modal container |
|
|
755
|
+
| | `header` | `crud_modal_header` | Modal header |
|
|
756
|
+
| | `title` | `crud_modal_title` | Modal title |
|
|
757
|
+
| | `closeButton` | `crud_modal_close_button` | Close button |
|
|
758
|
+
| | `body` | `crud_modal_body` | Modal body |
|
|
759
|
+
| | `footer` | `crud_modal_footer` | Modal footer |
|
|
760
|
+
| | `actionButton` | `crud_modal_action_button` | Modal action button |
|
|
761
|
+
| | `loadingIndicator` | `crud_modal_loading_indicator` | Modal loading state |
|
|
762
|
+
| **Table** | `root` | `crud_table` | Table wrapper |
|
|
763
|
+
| | `toolbar` | `crud_table_toolbar` | Table toolbar |
|
|
764
|
+
| | `searchField` | `crud_table_search_field` | Search field wrapper |
|
|
765
|
+
| | `searchInput` | `crud_table_search_input` | Search input |
|
|
766
|
+
| | `container` | `crud_table_container` | Table container |
|
|
767
|
+
| | `element` | `crud_table_element` | Table element |
|
|
768
|
+
| | `head` | `crud_table_head` | Table head |
|
|
769
|
+
| | `headRow` | `crud_table_head_row` | Header row |
|
|
770
|
+
| | `headCell` | `crud_table_head_cell` | Header cell |
|
|
771
|
+
| | `body` | `crud_table_body` | Table body |
|
|
772
|
+
| | `row` | `crud_table_row` | Table row |
|
|
773
|
+
| | `cell` | `crud_table_cell` | Table cell |
|
|
774
|
+
| | `noData` | `crud_table_no_data` | No data state |
|
|
775
|
+
| | `actionButton` | `crud_table_action_button` | Row action button |
|
|
776
|
+
| | `menu` | `crud_table_menu` | Action menu |
|
|
777
|
+
| | `menuItem` | `crud_table_menu_item` | Menu item |
|
|
778
|
+
| | `pagination` | `crud_table_pagination` | Pagination wrapper |
|
|
779
|
+
| **Table Skeleton** | `root` | `crud_table_skeleton` | Skeleton loader wrapper |
|
|
780
|
+
| | `table` | `crud_table_skeleton_table` | Skeleton table |
|
|
781
|
+
| **Sort Dropdown** | `root` | `crud_sort_dropdown` | Sort dropdown root |
|
|
782
|
+
| | `trigger` | `crud_sort_dropdown_trigger` | Dropdown trigger |
|
|
783
|
+
| | `menu` | `crud_sort_dropdown_menu` | Dropdown menu |
|
|
784
|
+
| | `item` | `crud_sort_dropdown_item` | Dropdown item |
|
|
785
|
+
| **Image Preview** | `root` | `crud_image_preview` | Image preview root |
|
|
786
|
+
| | `container` | `crud_image_preview_container` | Image container |
|
|
787
|
+
| | `image` | `crud_image_preview_image` | Image element |
|
|
788
|
+
| **Filter Drawer** | `overlay` | `crud_filter_overlay` | Drawer overlay |
|
|
789
|
+
| | `panel` | `crud_filter_panel` | Drawer panel |
|
|
790
|
+
| | `header` | `crud_filter_header` | Drawer header |
|
|
791
|
+
| | `body` | `crud_filter_body` | Drawer body |
|
|
792
|
+
| | `footer` | `crud_filter_footer` | Drawer footer |
|
|
793
|
+
| **Form** | `root` | `crud_form` | Form wrapper |
|
|
794
|
+
| | `loading` | `crud_form_loading` | Form loading state |
|
|
795
|
+
| **Field** | `wrapper` | `crud_field_wrapper` | Field wrapper |
|
|
796
|
+
| | `label` | `crud_field_label` | Field label |
|
|
797
|
+
| | `input` | `crud_field_input` | Input field |
|
|
798
|
+
| | `error` | `crud_field_error` | Error message |
|
|
799
|
+
| **Media Picker** | `image` | `crud_media_image_picker` | Image picker |
|
|
800
|
+
| | `multiImage` | `crud_media_multi_image_picker` | Multi-image picker |
|
|
801
|
+
| | `audio` | `crud_media_audio_picker` | Audio picker |
|
|
802
|
+
| | `video` | `crud_media_video_picker` | Video picker |
|
|
803
|
+
| | `dropzone` | `crud_media_dropzone` | File dropzone |
|
|
804
|
+
| | `cropModal` | `crud_media_crop_modal` | Crop modal |
|
|
805
|
+
| **Details** | `root` | `crud_details` | Details root |
|
|
806
|
+
| | `container` | `crud_details_container` | Details container |
|
|
807
|
+
| | `row` | `crud_details_row` | Details row |
|
|
808
|
+
|
|
809
|
+
---
|
|
810
|
+
|
|
811
|
+
#### Notes
|
|
812
|
+
|
|
813
|
+
- All class names are prefixed with `crud_` to prevent conflicts.
|
|
814
|
+
- You can override these classes in your own stylesheet.
|
|
815
|
+
- Works with CSS, SCSS, Tailwind (`@apply`), or CSS-in-JS.
|
|
816
|
+
- No manual assignment required — classes are already applied internally.
|
|
817
|
+
|
|
818
|
+
### CRUD Examples
|
|
685
819
|
|
|
686
820
|
#### Example 1: Minimal Client-Side CRUD
|
|
687
821
|
|
|
@@ -746,7 +880,7 @@ function App() {
|
|
|
746
880
|
}
|
|
747
881
|
|
|
748
882
|
export default App;
|
|
749
|
-
|
|
883
|
+
````
|
|
750
884
|
|
|
751
885
|
#### Example 2: Server-Side CRUD with Advanced Features
|
|
752
886
|
|