Skip to content

Commit cd5442e

Browse files
fzaninottofzaninotto
authored
Merge pull request #11097 from marmelab/ra-datagrid-ag-7.0.0-doc
[Doc] Update `<DatagridAG>` docs following ra-datagrid-ag 7.0.0 release
2 parents 164b236 + d3e0421 commit cd5442e

1 file changed

Lines changed: 90 additions & 4 deletions

File tree

‎docs/DatagridAG.md‎

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@ If you need to use these features, you can use the [`<DatagridAGClient>`](#datag
247247
| `cellRenderer` | Optional | String, Function or Element | | Allows to use a custom component to render the cell content |
248248
| `columnDefs` | Required | Array | n/a | The columns definitions |
249249
| `defaultColDef` | Optional | Object | | The default column definition (applied to all columns) |
250+
| `defaultSort` | Optional | Object | | The default sort to apply when clearing all sort |
250251
| `getAgGridFilters` | Optional | Function | | A function mapping react-admin filters to ag-grid filters |
251252
| `getRaFilters` | Optional | Function | | A function mapping ag-grid filters to react-admin filters |
252253
| `mutationOptions` | Optional | Object | | The mutation options |
@@ -301,7 +302,7 @@ In a column definition, you can use the `cellEditor` field to specify a custom c
301302

302303
In addition to that, `<DatagridAG>` supports using [React Admin inputs](./Inputs.md) as `cellEditor`, such as [`<TextInput>`](./TextInput.md) or even [`<ReferenceInput>`](./ReferenceInput.md).
303304

304-
This allows to leverage all the power of react-admin inputs in your grid, for example to edit a reference.
305+
This allows to leverage all the power of react-admin inputs in your grid, including validation, for example to edit a reference.
305306

306307
To use a React Admin input as `cellEditor`, you need to pass it as a *React Element*:
307308

@@ -433,7 +434,36 @@ const StyledListbox = styled('ul')({
433434

434435
**Tip:** Using a custom `cellEditor` works great in combination with a custom [`cellRenderer`](#cellrenderer).
435436

436-
**Note:** React Admin inputs used ad `cellEditor` do not (yet) support form validation.
437+
You might want to always use React Admin inputs to edit your columns to leverage the validators with builtin i18n support:
438+
439+
```tsx
440+
import { List, TextInput, ReferenceInput, AutocompleteInput, required } from 'react-admin';
441+
import { DatagridAG } from '@react-admin/ra-datagrid-ag';
442+
443+
export const CommentList = () => {
444+
const columnDefs = [
445+
{
446+
field: 'title',
447+
cellEditor: (
448+
<TextInput source="title" validate={required()} />
449+
),
450+
},
451+
{
452+
field: 'post_id',
453+
cellEditor: (
454+
<ReferenceInput source="post_id" reference="posts">
455+
<AutocompleteInput validate={required()} />
456+
</ReferenceInput>
457+
),
458+
},
459+
];
460+
return (
461+
<List>
462+
<DatagridAG columnDefs={columnDefs} />
463+
</List>
464+
);
465+
};
466+
```
437467

438468
### `cellRenderer`
439469

@@ -560,6 +590,33 @@ export const PostList = () => {
560590

561591
![DatagridAG defaultColDef](./img/DatagridAG-PostList.png)
562592

593+
### `defaultSort`
594+
595+
The `defaultSort` prop allows you to define what sort settings to apply when users clear the sort on a column.
596+
597+
{% raw %}
598+
```tsx
599+
import React from 'react';
600+
import { List } from 'react-admin';
601+
import { DatagridAG } from '@react-admin/ra-datagrid-ag';
602+
603+
export const PostList = () => {
604+
const columnDefs = [
605+
// Passing null allows users to clear the sort
606+
{ field: 'title', sortingOrder: ['asc', 'desc', null] },
607+
{ field: 'published_at', sortingOrder: ['asc', 'desc', null] },
608+
{ field: 'body', sortingOrder: ['asc', 'desc', null] },
609+
];
610+
611+
return (
612+
<List>
613+
<DatagridAG columnDefs={columnDefs} defaultSort={{ field: 'id', order: 'ASC' }} />
614+
</List>
615+
);
616+
};
617+
```
618+
{% endraw %}
619+
563620
### `getAgGridFilters`
564621

565622
You can use the `getAgGridFilters` prop to provide a function that transforms the filters from the dataProvider to the ag-grid format.
@@ -1943,7 +2000,7 @@ In a column definition, you can use the `cellEditor` field to specify a custom c
19432000

19442001
In addition to that, `<DatagridAGClient>` supports using [React Admin inputs](./Inputs.md) as `cellEditor`, such as [`<TextInput>`](./TextInput.md) or even [`<ReferenceInput>`](./ReferenceInput.md).
19452002

1946-
This allows to leverage all the power of react-admin inputs in your grid, for example to edit a reference.
2003+
This allows to leverage all the power of react-admin inputs in your grid, including validation, for example to edit a reference.
19472004

19482005
To use a React Admin input as `cellEditor`, you need to pass it as a *React Element*:
19492006

@@ -2075,7 +2132,36 @@ const StyledListbox = styled('ul')({
20752132

20762133
**Tip:** Using a custom `cellEditor` works great in combination with a custom [`cellRenderer`](#cellrenderer-1).
20772134

2078-
**Note:** React Admin inputs used ad `cellEditor` do not (yet) support form validation.
2135+
You might want to always use React Admin inputs to edit your columns to leverage the validators with builtin i18n support:
2136+
2137+
```tsx
2138+
import { List, TextInput, ReferenceInput, AutocompleteInput, required } from 'react-admin';
2139+
import { DatagridAGClient } from '@react-admin/ra-datagrid-ag';
2140+
2141+
export const CommentList = () => {
2142+
const columnDefs = [
2143+
{
2144+
field: 'title',
2145+
cellEditor: (
2146+
<TextInput source="title" validate={required()} />
2147+
),
2148+
},
2149+
{
2150+
field: 'post_id',
2151+
cellEditor: (
2152+
<ReferenceInput source="post_id" reference="posts">
2153+
<AutocompleteInput validate={required()} />
2154+
</ReferenceInput>
2155+
),
2156+
},
2157+
];
2158+
return (
2159+
<List perPage={10000} pagination={false}>
2160+
<DatagridAGClient columnDefs={columnDefs} />
2161+
</List>
2162+
);
2163+
};
2164+
```
20792165

20802166
### `cellRenderer`
20812167

0 commit comments

Comments
 (0)