user-table

User Table Application

A dynamic user data table application built with TypeScript and HTML/CSS that allows users to search, filter, sort, and paginate through student records.

Features

• Search Functionality: Search users by name in real-time
• Gender Filter: Filter users by gender (Male, Female, or All)
• CGPA Sorting: Sort students by CGPA in ascending or descending order
• Pagination: Navigate through user data with configurable rows per page (5, 10, or 15 records)
• Responsive Table: Displays user information including name, age, date of birth, location, gender, CGPA, and course

Project Structure

user-table/
├── src/
│   ├── index.html          # Main HTML file with table layout and controls
│   ├── index.ts            # TypeScript logic for data management and interactions
│   ├── index.css           # Styling for the application
├── dist/                   # Compiled JavaScript output
├── package.json            # Project dependencies and metadata
├── tsconfig.json           # TypeScript configuration
└── readme.md               # This file

User Data

The application includes a dataset of 20 student records with the following information:

• Name: Student’s full name
• Age: Student’s age
• DOB: Date of birth
• Location: Address/Location
• Gender: Male or Female
• CGPA: Cumulative Grade Point Average
• Course: Academic course/major

Technologies Used

• TypeScript: Type-safe JavaScript for robust development
• HTML5: Semantic markup for the table structure
• CSS: Styling and layout
• Node.js: Development environment

Dependencies

• typescript: ^5.9.3 - TypeScript compiler
• @types/node: ^24.10.1 - Type definitions for Node.js

Getting Started

1. Install dependencies:

   npm install
   

2. Compile TypeScript to JavaScript:

   npx tsc
   

3. Open src/index.html in a web browser to view the application

How to Use

• Search: Type a user’s name in the search box to filter results
• Sort by Grade: Select “Asc” or “Dsc” to sort by CGPA
• Filter by Gender: Select a gender option to filter results
• Change Rows: Select the number of rows to display per page (5, 10, or 15)
• Pagination: Use the Prev and Next buttons to navigate between pages