Implementation:FlowiseAI Flowise TablePagination

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Pagination
Last Updated	2026-02-12 07:00 GMT

Overview

The TablePagination component provides a pagination control bar with an items-per-page selector, an item range indicator, and page navigation buttons.

Description

TablePagination renders a horizontal layout with three sections: a Select dropdown allowing the user to choose items per page (12, 24, 48, or 100), a text display showing the current item range (e.g., "Items 1 to 12 of 100"), and a Material-UI Pagination component for page navigation. It manages local state for activePage, itemsPerPage, and totalItems, syncing them with the parent via props and invoking the onChange callback with the new page number and items-per-page whenever either value changes. The module also exports DEFAULT_ITEMS_PER_PAGE (set to 12) as a shared constant.

Usage

Use this component below any paginated list or table view (such as chatflows, document stores, or marketplace listings) to provide user-controlled pagination.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/pagination/TablePagination.jsx
• Lines: 1-85

Signature

export const DEFAULT_ITEMS_PER_PAGE = 12

const TablePagination = ({ currentPage, limit, total, onChange }) => {
    // ...
}
export default TablePagination

Import

import TablePagination, { DEFAULT_ITEMS_PER_PAGE } from '@/ui-component/pagination/TablePagination'

I/O Contract

Inputs

Name	Type	Required	Description
currentPage	number	No	The currently active page number (1-indexed)
limit	number	No	The current number of items per page
total	number	No	The total number of items across all pages
onChange	func	Yes	Callback invoked with (pageNumber, itemsPerPage) when the user changes page or limit

Outputs

Name	Type	Description
Rendered JSX	React element	A horizontal bar with items-per-page selector, range text, and page navigation controls

Usage Examples

Basic Usage

<TablePagination
    currentPage={1}
    limit={12}
    total={156}
    onChange={(page, itemsPerPage) => {
        fetchData({ page, limit: itemsPerPage })
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Data_Visualization