TungE610 / checkbox-matrix

CheckBox-Matrix Component

This is a simple checkbox-matrix component that allows users to select 2-item combinations of any items from the two lists. Each checkbox cell can be focused, we can also move focus to another cell and check this checkbox cell.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

How to use this component in your project:

Passing data into the component

Passing two list's data into data prop.

The first list will be the first row of the matrix and the second list will be the first column of the matrix

Passing a list of checked cells's index you want to initialize into checkedCells prop.

Each element in this list is an array with 2 elements, the first element is row's index of a checked cell and the second one is column's index

Get the list of checked cells

The list of checked cells will be returned in checkedCells state in CheckboxMatrix component

Demo

Screen.Recording.2022-09-20.at.16.52.59.mov