Test Table View Project

This is a Next.js test project that demonstrates the TableView component functionality.

Features

• Interactive Table: Edit cells by double-clicking
• Drag & Drop: Reorder rows and columns by dragging
• Context Menus: Right-click for add/delete row/column options
• Sorting: Click column headers to sort data
• Cell Selection: Click and drag to select multiple cells
• Responsive Design: Scales and adapts to different screen sizes
• Toast Notifications: Feedback for user actions

Getting Started

1. Install dependencies:

   pnpm install

2. Start the development server:

   pnpm dev

3. Open http://localhost:3000 in your browser

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint

TableView Component Usage

The TableView component accepts the following props:

<TableView
  filteredData={tableData}
  tableData={tableData}
  setTableData={setTableData}
  updateInputData={updateInputData}
  saveToHistory={saveToHistory}
  tableScale={tableScale}
  isTableExpanded={isTableExpanded}
  inputData={inputData}
  selectedFormat={selectedFormat}
  parseInputData={parseInputData}
  mode="edit" // "edit" | "view"
  enableChangeColumnOrder={true} // boolean
  showAsCardInMobile={false} // boolean
/>

Props Description

• mode: Controls the table behavior

  • "edit" (default): Full editing capabilities
  • "view": Read-only mode, no editing allowed

• enableChangeColumnOrder: Controls column drag & drop

  • true (default): Columns can be reordered by dragging
  • false: Column reordering is disabled

• showAsCardInMobile: Controls mobile display format

  • false (default): Shows table on mobile
  • true: Shows data as cards on mobile devices

Dependencies

• Next.js 14
• React 18
• TypeScript
• Tailwind CSS
• Radix UI components
• Lucide React icons