This project is a React-based admin dashboard that includes several key features for managing and interacting with a dataset of users. The dashboard provides functionalities like searching, editing, deleting, pagination, and more.
- Column Titles: Designed to stand out from the entries for clear differentiation.
- Search Functionality: Includes a search bar that can filter users based on any property (ID, name, email, role). Real-time filtering as you type, and search is triggered on pressing Enter.
- Edit/Delete Rows: Capability to edit or delete rows in place. These changes are in-memory and not persistent.
- Pagination: Each page displays 10 rows. Pagination controls include buttons for navigating to the first, previous, next, and last pages. Pagination updates dynamically based on the search/filter results.
- Row Selection: Ability to select one or more rows for bulk actions. Selected rows are highlighted for visual feedback.
- Bulk Delete: A 'Delete Selected' button allows for the deletion of multiple selected rows simultaneously.
- Select/Deselect All: A checkbox in the header row to select or deselect all visible rows on the current page.
- Styling: Specific class names and styles applied to different elements for a cohesive and user-friendly UI.
- Responsive Design: Ensures a consistent experience across various devices and screen sizes.
To set up the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/amaan14999/admin-dashboard.git
-
Navigate to the project directory:
cd admin-dashboard -
Install the dependencies:
npm i
-
Run the application:
npm start
The project is deployed using Cloudflare. The live version can be found here.