Skip to content

Commit 091a2b5

Browse files
erwanMarmelaberwanMarmelab
committed
[Doc] Backport DatagridAg's doc update
1 parent 8705af5 commit 091a2b5

File tree

1 file changed

+212
-0
lines changed

1 file changed

+212
-0
lines changed

‎docs/DatagridAG.md‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1734,6 +1734,112 @@ export const PostList = () => {
17341734

17351735
**Tip:** `<DatagridAG>` registers the following [modules](https://www.ag-grid.com/react-data-grid/modules/) by default: `ClientSideRowModelModule`, `AllCommunityModule` and `CsvExportModule`. If you add other modules, make sure to have at least the `ClientSideRowModelModule`.
17361736

1737+
### Creating New Records
1738+
1739+
There are multiple options to create new records:
1740+
1741+
- The simple [`create` view](./Create.md) that redirects users to a dedicated create page:
1742+
1743+
```tsx
1744+
// in src/posts.tsx
1745+
import * as React from 'react';
1746+
import { Create, SimpleForm, TextInput, DateInput, required } from 'react-admin';
1747+
import RichTextInput from 'ra-input-rich-text';
1748+
1749+
export const PostCreate = () => (
1750+
<Create>
1751+
<SimpleForm>
1752+
<TextInput source="title" validate={[required()]} />
1753+
<TextInput source="teaser" multiline={true} label="Short description" />
1754+
<RichTextInput source="body" />
1755+
<DateInput label="Publication date" source="published_at" defaultValue={new Date()} />
1756+
</SimpleForm>
1757+
</Create>
1758+
);
1759+
1760+
// in src/App.tsx
1761+
import * as React from 'react';
1762+
import { Admin, Resource } from 'react-admin';
1763+
import jsonServerProvider from 'ra-data-json-server';
1764+
1765+
import { PostCreate, PostList } from './posts';
1766+
1767+
const App = () => (
1768+
<Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
1769+
<Resource name="posts" list={PostList} create={PostCreate} />
1770+
</Admin>
1771+
);
1772+
1773+
export default App;
1774+
```
1775+
1776+
- The [`<CreateDialog>` component from `@react-admin/ra-form-layout`](https://react-admin-ee.marmelab.com/documentation/ra-form-layout#createdialog-editdialog--showdialog) that opens a dialog without leaving the list page:
1777+
1778+
```tsx
1779+
// In src/posts.tsx
1780+
import { List, ListActions, SimpleForm, TextInput, DateInput } from 'react-admin';
1781+
import { DatagridAG } from '@react-admin/ra-datagrid-ag';
1782+
import { CreateDialog } from '@react-admin/ra-form-layout';
1783+
1784+
const columnDefs = [
1785+
{ field: 'id', editable: false },
1786+
{ field: 'title' },
1787+
{ field: 'published_at', headerName: 'Publication Date' },
1788+
{ field: 'body' },
1789+
];
1790+
1791+
export const PostList = () => (
1792+
<>
1793+
<List actions={<ListActions hasCreate />}>
1794+
<DatagridAG columnDefs={columnDefs} />
1795+
</List>
1796+
<CreateDialog>
1797+
<SimpleForm>
1798+
<TextInput source="title" />
1799+
<DateInput source="published_at" />
1800+
<TextInput source="body" />
1801+
</SimpleForm>
1802+
</CreateDialog>
1803+
</>
1804+
);
1805+
```
1806+
1807+
> **Note**: You can't use the `<CreateDialog>` and have a standard `<Edit>` specified on your `<Resource>`, because the `<Routes>` declarations would conflict. If you need this, use the `<CreateInDialogButton>` instead.
1808+
1809+
- The [`<CreateInDialogButton>` component from `@react-admin/ra-form-layout`](https://react-admin-ee.marmelab.com/documentation/ra-form-layout#createdialog-editdialog--showdialog) that opens a dialog without leaving the list page but does not add a `/create` route:
1810+
1811+
```tsx
1812+
// In src/posts.tsx
1813+
import { List, ListActions, SimpleForm, TextInput, DateInput, TopToolbar } from 'react-admin';
1814+
import { DatagridAG } from '@react-admin/ra-datagrid-ag';
1815+
import { CreateInDialogButton } from '@react-admin/ra-form-layout';
1816+
1817+
const columnDefs = [
1818+
{ field: 'id', editable: false },
1819+
{ field: 'title' },
1820+
{ field: 'published_at', headerName: 'Publication Date' },
1821+
{ field: 'body' },
1822+
];
1823+
1824+
const PostListActions = () => (
1825+
<TopToolbar>
1826+
<CreateInDialogButton>
1827+
<SimpleForm>
1828+
<TextInput source="title" />
1829+
<DateInput source="published_at" />
1830+
<TextInput source="body" />
1831+
</SimpleForm>
1832+
</CreateInDialogButton>
1833+
</TopToolbar>
1834+
)
1835+
1836+
export const PostList = () => (·
1837+
<List actions={<PostListActions />}>
1838+
<DatagridAG columnDefs={columnDefs} />
1839+
</List>
1840+
);
1841+
```
1842+
17371843
## `<DatagridAGClient>`
17381844

17391845
`<DatagridAGClient>` is an alternative datagrid component with advanced features, based on [ag-grid](https://www.ag-grid.com/). It is designed for small datasets that can be entirely loaded client-side (around a few thousand records). It supports infinite scrolling, grouping, multi-column sorting, and advanced filtering.
@@ -3035,3 +3141,109 @@ export const PostList = () => {
30353141
{% endraw %}
30363142

30373143
**Tip:** `<DatagridAGClient>` registers the following [modules](https://www.ag-grid.com/react-data-grid/modules/) by default: `ClientSideRowModelModule`, `AllCommunityModule` and `CsvExportModule`. If you add other modules, make sure to have at least the `ClientSideRowModelModule`.
3144+
3145+
### Creating New Records
3146+
3147+
There are multiple options to create new records:
3148+
3149+
- The simple [`create` view](./Create.md) that redirects users to a dedicated create page:
3150+
3151+
```tsx
3152+
// in src/posts.tsx
3153+
import * as React from 'react';
3154+
import { Create, SimpleForm, TextInput, DateInput, required } from 'react-admin';
3155+
import RichTextInput from 'ra-input-rich-text';
3156+
3157+
export const PostCreate = () => (
3158+
<Create>
3159+
<SimpleForm>
3160+
<TextInput source="title" validate={[required()]} />
3161+
<TextInput source="teaser" multiline={true} label="Short description" />
3162+
<RichTextInput source="body" />
3163+
<DateInput label="Publication date" source="published_at" defaultValue={new Date()} />
3164+
</SimpleForm>
3165+
</Create>
3166+
);
3167+
3168+
// in src/App.tsx
3169+
import * as React from 'react';
3170+
import { Admin, Resource } from 'react-admin';
3171+
import jsonServerProvider from 'ra-data-json-server';
3172+
3173+
import { PostCreate, PostList } from './posts';
3174+
3175+
const App = () => (
3176+
<Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
3177+
<Resource name="posts" list={PostList} create={PostCreate} />
3178+
</Admin>
3179+
);
3180+
3181+
export default App;
3182+
```
3183+
3184+
- The [`<CreateDialog>` component from `@react-admin/ra-form-layout`](https://react-admin-ee.marmelab.com/documentation/ra-form-layout#createdialog-editdialog--showdialog) that opens a dialog without leaving the list page:
3185+
3186+
```tsx
3187+
// In src/posts.tsx
3188+
import { List, ListActions, SimpleForm, TextInput, DateInput } from 'react-admin';
3189+
import { DatagridAGClient } from '@react-admin/ra-datagrid-ag';
3190+
import { CreateDialog } from '@react-admin/ra-form-layout';
3191+
3192+
const columnDefs = [
3193+
{ field: 'id', editable: false },
3194+
{ field: 'title' },
3195+
{ field: 'published_at', headerName: 'Publication Date' },
3196+
{ field: 'body' },
3197+
];
3198+
3199+
export const PostList = () => (
3200+
<>
3201+
<List actions={<ListActions hasCreate />} perPage={10000} pagination={false}>
3202+
<DatagridAGClient columnDefs={columnDefs} />
3203+
</List>
3204+
<CreateDialog>
3205+
<SimpleForm>
3206+
<TextInput source="title" />
3207+
<DateInput source="published_at" />
3208+
<TextInput source="body" />
3209+
</SimpleForm>
3210+
</CreateDialog>
3211+
</>
3212+
);
3213+
```
3214+
3215+
> **Note**: You can't use the `<CreateDialog>` and have a standard `<Edit>` specified on your `<Resource>`, because the `<Routes>` declarations would conflict. If you need this, use the `<CreateInDialogButton>` instead.
3216+
3217+
- The [`<CreateInDialogButton>` component from `@react-admin/ra-form-layout`](https://react-admin-ee.marmelab.com/documentation/ra-form-layout#createdialog-editdialog--showdialog) that opens a dialog without leaving the list page but does not add a `/create` route:
3218+
3219+
```tsx
3220+
// In src/posts.tsx
3221+
import { List, ListActions, SimpleForm, TextInput, DateInput, TopToolbar } from 'react-admin';
3222+
import { DatagridAGClient } from '@react-admin/ra-datagrid-ag';
3223+
import { CreateInDialogButton } from '@react-admin/ra-form-layout';
3224+
3225+
const columnDefs = [
3226+
{ field: 'id', editable: false },
3227+
{ field: 'title' },
3228+
{ field: 'published_at', headerName: 'Publication Date' },
3229+
{ field: 'body' },
3230+
];
3231+
3232+
const PostListActions = () => (
3233+
<TopToolbar>
3234+
<CreateInDialogButton>
3235+
<SimpleForm>
3236+
<TextInput source="title" />
3237+
<DateInput source="published_at" />
3238+
<TextInput source="body" />
3239+
</SimpleForm>
3240+
</CreateInDialogButton>
3241+
</TopToolbar>
3242+
)
3243+
3244+
export const PostList = () => (·
3245+
<List actions={<PostListActions />} perPage={10000} pagination={false}>
3246+
<DatagridAGClient columnDefs={columnDefs} />
3247+
</List>
3248+
);
3249+
```

0 commit comments

Comments
 (0)