Implementation:FlowiseAI Flowise DocumentStoreTable
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Document Store |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
The DocumentStoreTable component renders a sortable, clickable data table displaying document store entries with their status, name, description, connected flows, character/chunk counts, and loader type icons.
Description
DocumentStoreTable uses styled Material-UI Table components (StyledTableCell and StyledTableRow) to render document store records. It supports client-side sorting by name (ascending/descending) with sort preferences persisted to localStorage. Each row shows a DocumentStoreStatus indicator, truncated name and description text (clamped to 5 lines), connected flow count, total characters, total chunks, and up to 3 loader type icons with a "+N More" overflow indicator. During loading, it displays Skeleton placeholder rows. Clicking a row triggers the onRowClick callback with the row data. The table adapts to dark/light mode via the Redux customization store.
Usage
Use this component on the Document Store listing page to present all document stores in a structured, sortable table format with quick visual indicators for status and loader types.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/ui-component/table/DocumentStoreTable.jsx
- Lines: 1-255
Signature
export const DocumentStoreTable = ({ data, isLoading, onRowClick, images }) => {
// ...
}
Import
import { DocumentStoreTable } from '@/ui-component/table/DocumentStoreTable'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| data | array | No | Array of document store objects with name, description, status, whereUsed, totalChars, totalChunks, and id fields |
| isLoading | bool | No | When true, renders skeleton loading placeholders instead of data rows |
| onRowClick | func | No | Callback invoked with the row's data object when a table row is clicked |
| images | object | No | Map of document store IDs to arrays of loader icon image URLs |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX | React element | A bordered table with sortable header, status indicators, and clickable rows |
Usage Examples
Basic Usage
<DocumentStoreTable
data={documentStores}
isLoading={isLoadingStores}
onRowClick={(store) => navigate(`/document-stores/${store.id}`)}
images={loaderImages}
/>