API Reference
Advanced Tutorials
Comparison
FAQ
Contributing
Testing
Migration Guide
Licence
This is documentation for Refine 3.xx.xx, which is no longer actively maintained.
For up-to-date documentation, see the latest version (4.xx.xx).
Version: 3.xx.xx
filtering-live-preview
localhost:3000/products
Live previews only work with the latest documentation.
import {
Typography,
AntdList,
useSimpleList,
Input,
} from "@pankod/refine-antd";
const { Text } = Typography;
interface IProduct {
id: number;
name: string;
description: string;
price: string;
}
const ProductList: React.FC = () => {
const { listProps, setFilters } = useSimpleList<IProduct>({
initialFilter: [
{
field: "name",
operator: "contains",
value: "Awesome",
},
],
});
return (
<div>
<Input.Search
placeholder="Search by name"
onChange={(e) => {
setFilters([
{
field: "name",
operator: "contains",
value: e.target.value,
},
]);
}}
/>
<AntdList {...listProps} renderItem={renderItem} />
</div>
);
};
const renderItem = (item: IProduct) => {
const { id, name, description, price } = item;
return (
<AntdList.Item actions={[<Text key={id}>{price}</Text>]}>
<AntdList.Item.Meta title={name} description={description} />
</AntdList.Item>
);
};