variable-table.tsx

Overview

variable-table.tsx is a React functional component file designed to display and manage a dynamic, interactive data table of variables within a UI. It leverages the powerful @tanstack/react-table library for table state management and rendering, combined with UI components from a custom design system and iconography from lucide-react. The table supports sorting, filtering, pagination, and column visibility toggling. It also provides user actions to edit or delete individual records via buttons integrated into each row.

This component is commonly used in scenarios where users need to view and manipulate a collection of variable definitions, each with properties like key, ref, and value. It integrates with localization (react-i18next) and a custom hook for fetching display labels for variable references.

Exports

`VariableTable` Component

A fully featured table component rendering a list of variables with editable and deletable rows.

Detailed Explanation

IProps Interface

Defines the props accepted by the VariableTable component:

Prop Name	Type	Description
`data`	`VariableFormSchemaType[]`	Array of variable records to display in the table.
`deleteRecord`	(index: number) => void	Callback function invoked when a delete action is triggered.
`showModal`	(index: number, record: VariableFormSchemaType) => void	Callback to open an edit modal for a specific record.
`nodeId`	`string` (optional)	Optional identifier used to fetch variable labels via a custom hook.

`VariableTable` Function Component

Purpose

Renders a customizable table providing sorting, filtering, pagination, and visibility controls. Displays variable data and exposes UI controls to modify or delete records.

Parameters

data: An array of variable objects conforming to VariableFormSchemaType.
deleteRecord: Function to delete a variable by index.
showModal: Function to show a modal dialog for editing a variable.
nodeId: Optional string ID to provide context for label retrieval.

Internal State

sorting: Tracks current table sorting state.
columnFilters: Tracks active column filters.
columnVisibility: Tracks which columns are visible.

Hooks and Utilities

useTranslation(): Provides translation functionality for localized headers.
useGetVariableLabelByValue(nodeId): Custom hook to get display labels for variable references.
useReactTable(): Core hook from @tanstack/react-table managing table state and behavior.

Table Columns Definition

Column Key	Header Text (i18n key)	Description	Cell Renderer Details
`key`	flow.key	Variable key	Truncated text with a tooltip showing full key on hover.
`ref`	flow.ref	Variable reference	Uses getLabel hook to display a human-readable label; truncated with tooltip for overflow.
`value`	flow.value	Variable value	Directly displays the variable's value.
`actions`	common.action	Edit and delete buttons	Two buttons with icons (`Pencil` for edit, `Trash2` for delete), calling the respective callback handlers.

Table Features Enabled

Sorting: Clicking on headers sorts columns.
Filtering: Column filters can be applied.
Pagination: Supports paging through data.
Column Visibility: Columns can be shown or hidden dynamically.

Render Output

Table headers and rows are rendered using custom UI components (Table, TableBody, TableCell, etc.).
Rows display variable data with interactive cells.
If no data is available, a TableEmpty placeholder component is shown.
Buttons for editing and deleting call provided handlers with the relevant row index and data.

Usage Example

import { VariableTable } from './variable-table';
import { VariableFormSchemaType } from './schema';

const variables: VariableFormSchemaType[] = [
  { key: 'var1', ref: 'ref1', value: 'Value 1' },
  { key: 'var2', ref: 'ref2', value: 'Value 2' },
];

function App() {
  const handleDelete = (index: number) => {
    console.log('Delete variable at index:', index);
  };

  const handleShowModal = (index: number, record: VariableFormSchemaType) => {
    console.log('Edit variable:', record);
  };

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

Important Implementation Details

React Table Integration:
The file uses useReactTable to create a feature-rich table, integrating sorting, filtering, pagination, and visibility management in a declarative manner.
Tooltips for Text Overflow:
Keys and references are displayed truncated with tooltips to improve readability and UX on narrow columns.
Action Buttons:
Edit and delete buttons use iconography from lucide-react and trigger callback functions passed from parent components, enabling flexible UI control.
Localization:
Headers and action labels are translated using react-i18next ensuring multi-language support.
Custom Hook useGetVariableLabelByValue:
This hook is used to convert variable reference values into user-friendly labels, likely fetching or computing display names based on the nodeId.

Interaction with Other Parts of the System

useGetVariableLabelByValue Hook:
This component relies on this custom hook (from ../../hooks/use-get-begin-query) to resolve labels for the ref field, indicating integration with a broader data querying or state management system.
UI Components:
Uses shared UI components such as Button, Table, Tooltip, and TableEmpty from the application's component library. This enforces a consistent look and feel across the application.
Localization:
Depends on react-i18next for internationalization support.
Schema Types:
The variable data conforms to the VariableFormSchemaType imported from ./schema, making this component strongly typed and consistent with the form validation and variable schema definitions elsewhere in the application.

Visual Diagram

componentDiagram
    component VariableTable {
        +data: VariableFormSchemaType[]
        +deleteRecord(index: number): void
        +showModal(index: number, record: VariableFormSchemaType): void
        +nodeId?: string

        -- Internal State --
        - sorting: SortingState
        - columnFilters: ColumnFiltersState
        - columnVisibility: VisibilityState

        -- Methods --
        +RenderTable()
    }

    component useReactTable
    component useGetVariableLabelByValue
    component TableUIComponents
    component ButtonUI
    component TooltipUI
    component Translation (react-i18next)

    VariableTable --> useReactTable : manages table state & rendering
    VariableTable --> useGetVariableLabelByValue : fetches label for ref
    VariableTable --> TableUIComponents : renders table structure
    VariableTable --> ButtonUI : renders edit/delete buttons
    VariableTable --> TooltipUI : renders tooltips
    VariableTable --> Translation : localizes headers and labels

Summary

The variable-table.tsx file is a React component that provides a versatile, interactive table for managing a list of variable entries. It integrates filtering, sorting, pagination, and dynamic column visibility using @tanstack/react-table. It supports editing and deleting records via callback props, uses localized strings for UI text, and enhances UX with tooltips for truncated text. The component fits into a larger system through shared UI components, hooks for data retrieval, and internationalization, making it a reusable and robust part of the application's variable management feature.