Frontend React Test Task — Interactive Matrix Table

Live demo (GitHub Pages): https://saharij.github.io/table-test-task/

Overview

This project implements an interactive matrix table. The UI generates a matrix of random 3‑digit values and supports live statistics and interactions such as nearest‑value highlighting and row percentage heatmaps.

How To Use

1) Generate the matrix

• The table is generated automatically on first render using the default values.
• Changing Rows (M) or Columns (N) enables the Generate button.
• Click Generate to rebuild the matrix with the new size.

2) Update values

• Click any cell to increase its value by 1.
• Row sums and percentile values update immediately.

3) Highlight nearest values

• Hover any cell to highlight the X nearest values in the entire matrix.
• X is controlled by the Nearest cells (X) input.

4) View row percentages + heatmap

• Hover a Sum cell to switch that row into percentage mode.
• Each cell shows its percent of the row total.
• A heatmap background represents the cell value relative to the max in that row.

5) Row actions

• Delete row: Click the delete icon in the row header.
• Add row: Click Add row to append a new row using the current column count.

Parameters

• M (Rows): number of rows (0–100)
• N (Columns): number of columns (0–100)
• X (Nearest cells): number of nearest values to highlight (0–M×N)

Additional Info

The table includes:

• A Sum column for each row
• A 60th percentile row for each column

Tech Stack

• React + TypeScript
• React Context for state management
• No external UI libraries

Run Locally

Clone the project and run these commands in the terminal

npm install
npm run dev