Implementation:Infiniflow Ragflow MetadataManageModalColumn Component

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

Overview

Concrete column definitions for the metadata management table provided by the RAGFlow frontend.

Description

The manage-modal-column module exports the `useMetadataColumns` hook that generates `@tanstack/react-table` column definitions for the metadata management table. Columns include an optional select checkbox (for Manage/UpdateSingle modes), field name, description, value type, expandable values with inline editing (supporting text and date input types), and an action column with settings and delete buttons. It manages inline editing state, row expansion states, and a confirm-delete dialog for both field-level and value-level deletions.

Usage

Import the `useMetadataColumns` hook inside the `ManageMetadataModal` component to generate the columns array and delete dialog state for the React Table instance.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/components/metedata/manage-modal-column.tsx
• Lines: 1-417

Signature

interface IUseMetadataColumns {
  isDeleteSingleValue: boolean;
  metadataType: MetadataType;
  handleDeleteSingleValue: (field: string, value: string) => void;
  handleDeleteSingleRow: (field: string) => void;
  handleEditValueRow: (data: IMetaDataTableData, index: number) => void;
  showTypeColumn: boolean;
  isShowDescription: boolean;
  setTableData: React.Dispatch<React.SetStateAction<IMetaDataTableData[]>>;
  setShouldSave: React.Dispatch<React.SetStateAction<boolean>>;
}

export const useMetadataColumns = (params: IUseMetadataColumns) => {
  columns: ColumnDef<IMetaDataTableData>[];
  deleteDialogContent: { visible: boolean; title: string; name: string; warnText: string; onOk: () => void; onCancel: () => void };
};

Import

import { useMetadataColumns } from '@/pages/dataset/components/metedata/manage-modal-column';

I/O Contract

Inputs

Name	Type	Required	Description
isDeleteSingleValue	boolean	Yes	Whether individual value deletion buttons are shown
metadataType	MetadataType	Yes	Current metadata operation mode controlling column visibility
handleDeleteSingleValue	(field: string, value: string) => void	Yes	Callback to delete a single value from a field
handleDeleteSingleRow	(field: string) => void	Yes	Callback to delete an entire metadata field row
handleEditValueRow	(data: IMetaDataTableData, index: number) => void	Yes	Callback to open the values editing modal for a row
setTableData	Dispatch<SetStateAction<IMetaDataTableData[]>>	Yes	State setter for inline value edits
setShouldSave	Dispatch<SetStateAction<boolean>>	Yes	Flag setter to trigger auto-save after edits

Outputs

Name	Type	Description
columns	ColumnDef<IMetaDataTableData>[]	Column definitions array for @tanstack/react-table
deleteDialogContent	object	State object controlling the confirm-delete dialog visibility and callbacks

Usage Examples

import { useMetadataColumns } from '@/pages/dataset/components/metedata/manage-modal-column';

const { columns, deleteDialogContent } = useMetadataColumns({
  isDeleteSingleValue: true,
  metadataType: MetadataType.Manage,
  handleDeleteSingleValue,
  handleDeleteSingleRow,
  handleEditValueRow,
  isShowDescription: true,
  showTypeColumn: false,
  setTableData,
  setShouldSave,
});

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment