Data Table and Bar Chart Visualization

A Single page web application with using ReactJS, The application should allow users to interact with the data table and dynamically update the bar chart based on the selected rows.

Features

• Fully Responsive with using Redux.
• Each table row has a checkbox as a first cell.
• Initially, only 5 first row checkboxes in the data table should be checked.
• Use Plotly.js library to create a bar chart visualization.
• Display the values of one of your numeric columns of the checked data table rows as bars in the chart.
• When a checkbox in the data table is unchecked, remove the corresponding data from the chart.
• The chart should update in real-time as checkboxes are checked or unchecked.
• Use backend service dummyjson.com
• Implement lazy loading of data.
• Implement pagination.
• A search bar allowing to filter the data in the table.

Screenshots

Run Locally

Clone the project

  git clone https://github.com/ankita-tripathii/data-table-with-barchart

Go to the project directory

  cd data-table-with-barchart

Install dependencies

  npm install

Start the server

  npm start

Tech Stack

• React
• Redux
• Bootstrap
• dummyjson.com
• Plotly