variable-table.tsx

Overview

variable-table.tsx defines a React functional component named VariableTable that renders a fully-featured, interactive data table displaying a list of variables. Each variable record contains a key, a reference, and a value. The table supports sorting, filtering, pagination, and dynamic column visibility using the powerful @tanstack/react-table library.

The component also provides inline actions for editing and deleting records, with UI elements enhanced by tooltips and icons to improve user experience. It integrates with translation utilities for internationalization and uses custom hooks and UI components consistent with the surrounding application.

Detailed Documentation

Component: VariableTable

Purpose

Displays a table of variables with columns for key, reference label, and value. Supports sorting, filtering, pagination, and visibility toggling for columns. Includes edit and delete actions per row.

Props

Internal State

• sorting: State for current sorting criteria, managed by useReactTable.

• columnFilters: State for active filters on columns.

• columnVisibility: State controlling which columns are visible.

Libraries and Hooks Used

• @tanstack/react-table: Core table logic - sorting, filtering, pagination, visibility.

• lucide-react: Icon components (Pencil, Trash2) for action buttons.

• react-i18next: Internationalization hook useTranslation for localized column headers.

• Custom hook: useGetVariableLabelByValue(nodeId) to obtain user-friendly labels for variable references.

• UI components: Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Button, Tooltip, etc., for consistent styling and behavior.

• Utility cn: Classnames concatenation helper.

Columns Definition

The table defines these columns:

Table Configuration

• Uses useReactTable with data and column definitions.

• Enables sorting, filtering, pagination, and column visibility.

• Uses getCoreRowModel, getFilteredRowModel, getSortedRowModel, and getPaginationRowModel for respective table states.

• State changes (sorting, filtering, visibility) are reflected in the table state.

Rendered Output

• Wraps table inside a div with full width and border styling.

• Renders header rows using table.getHeaderGroups().

• Renders body rows with all visible cells per row.

• If no rows are present, displays a TableEmpty placeholder spanning all columns.

• Cells apply optional CSS classes from column metadata for styling (e.g., max width).

Usage Example

import { VariableTable } from './variable-table';
import { useState } from 'react';

function Example() {
  const [variables, setVariables] = useState<VariableFormSchemaType[]>([
    { key: 'var1', ref: 'ref1', value: 'Value 1' },
    { key: 'var2', ref: 'ref2', value: 'Value 2' },
  ]);

  function handleDelete(index: number) {
    setVariables((prev) => prev.filter((_, i) => i !== index));
  }

  function handleShowModal(index: number, record: VariableFormSchemaType) {
    console.log('Edit variable', index, record);
    // Show modal logic here...
  }

  return (
    <VariableTable
      data={variables}
      deleteRecord={handleDelete}
      showModal={handleShowModal}
      nodeId="node-123"
    />
  );
}

Important Implementation Details

• Tooltips for Truncated Text: The key and ref columns display truncated text in the table cell but show the full text in tooltips on hover to improve usability without compromising layout.

• Dynamic Labels for References: Reference values (ref) are converted to human-readable labels via the useGetVariableLabelByValue hook, enabling more meaningful displays.

• Table State Management: Sorting, filtering, and visibility states are fully controlled and synchronized with the useReactTable instance, ensuring consistent behavior and UI updates.

• Action Buttons: Edit and delete actions are rendered per row with accessible buttons and icons, wired to parent handlers through props.

• Column Metadata: Metadata (like cellClassName) allows per-column styling such as max-width constraints applied in the rendered cells.

Interactions with Other System Parts

• Custom Hook useGetVariableLabelByValue: Fetches display labels for variable references based on the current nodeId. This connects the table to an external source of truth for variable metadata.

• Translation (react-i18next): Column headers render localized strings via keys (flow.key, flow.ref, flow.value, common.action), integrating the table into a multilingual UI.

• UI Library Components: The table uses custom UI components (Table, Button, Tooltip, etc.) shared across the application for consistent look and feel.

• Parent Components: The VariableTable expects callbacks from parents to handle edits (show modal) and deletions, implying that modal management and data mutations are handled outside this component.

Visual Diagram

classDiagram
    class VariableTable {
        +props: IProps
        +state: sorting, columnFilters, columnVisibility
        +columns: ColumnDef[]
        +render()
    }

    VariableTable --> useReactTable
    VariableTable --> useGetVariableLabelByValue
    VariableTable --> useTranslation
    VariableTable ..> Table : uses
    VariableTable ..> Button : uses
    VariableTable ..> Tooltip : uses
    VariableTable ..> Pencil : uses (icon)
    VariableTable ..> Trash2 : uses (icon)

Summary

The variable-table.tsx file provides a reusable, customizable React component for displaying and managing a table of variables. It leverages modern React table utilities for rich features and integrates seamlessly with translation and UI libraries. Its design cleanly separates presentation from data handling by relying on props for actions, making it a flexible building block in the overall system.