use-dataset-table-columns.tsx

Overview

The use-dataset-table-columns.tsx file defines a custom React hook, useDatasetTableColumns, which returns a collection of column definitions for rendering a dataset table using the @tanstack/table-core library. These columns represent metadata and controls related to documents within a dataset, enabling features such as row selection, sorting, status toggling, parsing controls, and action management.

This hook integrates UI components (checkboxes, buttons, switches, tooltips) and leverages translation hooks, navigation logic, and document status management hooks to provide a rich interactive table experience. It is meant to be used within a React component rendering a dataset table, providing columns configured with cell renderers and headers tailored for document-related data.

Detailed Explanations

Main Export: useDatasetTableColumns

function useDatasetTableColumns({
  showChangeParserModal,
  showRenameModal,
  showSetMetaModal,
}: UseDatasetTableColumnsType): ColumnDef<IDocumentInfo>[]

Purpose

Provides an array of column definitions (ColumnDef<IDocumentInfo>[]) to be consumed by a table component rendering documents' dataset information.

Parameters

• showChangeParserModal (function): Function to open the modal for changing a document's parser.

• showRenameModal (function): Function to open the modal for renaming a document.

• showSetMetaModal (function): Function to open the modal for setting document metadata.

These callbacks are passed down to specific cells to control modals.

Returns

• columns: An array of column definitions that define the table's columns, including header renderers, cell renderers, sorting behavior, and interaction logic.

Columns Description

Each column is a configuration object compatible with @tanstack/table-core's ColumnDef interface, tailored for the IDocumentInfo type.

Supporting Types and Interfaces

UseDatasetTableColumnsType

A composite type combining modal control types:

type UseDatasetTableColumnsType = UseChangeDocumentParserShowType &
  UseRenameDocumentShowType &
  UseSaveMetaShowType;

• UseChangeDocumentParserShowType: Provides showChangeParserModal.

• UseRenameDocumentShowType: Provides showRenameModal.

• UseSaveMetaShowType: Provides showSetMetaModal.

These types ensure the hook receives all modal control functions.

Imported Components and Hooks

• UI Components from local UI library:

  • Button, Checkbox, Switch, Tooltip + related subcomponents for accessible UI elements.

• Icons:

  • FileIcon (custom file icon component)

  • ArrowUpDown (indicates sortable columns)

• Hooks:

  • useNavigatePage: Provides navigation functions like navigateToChunkParsedResult.

  • useSetDocumentStatus: Provides setDocumentStatus for toggling document enablement.

• Utilities:

  • formatDate: Formats timestamps into readable strings.

  • cn: Utility for conditional classNames.

• Table library:

  • ColumnDef from @tanstack/table-core defines table columns.

• Translation:

  • useTranslation from react-i18next for internationalization.

Important Implementation Details

• Selection Column:

  • Uses the table instance API to support "select all on page" and individual row selection with indeterminate states.

• Sorting:

  • Sorting is enabled only for name and create_time columns.

  • Sorting buttons toggle ascending/descending order.

• Navigation:

  • Clicking the document name triggers navigation to parsed chunk results, passing document ID and knowledge base ID.

• Status Toggle:

  • The status switch controls whether a document is enabled (status === '1').

  • Updates are propagated via the setDocumentStatus hook.

• Custom Cells:

  • ParsingStatusCell and DatasetActionCell are specialized components handling parsing controls and row actions respectively.

  • These receive modal control callbacks for UI interactions.

• Tooltips:

  • Document names are wrapped in tooltips showing full names to improve UX on truncated text.

Interaction with Other System Components

• Modals: The hook relies on externally provided modal handlers (showChangeParserModal, showRenameModal, showSetMetaModal) for editing parsing, renaming, and metadata.

• Navigation: Uses useNavigatePage for routing to document parsing results, integrating with the application's page navigation system.

• Document Status Management: Uses useSetDocumentStatus to update document enablement state, likely tied to backend API or state management.

• Custom Cells: Imports ParsingStatusCell and DatasetActionCell from sibling components to encapsulate complex cell behavior.

• Localization: Integrates with react-i18next for multi-language support, scoped to the knowledgeDetails namespace.

Usage Example

import React from 'react';
import { useTable } from '@tanstack/react-table';
import { useDatasetTableColumns } from './use-dataset-table-columns';

function DatasetTable() {
  const columns = useDatasetTableColumns({
    showChangeParserModal: () => { /* open parser modal */ },
    showRenameModal: () => { /* open rename modal */ },
    showSetMetaModal: () => { /* open set meta modal */ },
  });

  const data = [ /* array of IDocumentInfo objects */ ];

  const table = useTable({ columns, data });

  return (
    <table>
      {/* render table headers and rows using table instance */}
    </table>
  );
}

Mermaid Component Diagram

componentDiagram
    component useDatasetTableColumns {
      +showChangeParserModal()
      +showRenameModal()
      +showSetMetaModal()
      +returns ColumnDef<IDocumentInfo>[]
    }
    component DatasetActionCell
    component ParsingStatusCell
    component useNavigatePage
    component useSetDocumentStatus
    component UI_Components {
      Button
      Checkbox
      Switch
      Tooltip
    }
    useDatasetTableColumns --> DatasetActionCell : uses
    useDatasetTableColumns --> ParsingStatusCell : uses
    useDatasetTableColumns --> useNavigatePage : navigates
    useDatasetTableColumns --> useSetDocumentStatus : updates status
    useDatasetTableColumns --> UI_Components : renders UI

Summary

The use-dataset-table-columns.tsx file provides a modular, reusable hook for defining dataset table columns tailored for document management. It combines UI controls, status management, navigation, and localization to deliver an interactive dataset table experience in a React application. The file's integration with modals and custom cells encapsulates complex logic while keeping the column definitions clean and declarative.