Lists

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>
	)}
/>

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>
	)}
/>

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)}
/>