A
Anonymous

Interactive Data Table - Copy this React, Tailwind Component to your project

# Frontend Assignment ## Objective To assess your ability to build a simple, functional, and visually appealing table using React. This assignment will evaluate your understanding of React components, state management, and basic styling. ## **Task Details** Your task is to create a React application that displays a table based on the following requirements: ## Table wireframe ![image.png](https://prod files secure.s3.us west 2.amazonaws.com/e02381ec 76ea 4f28 a43d 8401ab06ea6f/9be315ce 8602 4dfe 8bd4 d9f0e85e2a80/image.png) ## Table Features ### 1. Column 1 (Label 1) This column should contain a **single select dropdown** to select options from a static list. (You can define any dummy data for the list) Once an item from the dropdown is selected , you cannot reselect it in the next row. ### 2. Column 2 (Label 2) This column should contain a “**Multi select dropdown”** to select options from a list. User can select multiple options through this dropdown. There should be a component at the bottom of the dropdown which will let user to add a new item in the list for the 2nd dropdown. Please note that this component should rest at the end of the option’s list and not as a separate component outside the dropdown component. ![image.png](https://prod files secure.s3.us west 2.amazonaws.com/e02381ec 76ea 4f28 a43d 8401ab06ea6f/0e47397e 0fd8 48f1 860a 764e46b907f0/image.png) ### 3. Add button Lastly there should be a “Add new Row” button at the bottom of the table which will let user add additional rows to the table Clicking on add should add a new row at the bottom of the table where the user would select an option for the column 1 and column 2. ## **Tools/Technologies** Use React (with or without Create React App, Vite, or any similar setup). Use plain CSS, CSS Modules, or a CSS framework like TailwindCSS or Bootstrap for styling. You are free to use additional frontend tools / frameworks. No backend is required; the data can be hardcoded. ## **Evaluation Criteria** 1. **Functionality:** Does the table meets all the functionality described in the scopes. 2. **Code Quality:** Is the code organized, readable, and following React best practices? 3. **UI/UX:** The table and its components should follow the design as showed in the above wireframe. 4. **Bonus Features:** Implementing bonus features/improvements which improves the user experience and functionality is optional but will strengthen your submission by highlighting your creativity and extra effort that you have put into the assignment. However, avoid overcomplicating it. If you include any such enhancements, please list them as bullet points in your submission email.

Prompt
Component Preview

About

InteractiveDataTable - Features single select and multi-select dropdowns, add new rows, and styled with Tailwind. Built with React and. Copy template now!

Share

Last updated 1 month ago