Create, Import, Export and Filter
sic4change opened this issue · comments
sic4change commented
Hi,
Congratulations on your work!!
In my code I have:
const ListActions = props => {
const {
className,
basePath,
total,
resource,
currentSort,
filterValues,
exporter
} = props;
return (
<TopToolbar className={className}>
<CreateButton basePath={basePath} />
<ExportButton
disabled={total === 0}
resource={resource}
sort={currentSort}
filter={filterValues}
exporter={exporter}
/>
<ImportButton {...props} />
</TopToolbar>
);
};
const UserFilter = (props) => (
<Filter {...props}>
<TextInput label="Search by name" source="name" alwaysOn />
<ReferenceInput label="Country" source="country" reference="countries" allowEmpty>
<SelectInput optionText="country" />
</ReferenceInput>
<ReferenceInput label="Community" source="community" reference="communities" allowEmpty>
<SelectInput optionText="community" />
</ReferenceInput>
</Filter>
);
export const UserList = (props) => (
<List {...props} filter={{ createdby: currentUser()}} filters={<UserFilter />} filterDefaultValues={{ createdby: currentUser()}} actions={<ListActions/>}>
<Datagrid>
<TextField source="name" />
<TextField source="username" />
<TextField source="sex" />
<ImageField source="avatar.src" title="avatar" />
<ReferenceField source="country" reference="countries" allowEmpty>
<TextField source="country" />
</ReferenceField>
<ReferenceField source="community" reference="communities" allowEmpty>
<TextField source="community" />
</ReferenceField>
<DateField source="birhtday" elStyle={{ color: 'red' }} />
<TextField source="phone" />
<EmailField source="email" />
<UrlField source="web" />
<BooleanField source="isAdmin" />
<ShowButton label="" />
<EditButton label="" />
<DeleteButton label="" redirect={false}/>
</Datagrid>
</List>
);
But, I can not see my Filter button....
Can you help me, please. Regards
Ben Winding commented
Thanks Mate!
Yeah when you use a custom actions panel, I think you need to add the filters component back in a again.
Try adding the <UseFilters {...props} />
to the actions element. Also see this example for more information:
https://marmelab.com/react-admin/List.html#actions
Cheers,
Ben