query-table.tsx

Overview

query-table.tsx is a React functional component file that implements a highly interactive and customizable data table for displaying, sorting, filtering, and managing a collection of query records (BeginQuery objects). It leverages the @tanstack/react-table library for table state management and rendering logic, and integrates UI components from a shared design system including buttons, tooltips, and table elements.

The component supports:

Dynamic column definitions with localized headers and custom cell rendering.
Sorting, filtering, and column visibility state management.
Pagination and row selection.
Action buttons for editing and deleting individual records with callbacks.
Tooltips for truncated text to improve usability.

This file is designed as a client-side React component ('use client' directive) and is intended to be part of a larger UI system that manages flows or queries, likely in an application where users can view and manipulate query-related data.

Detailed Explanation

Interfaces

`IProps`

interface IProps {
  data: BeginQuery[];
  deleteRecord(index: number): void;
  showModal(index: number, record: BeginQuery): void;
}

data: Array of BeginQuery objects representing the rows displayed in the table.
deleteRecord: Callback function to delete a record at a specified index.
showModal: Callback function to invoke a modal UI for editing a record, passing the index and the record itself.

Component: `QueryTable`

export function QueryTable({ data = [], deleteRecord, showModal }: IProps)

Purpose

Renders a table showing query records with columns for key, name, type, optional flag, and action buttons. It manages sorting, filtering, and column visibility states and provides UI controls for editing and deleting each record.

Parameters

data: Default empty array if not provided.
deleteRecord: Function to delete a record given its index.
showModal: Function to show an edit modal for a specific record.

Return

JSX element rendering the complete table UI with header, body, and empty state.

Internal State

sorting: Controls the sort order of the table columns (SortingState).
columnFilters: Controls filtering on columns (ColumnFiltersState).
columnVisibility: Controls which columns are visible (VisibilityState).

All states are managed with React's useState hooks and passed to the useReactTable hook.

Columns Definition

columns: ColumnDef<BeginQuery>[] defines the table columns:

Column Key	Header (i18n)	Cell Rendering	Notes
`key`	`flow.key`	Tooltip with truncated key value	Shows full key on hover
`name`	`flow.name`	Tooltip with truncated name value	Shows full name on hover
`type`	`flow.type`	Localized type string (lowercased)	Uses translation keys like `flow.typevalue`
`optional`	`flow.optional`	Displays "Yes" or "No"	Boolean representation
`actions`	`common.action`	Buttons with Pencil (edit) and Trash2 (delete) icons	Calls `showModal` and `deleteRecord` respectively

Each tooltip is implemented using Tooltip, TooltipTrigger, and TooltipContent components.

Table Instance Setup

The component uses the useReactTable hook with the following configuration:

data and columns as inputs.
State and setters for sorting, filtering, and visibility.
Core row model, pagination, sorting, and filtering row models enabled.
onColumnVisibilityChange to update visibility state.
Enables interactive table features seamlessly.

Rendering Logic

Wraps the table in a bordered, rounded container.
Renders table headers dynamically from header groups.
Renders table rows, each with visible cells.
Applies conditional styling for selected rows.
If no rows exist, displays a TableEmpty component with the number of columns.
The actions column's buttons invoke callback functions passed via props.

Usage Example

import { QueryTable } from './query-table';
import { BeginQuery } from '../../interface';

const sampleData: BeginQuery[] = [
  {
    key: 'query1',
    name: 'Get Users',
    type: 'SQL',
    optional: false,
  },
  {
    key: 'query2',
    name: 'Get Orders',
    type: 'API',
    optional: true,
  },
];

function App() {
  const handleDelete = (index: number) => {
    console.log('Delete record at index:', index);
    // Implement delete logic
  };

  const handleShowModal = (index: number, record: BeginQuery) => {
    console.log('Show modal for:', record);
    // Implement modal logic
  };

  return (
    <QueryTable data={sampleData} deleteRecord={handleDelete} showModal={handleShowModal} />
  );
}

Important Implementation Details

Localization: Uses react-i18next via useTranslation() to provide translated headers and cell content (e.g., type values).
Performance: Table rendering leverages memoized row models (getCoreRowModel, getSortedRowModel, etc.) for efficient updates.
UI Components: Uses shared UI components for consistency (Table, Button, Tooltip, etc.), ensuring accessibility and styling.
Cell Truncation and Tooltips: Long text fields (key and name) are truncated in the cell but fully visible on hover via tooltips.
Action Buttons: Use transparent buttons styled on hover, with iconography for common edit and delete actions, enhancing UX.
State Synchronization: Sorting, filtering, and visibility states are synced with the table instance, allowing for controlled interactions.

Interaction with Other System Parts

Data Source: Expects BeginQuery[] data, likely fetched or managed by a parent component or global state.
Callbacks: Relies on parent components to provide deletion and modal display logic via props.
UI Library: Depends on shared UI components and utility functions (cn for classNames).
Localization: Integrates with the application's i18n solution.
Interfaces: Uses the BeginQuery interface from ../../interface to type-check data.

This component acts as a reusable, self-contained table view for query entities, fitting into a larger application workflow involving query management.

Mermaid Component Diagram

componentDiagram
    QueryTable <|-- Table
    QueryTable <|-- Button
    QueryTable <|-- Tooltip
    QueryTable <|-- TableEmpty
    QueryTable *-- useReactTable
    useReactTable --> @tanstack/react-table
    QueryTable ..> BeginQuery : data type
    QueryTable ..> react-i18next : useTranslation()
    QueryTable ..> cn : utility function

Summary

query-table.tsx provides a fully featured, localized, and interactive data table component for displaying and managing query records. It combines advanced table state management via @tanstack/react-table with a modular UI component library, enabling sorting, filtering, pagination, and row-level actions. This component is designed for reuse and integration in any React-based system dealing with query or flow data entities.