react-admin : <List> view

https://marmelab.com/react-admin/List.html

React-admin - The List View

 

<List> component

 

API에서 fetch한 레코드들의 배열을 디스플레이함.

보통 <Datagrid>를 사용하여 데이터들을 열거하고 <Field> 컴포넌트에 각 레코드들을 렌더링함.

리덕스 용어로 치면 <List>는 conntected component이고, <Datagrid>는 dumb component임.

 

<List> 컴포넌트가 허용하는 props는 아래와 같음.

• title - default : [resource] list
• actions
• exporter : 디폴트로 <ExportButton>을 갖고 있음 (csv file로 download) fasle값 주면 리무브
• bulkActionButtons : 한 번에 여러 레코드에 효과를 주는 버튼 (2가지 - BulkDeleteButton, BulkExportButton)
• filters : 반드시 <Input>이 있어야 함
• perPage : default는 10이고 오버라이딩해서 변경할 수 있음 ex. 
• sort {field, order} , 필드에서 sortBy 속성을 사용할 수 있음
• filter
• filterDefaultValues
• pagination
• aside
• empty

 

 

import { List, downloadCSV } from 'react-admin';
import jsonExport from 'jsonexport/dist';

const exporter = posts => {
    const postsForExport = posts.map(post => {
        const { backlinks, author, ...postForExport } = post; // omit backlinks and author
        postForExport.author_name = post.author.name; // add a field
        return postForExport;
    });
    jsonExport(postsForExport, {
        headers: ['id', 'title', 'author_name', 'body'] // order fields in the export
    }, (err, csv) => {
        downloadCSV(csv, 'posts'); // download as 'posts.csv` file
    });
})

const PostList = props => (
    <List {...props} exporter={exporter}>
        ...
    </List>
)

 

const PostFilter = (props) => (
    <Filter {...props}>
        <TextInput label="Search" source="q" alwaysOn />
        <TextInput label="Title" source="title" defaultValue="Hello, World!" />
    </Filter>
);

export const PostList = (props) => (
    <List {...props} filters={<PostFilter />}>
        ...
    </List>
);

 

 

 

<Datagrid> component

• body
• rowStyle
• rowClick - edit, show, expand, toggloeSelection, function
• expand
• isRowSelectable

 

export const PostList = (props) => (
    <List {...props}>
        <Datagrid rowClick="edit">
            ...
        </Datagrid>
    </List>
);

const PostPanel = ({ id, record, resource }) => (
    <div dangerouslySetInnerHTML={{ __html: record.body }} />
);

const PostList = props => (
    <List {...props}>
        <Datagrid expand={<PostPanel />}>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <BooleanField source="commentable" />
            <EditButton />
        </Datagrid>
    </List>
)

export const PostList = props => (
    <List {...props}>
        <Datagrid isRowSelectable={ record => record.id > 300 }>
            ...
        </Datagrid>
    </List>
);

 

 

style을 커스터마이징할 때는 useStyles() 메소드 활용

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    row: {
        backgroundColor: '#ccc',
    },
});

const PostList = props => {
    const classes = useStyles();
    return (
        <List {...props}>
            <Datagrid classes={{ row: classes.row }}>
                ...
            </Datagrid>
        </List>
    );
}

export PostList;

 

 

 

 

<SimpleList> component

• <List> <ReferenceManyField> child로 사용
• 반응형 웹을 제작할 때 작은 스크린용으로 사용하는 것이 좋음
• props : primaryText, secondaryText, leftAvatar, leftIcon, rightAvatar, rightIcon

 

// in src/posts.js
import React from 'react';
import { useMediaQuery } from '@material-ui/core';
import { List, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';

export const PostList = (props) => {
    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
    return (
        <List {...props}>
            {isSmall ? (
                <SimpleList
                    primaryText={record => record.title}
                    secondaryText={record => `${record.views} views`}
                    tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
                />
            ) : (
                <Datagrid>
                    ...
                </Datagrid>
            )}
        </List>
    );
}

 

 

 

<SingleFieldList> component

• 레코드들의 배열 중에 한 가지 속성을 나타낼 때 사용하는 컴포넌트
• 하나의 <Field>를 자식 컴포넌트로 가짐
• <ReferenceManyField> <ReferenceArrayField> 컴포넌트의 자식으로서 유용함

<ReferenceArrayField
    label="Tags"
    reference="tags"
    source="tags"
>
    <SingleFieldList>
        <ChipField source="name" />
    </SingleFieldList>
</ReferenceArrayField>