Implementation:Infiniflow Ragflow DatasetTable Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Knowledge_Base
Last Updated	2026-02-12 06:00 GMT

Overview

Core document table with TanStack Table integration for sorting, filtering, pagination, row selection, and modal orchestration.

Description

DatasetTable uses useReactTable with manual (server-side) pagination, sorting, column filters, column visibility, and row selection. It composes columns from useDatasetTableColumns which receives modal show functions for parser change, rename, metadata, and log viewing. The table renders via flexRender with Table/TableHeader/TableBody primitives and shows an Empty state when no rows exist. Below the table, RAGFlowPagination controls page navigation. The component manages three modal states: ChunkMethodDialog (parser change), RenameDialog (document rename), and ProcessLogModal (log viewing). Pagination is converted from 1-indexed (API) to 0-indexed (TanStack) format.

Usage

The primary document list view within a dataset, displaying all documents with their status, metadata, parsing controls, and actions.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset/dataset-table.tsx
• Lines: 1-229

Signature

export type DatasetTableProps = Pick<
  ReturnType<typeof useFetchDocumentList>,
  'documents' | 'setPagination' | 'pagination' | 'loading'
> & Pick<UseRowSelectionType, 'rowSelection' | 'setRowSelection'> & {
  showManageMetadataModal: (config: ShowManageMetadataModalProps) => void;
};

export function DatasetTable(props: DatasetTableProps): JSX.Element;

Import

import { DatasetTable } from './dataset-table';

I/O Contract

Inputs

Name	Type	Required	Description
documents	IDocumentInfo[]	Yes	Document data array
pagination	object	Yes	Current page, pageSize, total
setPagination	function	Yes	Pagination change callback
rowSelection	object	Yes	TanStack row selection state
setRowSelection	function	Yes	Row selection change callback
showManageMetadataModal	function	Yes	Open metadata management modal

Outputs

Name	Type	Description
JSX.Element	React element	Full table with headers, rows, pagination, and modals

Usage Examples

<DatasetTable
  documents={documents}
  pagination={pagination}
  setPagination={setPagination}
  rowSelection={rowSelection}
  setRowSelection={setRowSelection}
  showManageMetadataModal={showMetadataModal}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment