HD
Hung Dinh

Excel Data Viewer - Copy this React, Tailwind Component to your project

Create a responsive web application using React.js and Tailwind CSS. The application should retrieve and display data from an Excel file (`data.xlsx`) that contains the following columns: `SBD` (Exam ID), `Họ và tên` (Full Name), `Ngày sinh` (Date of Birth), `THCS` (School), `Văn` (Literature), `Toán` (Math), `Anh` (English), `Tổng` (Total Score), and `Thứ tự` (Rank). Key requirements: 1. **File Input**: Include a feature to upload an Excel file (`data.xlsx`). 2. **Data Processing**: Use a library like `xlsx` to parse the Excel file and map the data to the corresponding columns. 3. **Table Display**: Display the data in a clean, responsive table format. Use Tailwind CSS to ensure the design looks good on mobile, web, and desktop. 4. **Sorting & Filtering**: Add sorting functionality for columns like `Tổng` and `Thứ tự`. 5. **Responsive Design**: Ensure that the interface is mobile first and scales well on tablets and desktops. Prioritize smooth transitions and interactivity. 6. **Search Feature**: Add a search input to filter the displayed results by `Họ và tên` or `SBD`. 7. **Excel Export**: Provide the option to download the filtered/sorted data as an Excel file. Ensure the UI has a clean, modern look and feels smooth during interactions. Tech stack: React.js (latest version) Tailwind CSS for styling `xlsx` library for handling Excel file input/output Optional: Use `react table` for table management and sorting.

Prompt
Component Preview

About

ExcelDataViewer - Upload Excel files, view data in a responsive table, sort, filter, and search. Built with React and Tailwind. Get component free!

Share

Last updated 1 month ago