Skip to main content
Version: 2.xx.xx


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 β†’


Let's assume that the data we will show in the table comes from the endpoint as follows:
"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 {
} from "@pankod/refine";

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) => ?? [];

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) => ===,

return (
<Space key={} direction="vertical" align="end">
// @ts-ignore
notation: "compact",
<AntdList.Item.Meta title={title} description={content} />

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

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

interface ICategory {
id: string;
title: string;

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

use simple list



resourceThe resource to list the datastring | undefinedResource name that it reads from the url
permanentFilterDefault and unchangeable filterCrudFilters[]
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

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

Return values

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