Implementation:Infiniflow Ragflow FilesTable Component

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

Overview

Concrete file manager table component with selection and column definitions provided by the RAGFlow frontend.

Description

The FilesTable component renders a sortable, selectable data table for the file manager using `@tanstack/react-table` with manual server-side pagination. Columns include a select checkbox, file name (with folder navigation), upload date, size, linked knowledge bases, and an actions column. It integrates row selection disabling for knowledge-base-type entries, and includes dialogs for renaming files (`RenameDialog`) and linking files to datasets (`LinkToDatasetDialog`).

Usage

Import as a named export and pass files data, pagination state, row selection state, and the move-file modal handler from parent hooks.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/files/files-table.tsx
• Lines: 1-345

Signature

type FilesTableProps = Pick<
  ReturnType<typeof useFetchFileList>,
  'files' | 'loading' | 'pagination' | 'setPagination' | 'total'
> &
  Pick<UseRowSelectionType, 'rowSelection' | 'setRowSelection'> &
  UseMoveDocumentShowType;

export function FilesTable({
  files, total, pagination, setPagination, loading,
  rowSelection, setRowSelection, showMoveFileModal,
}: FilesTableProps): JSX.Element;

Import

import { FilesTable } from '@/pages/files/files-table';

I/O Contract

Inputs

Name	Type	Required	Description
files	IFile[]	Yes	Array of file records to display
total	number	Yes	Total count for pagination
pagination	{ current: number; pageSize: number }	Yes	Current pagination state
setPagination	(params: { page: number; pageSize: number }) => void	Yes	Callback to update pagination
loading	boolean	Yes	Whether file list is loading
rowSelection	RowSelectionState	Yes	Current row selection state object
setRowSelection	OnChangeFn<RowSelectionState>	Yes	Callback to update row selection
showMoveFileModal	function	Yes	Handler to show the move-file modal

Outputs

Name	Type	Description
JSX.Element	React.ReactElement	Renders a sortable file table with pagination, rename dialog, and link-to-dataset dialog

Usage Examples

import { FilesTable } from '@/pages/files/files-table';

<FilesTable
  files={files}
  total={total}
  pagination={pagination}
  setPagination={setPagination}
  loading={loading}
  rowSelection={rowSelection}
  setRowSelection={setRowSelection}
  showMoveFileModal={showMoveFileModal}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment