table-expand-collapse-row

Table that expand and collapse row, very simple, made in react vite

---

STATUS: 🔔 React VITE 🚀 App: Finished... 🎯

                 ==================================================

---

---

Table of Contents

• Intro
• Feature
• Technologies
• Built With
• How-To-Use
• Author

Intro

This project was found in codesandbox.io with the title 'react table expand-collapse row' .

However, during my development, one of the differences in relation to the original project was that while one line is shown, all other lines are hidden; and another difference was displaying variable information that is stored in the table itself.

Feature

• react component
• Collapse

 

Technologies

The original project was written in react typescript; and I rewrote it in Vite using JavaScript.

One of the differences from the original project was modifying the Collapse code so that when a line was displayed, all other lines were hidden, and only one line was displayed at a time, working like a personalized accordion.

Another change was to modify the 'collapse' line that showed unchanged information and now displays variable information, which is obtained in a column of the table.

And it also assigns a different color to the line displayed in the collapse than the other lines.

Built With

 

How-To-Use

To clone and run this application, you'll need Git, Node.js v18.16.0 or higher + npm (used version npm@9.8.1) and VITE v5.0.12 installed on your computer. From your command line:

 
## Clone this repository or download zip folder
### $ `https://github.com/Almir-git-unifc/table-collapse-expand-row.git`


 
## Install project VITE
### $ `npm create vite@latest`


 
## choose name project, framework and variant
### $ `choose  (your project named)   vite-project `
### $ `(framework)       React`
### $ `(variant)         JavaScript`


 
## Run locally the app
### $ `cd folder-name-project (vite-project)`
### $ `npm install`
### $ `npm run dev`
#### $ `use the Local link provided by VITE to access the server`


#### $ `Copy content project, was download of this Github repository, inside folder vite-project created before`


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

Enjoyed and if this is useful to you, give me a star 🌟

 

Author

👤 Almir

• Github: @Almir-git-hub