#diydog_docs
lusty baneBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1479387634622140471
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- diydog_docs, 23 hours ago, 24 messages
- diydog_docs, 1 day ago, 88 messages
- diydog_code, 2 days ago, 27 messages
- diydog_code, 6 days ago, 72 messages
sacred gyro
lusty baneBOT
mortal gale
👋 happy to help
sacred gyro
Is there any way to get the pagination event, or do I have to write a pagination component myself?
I don't want to retrieve all the data at once, so I need pagination. However, I should know the total number of items in the list, so I can retrieve the corresponding pagination data and leave the rest blank as placeholders. The problem is that I don't know if the pagination options below the list have been clicked.
mortal gale
yes I understand, let me take a look and will get back to you on this. AFAICT from the public docs the pagination is done on the frontend but maybe we have something that is undocumented. will get back to you on this
yes I double-checked and if you need to do server-side pagination you would have to build it yourself
you can use the extraActions to load your own Previous and Next buttons
sacred gyro
yes I understand
mortal gale
import React, { useState, useEffect, useCallback } from 'react';
import {
DetailPageTable,
type DetailPageModuleTableItem,
type DetailPageModuleTableColumn,
} from '@stripe/ui-extension-sdk/ui';
const PAGE_SIZE = 10;
// Your API fetching function — adapt to your backend
async function fetchItems(): Promise<{
items: DetailPageModuleTableItem[];
}> {
const res = await fetch('');
return res.json();
}
const columns: DetailPageModuleTableColumn[] = [
{ key: 'name', label: 'Name' },
{ key: 'status', label: 'Status' },
];
export function PaginatedTable() {
const [items, setItems] = useState<DetailPageModuleTableItem[]>([]);
const [pending, setPending] = useState(true);
const loadPage = useCallback(async (cursor?: string) => {
}, []);
// Load initial page
useEffect(() => {
loadPage();
}, [loadPage]);
const handleNext = useCallback(() => {
}, []);
const handlePrevious = useCallback(() => {
}, []);
// Build pagination actions using extraActions
const extraActions = [];
if (cursorHistory.length > 0) {
extraActions.push({ label: 'Previous', onPress: handlePrevious });
}
if (nextCursor) {
extraActions.push({ label: 'Next', onPress: handleNext });
}
return (
<DetailPageTable
columns={columns}
items={items}
pending={pending}
extraActions={extraActions.length > 0 ? extraActions : undefined}
/>
);
}
this can be your boilerplate
sacred gyro
You even wrote it out for me, thank you so much!