Thagoo / vi-frontend-assignment

Frontend assignment for Vidyayatan Infotech

Vidyayatan Infotech: Frontend Hiring Assignment

How to submit the Assignment : LINK

• Fork this repository
• Solve the tasks and commit the changes in your forked repository (DO NOT open a PR on this repository)
• Deploy the changes to your preferred vendor (we recommend Render, Vercel and netlify)
• Submit the assignment using This Google form

Project setup instructions

1. Install nvm to manage node versions, Make sure you are using Node.JS v21.0.0
2. Install pnpm from LINK
3. Make sure that your vs-code is using the same ts version as the current project
4. Run pnpm install to install dependencies
5. Run pnpm run dev to start the dev server
6. Run pnpm run precommit to check if your code passes ts checks and linter checks

Assignment Tasks

1. Add a new checkbox column

• Create a new checkbox column as the first column
• On checking the column the selected row should be highlighted i.e background should change
• Only a single column can be selected at a time across pages

Examples:

First column is a checkbox, on selecting the row notice the background of the selected row is slightly different from other rows

2. Sticky Columns

• Create the first 2 columns as sticky columns
• On hovering over the row the entire row's background should be highlighted including the sticky columns
• To test this change either use mobile view or decrease the width of the table

3. Resizable Columns

• Create resizable columns, i.e. the width of columns should increase or decrease depending on user interaction
• If the content is too big to fit in a column, the content should not overflow out of the column i.e. overflow-hidden should be enforced