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:
``bash
pnpm install
`

2. Start the development server:
`bash
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:

`tsx
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
/>
`

$3

- 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