前端项目实战壹佰贰拾肆react-admin+material ui-react-admin之FilterButton

我是歌谣 这里是歌谣的前端笔记小屋 想加入前端巅峰人才交流群私信我 

 

import { 
    CreateButton,
    Datagrid,
    FilterButton,
    FilterForm,
    ListBase,
    Pagination,
    TextField,
    TextInput,
    BooleanField
} from 'react-admin';
import { Stack } from '@mui/material';

const postFilters = [
    <TextInput label="Search" source="q" alwaysOn />,
    <TextInput label="Title" source="title" defaultValue="Hello, World!" />,
];

const ListToolbar = () => (
    <Stack direction="row" justifyContent="space-between">
        <FilterForm filters={postFilters} />
        <div>
            <FilterButton filters={postFilters} />
            <CreateButton />
        </div>
    </Stack>
)

export const FilterButtonList = () => (
    <ListBase resource="t_geyao_person">
        <ListToolbar />
        <Datagrid>
        <TextField source='id'></TextField>
            <TextField source='name'></TextField>
            <TextField source='sex'></TextField>
            <TextField source='salary'></TextField>
            <BooleanField source='status'></BooleanField>
        </Datagrid>
        <Pagination />
    </ListBase>
)

 运行结果