sorting-live-preview

import { useSimpleList } from "@refinedev/antd";
import { Typography, List } from "antd";

const { Text } = Typography;

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

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

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

const renderItem = (item: IProduct) => {
    const { id, name, description, price } = item;

    return (
        <List.Item actions={[<Text key={id}>{price}</Text>]}>
            <List.Item.Meta title={name} description={description} />
        </List.Item>
    );
};