Hierarchy Table is a component that displays a table of nested data. It uses recursion to render each level of the hierarchy, allowing parent rows to expand and display their child elements. Each row can be deleted individually, including all of its nested child rows.
- ReactJS + Vite
- TypeScript
- Tailwind v4
public- folder containing JSON file with example datasrc- the main folder with application codeassets- folder containing iconscomponents- components, mainly Tablehooks- folder with custom hooks, mainly for fetching datastyles- folder with theme.css file containing color variables definitionsutils- folder containing helper functions
- Clone the repository with
git clone - Navigate to the root folder and install dependencies with
npm install - Run the development server with
npm run dev - Open the browser and navigate to the
http://localhost:5173/
- Loading - add a loading indicator component to improve user experience during data fetching
- Error handling - implement an error handling component to clearly inform users about any issues or failures during table rendering or data operations
- Rows deletion - Since individual rows (along with their nested children) can be deleted, it would be beneficial to implement more robust logic for safely removing records from the underlying data structure