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: number;
title: string;
content: string;
hit: number;
category: { id: number };
}

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

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

info

To disable pagination, you can set hasPagination property to false which is true by default. If hasPagination has been set to false, pagination elements will be hidden in the <Table/>. If you want to handle the pagination on the client-side you can override the pagination property in tableProps.


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[]
hasPaginationWhether to use server side pagination or not.booleantrue
initialSorterAllows to sort records by speficified order and fieldCrudSorting
initialFilterAllows to filter records by speficified order and fieldCrudFilters
defaultSetFilterBehaviorDefault behavior for setFilters and its internal use in this hook"merge" | "replace"merge
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
setFiltersA function that accepts a new filter state- (filters: CrudFilters, behavior?: "merge" \| "replace" = "merge") => void
- (setter: (previousFilters: CrudFilters) => CrudFilters) => void