sorting-live-preview

import { Typography, AntdList, useSimpleList } from "@pankod/refine-antd";

const { Text } = Typography;

interface IProduct {
    id: number;
    name: string;
    description: string;
    price: string;
}

const ProductList: React.FC = () => {
    const { listProps } = useSimpleList<IProduct>({
        initialSorter: [
            {
                field: "name",
                order: "desc",
            },
        ],
    });

    return <AntdList {...listProps} renderItem={renderItem} />;
};

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>
    );
};