Skip to content

Commit 36f236c

Browse files
Added example on rowStyle prop usage inside SimpleList
1 parent 2eade8e commit 36f236c

File tree

1 file changed

+6
-1
lines changed

1 file changed

+6
-1
lines changed

docs/List.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -2231,19 +2231,24 @@ You can use `<SimpleList>` as `<List>` or `<ReferenceManyField>` child:
22312231
import * as React from "react";
22322232
import { List, SimpleList } from 'react-admin';
22332233

2234+
const postRowStyle = (record, index) => ({
2235+
backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
2236+
});
2237+
22342238
export const PostList = (props) => (
22352239
<List {...props}>
22362240
<SimpleList
22372241
primaryText={record => record.title}
22382242
secondaryText={record => `${record.views} views`}
22392243
tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
22402244
linkType={record => record.canEdit ? "edit" : "show"}
2245+
rowStyle={postRowStyle}
22412246
/>
22422247
</List>
22432248
);
22442249
```
22452250

2246-
For each record, `<SimpleList>` executes the `primaryText`, `secondaryText`, `linkType`, `leftAvatar`, `leftIcon`, `rightAvatar`, and `rightIcon` props functions, and creates a `<ListItem>` with the result.
2251+
For each record, `<SimpleList>` executes the `primaryText`, `secondaryText`, `linkType`, `rowStyle`, `leftAvatar`, `leftIcon`, `rightAvatar`, and `rightIcon` props functions, and creates a `<ListItem>` with the result.
22472252

22482253
**Tip**: To use a `<SimpleList>` on small screens and a `<Datagrid>` on larger screens, use material-ui's `useMediaQuery` hook:
22492254

0 commit comments

Comments
 (0)