Skip to main content
Version: 3.xx.xx

useSimpleList

By using useSimpleList you get props for your records from API in accordance with Ant Design <List> component. All features such as pagination, sorting come out of the box.

Refer to Ant Design docs for <List> component information β†’

Usage

Let's assume that the data we will show in the table comes from the endpoint as follows:

https://api.fake-rest.refine.dev/posts
[
{
"id": 182,
"title": "A aspernatur rerum molestiae.",
"content": "Natus molestias incidunt voluptatibus. Libero delectus facilis...",
"hit": 992123,
"category": {
"id": 1,
"title": "Navigating"
}
},
{
"id": 989,
"title": "A molestiae vel voluptatem enim.",
"content": "Voluptas consequatur quia beatae. Ipsa est qui culpa deleniti...",
"hit": 29876,
"category": {
"id": 2,
"title": "Empowering"
}
}
]

If we want to make a listing page where we show the title, content, hit and category.title values:

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

export const PostList: React.FC = () => {
const { Text } = Typography;

const { listProps } = useSimpleList<IPost>({
initialSorter: [
{
field: "id",
order: "asc",
},
],
pagination: {
pageSize: 6,
},
});

const categoryIds =
listProps?.dataSource?.map((item) => item.category.id) ?? [];

const { data } = useMany<ICategory>({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});

const renderItem = (item: IPost) => {
const { title, hit, content } = item;

const categoryTitle = data?.data.find(
(category: ICategory) => category.id === item.category.id,
)?.title;

return (
<AntdList.Item
actions={[
<Space key={item.id} direction="vertical" align="end">
<NumberField
value={hit}
options={{
// @ts-ignore
notation: "compact",
}}
/>
<Text>{categoryTitle}</Text>
</Space>,
]}
>
<AntdList.Item.Meta title={title} description={content} />
</AntdList.Item>
);
};

return (
<PageHeader ghost={false} title="Posts">
<AntdList {...listProps} renderItem={renderItem} />
</PageHeader>
);
};

interface IPost {
id: string;
title: string;
content: string;
hit: number;
category: ICategory;
}

interface ICategory {
id: string;
title: string;
}
tip

You can use AntdList.Item and AntdList.Item.Meta like <List> component from Ant Design


use simple list

API

Properties

KeyDescriptionTypeDefault
resourceThe resource to list the datastring | undefinedResource name that it reads from the url
permanentFilterDefault and unchangeable filterCrudFilters[]
permanentSorterDefault and unchangeable sorter stateCrudSorting[]
initialSorterAllows to sort records by speficified order and fieldCrudSorting
initialFilterAllows to filter records by speficified order and fieldCrudFilters
listPropsAnt Design <List> propslistProps
syncWithLocationSortings, filters, page index and records shown per page are tracked by browser historybooleanValue set in Refine. If a custom resource is given, it will be false
onSearchWhen the search form is submitted, it creates the 'CrudFilters' object. See here to create a search formFunction
queryOptionsreact-query's useQuery options UseQueryOptions<{ data: TData[] }, TError>
metaDataMetadata query for dataProviderMetaDataQuery{}
liveModeWhether to update data automatically ("auto") or not ("manual") if a related live event is received. The "off" value is used to avoid creating a subscription."auto" | "manual" | "off""off"
liveParamsParams to pass to liveProvider's subscribe method if liveMode is enabled.{ ids?: string[]; [key: string]: any; }undefined
onLiveEventCallback to handle all related live events of this hook.(event: LiveEvent) => voidundefined

Type Parameters

PropertyDesriptionTypeDefault
TDataResult data of the mutation. Extends BaseRecordBaseRecordBaseRecord
TErrorCustom error object that extends HttpErrorHttpErrorHttpError
TSearchVariablesAntd form values{}{}

Return values

PropertyDescriptionType
queryResultResult of the query of a recordQueryObserverResult<{ data: TData }>
searchFormPropsAnt design Form propsForm
listPropsAnt design List propsList
filtersCurrent filters stateCrudFilters