Table Component Demo

Reusable table component for physical demands analysis and data collection

About This Component

This table component is designed for physical demands analysis forms. It supports configurable rows and columns, selectable cells (like checkboxes), and text input cells. The component fully integrates with the project's color system and supports light/dark mode.

New: Built-in validation with visual feedback using error/success colors from the color system. Hover over error cells to see validation messages.

Demo 1: Physical Demands Analysis (Selectable Cells)

Click on cells to select frequency. Single selection per row (like radio buttons).

Demo 2: Comments Table (Text Input Cells)

Type comments or notes in each cell.

Demo 3: Compact Style (Multiple Selection)

Multiple selections allowed per row (like checkboxes). Compact styling for space efficiency.

Demo 4: Validation (Selectable Cells)

Click "Validate" to test validation. Cells with errors show red background with error messages on hover. All cells show green when validation passes.

Demo 5: Validation (Input Cells)

Fill in the cells and click "Validate". Empty cells show red errors. All cells show green when filled.