ding-react-admin 1.0.1 → 1.0.2
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 +76 -2
- package/docs/assets/form-with-inline.png +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
**npm:** [`ding-react-admin`](https://www.npmjs.com/package/ding-react-admin)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Live demo:
|
|
6
|
+
[playground on GitHub Pages](https://muhammadinaam.github.io/ding-react-admin/) (login: `admin` / `admin` or `user` / `user`)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
## Tutorial:
|
|
9
|
+
[Build an admin app and add a Users page](docs/tutorial-one-entity.md) — step-by-step from `yarn create vite` through CRUD and routes.
|
|
8
10
|
|
|
9
11
|
```bash
|
|
10
12
|
yarn add ding-react-admin antd @ant-design/icons dayjs react-hook-form react-router-dom
|
|
@@ -26,6 +28,78 @@ From the [playground demo](https://muhammadinaam.github.io/ding-react-admin/):
|
|
|
26
28
|
| --- | --- |
|
|
27
29
|
|  |  |
|
|
28
30
|
|
|
31
|
+
## Declarative CRUD
|
|
32
|
+
|
|
33
|
+
Wire a [`DataProvider`](docs/data-permissions.md) (see [Providers](#providers-manual-composition) below), then describe list and form pages in JSX — field `source` names map to your API. Filters, modals, permissions, and validation plug in when you need them; start with the basics:
|
|
34
|
+
|
|
35
|
+
### List page
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { ResourceList, TextColumn, DateColumn } from "ding-react-admin";
|
|
39
|
+
|
|
40
|
+
export function InvoiceListPage() {
|
|
41
|
+
return (
|
|
42
|
+
<ResourceList resource="invoices" title="Invoices" pathPrefix="/invoices">
|
|
43
|
+
<TextColumn source="number" label="Number" />
|
|
44
|
+
<TextColumn source="customer" label="Customer" />
|
|
45
|
+
<DateColumn source="issuedAt" label="Issued" />
|
|
46
|
+
</ResourceList>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Add `<TextFilter />`, `<ReferenceFilter />`, bulk actions, and row permissions inside the same component — [list pages guide](docs/crud/list-pages.md).
|
|
52
|
+
|
|
53
|
+
### Form page
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { ResourceForm, TextField, DateField } from "ding-react-admin";
|
|
57
|
+
|
|
58
|
+
export function InvoiceFormPage() {
|
|
59
|
+
return (
|
|
60
|
+
<ResourceForm resource="invoices" title="Invoice" listPath="/invoices">
|
|
61
|
+
<TextField source="number" label="Number" required />
|
|
62
|
+
<TextField source="customer" label="Customer" required />
|
|
63
|
+
<DateField source="issuedAt" label="Issued" required />
|
|
64
|
+
</ResourceForm>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Tabbed forms, stepped modals, and API error mapping — [forms guide](docs/crud/forms.md).
|
|
70
|
+
|
|
71
|
+
### Inline nested rows
|
|
72
|
+
|
|
73
|
+
Django-style tabular inlines: related rows edit in a table inside the parent form.
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import {
|
|
79
|
+
InlineFormSet,
|
|
80
|
+
NumberField,
|
|
81
|
+
ResourceForm,
|
|
82
|
+
TextField,
|
|
83
|
+
} from "ding-react-admin";
|
|
84
|
+
|
|
85
|
+
<ResourceForm
|
|
86
|
+
resource="invoices"
|
|
87
|
+
title="Invoice"
|
|
88
|
+
listPath="/invoices"
|
|
89
|
+
inlines={[{ resource: "invoice-lines", foreignKey: "invoiceId" }]}
|
|
90
|
+
>
|
|
91
|
+
<TextField source="number" label="Number" required />
|
|
92
|
+
<TextField source="customer" label="Customer" required />
|
|
93
|
+
<InlineFormSet resource="invoice-lines" foreignKey="invoiceId" label="Lines">
|
|
94
|
+
<TextField source="label" label="Label" required />
|
|
95
|
+
<NumberField source="quantity" label="Qty" required min={0} />
|
|
96
|
+
<NumberField source="unitPrice" label="Unit price" required min={0} step={0.01} />
|
|
97
|
+
</InlineFormSet>
|
|
98
|
+
</ResourceForm>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Stacked layout, dependent fields, and validation — [inlines guide](docs/crud/inlines.md).
|
|
102
|
+
|
|
29
103
|
## Providers (manual composition)
|
|
30
104
|
|
|
31
105
|
Nothing is wired automatically except theme inside `<AdminApp />`. Wrap providers yourself:
|
|
Binary file
|