> ## Documentation Index
> Fetch the complete documentation index at: https://instantdb-react-ui.kirankunigiri.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lists

> Render lists of data with queries built-in

### Example

Render a list and automatically get access to type-safe data. Pick between normal, infinite, and paginated modes. Optionally pass a query.

<CodeGroup>
  ```tsx normal theme={"system"}
  import { IDBList } from "instantdb-react-ui";

  <IDBList
  	mode="normal"
  	schema={schema}
  	db={db}
  	entity="persons"
  	render={(person, id) => (
  		<p className="text-sm">{person.name}</p>
  	)}
  />
  ```

  ```tsx infinite theme={"system"}
  import { IDBList } from "instantdb-react-ui";

  <IDBList
  	mode="infinite"
  	schema={schema}
  	db={db}
  	entity="persons"
  	render={(person, id) => (
  		<p className="text-sm">{person.name}</p>
  	)}
  />
  ```

  ```tsx paginated theme={"system"}
  import { IDBList, useIDBPagination } from "instantdb-react-ui";
  import { Pagination } from '@mantine/core';

  // Pagination Hook
  const pagination = useIDBPagination({
  	schema: schema,
  	db: db,
  	model: 'persons',
  	pageSize: 10,
  });

  // UI Component from Mantine to show page list. Use whatever you want here.
  <Pagination
  	siblings={1}
  	withEdges
  	boundaries={1}
  	value={pagination.page}
  	total={pagination.totalPages}
  	onChange={page => pagination.goToPage(page)}
  />

  ```
</CodeGroup>

### Props

<ParamField path="mode" type="'normal' | 'infinite' | 'paginated'" default="normal">
  The list rendering mode. 'normal' loads all data at once, 'infinite' loads more as you scroll, and 'paginated' uses page-based navigation.
</ParamField>

<ParamField path="entity" type="string" required>
  The name of the entity/model to query from the database.
</ParamField>

<ParamField path="render" type="(item: T, id: string) => ReactNode" required>
  Function to render each item in the list. Receives the item data and its ID.
</ParamField>

<ParamField path="query" type="object">
  The query object to filter and sort the data. If not provided, fetches all records of the entity.
</ParamField>

<ParamField path="skeleton" type="ReactNode">
  Component to show while data is loading.
</ParamField>

<ParamField path="noResults" type="ReactNode">
  Component to show when there are no results or an error occurs.
</ParamField>

<ParamField path="pageSize" type="number" default={10}>
  Number of items per page (only for 'infinite' and 'paginated' modes).
</ParamField>

<ParamField path="pagination" type="PaginationState">
  Required when mode is 'paginated'. Pagination state object from useIDBPagination hook
</ParamField>