Skip to content

A dynamic Angular-based data table with inline editing, voice input, CSV/Excel upload, filtering, sorting, and CSV export. Built with PrimeNG UI components.

Notifications You must be signed in to change notification settings

ay03/dynamic-data-table-angular

Repository files navigation

📊 Angular Dynamic Data Table

A dynamic and feature-rich data table built using Angular and PrimeNG. Upload files, edit rows, filter, sort, and even use your voice to input data.


✅ Features

  • 📂 Upload CSV or Excel files (.csv, .xlsx)
  • 🔍 Live column filtering
  • 🔃 Sorting by text and number (custom)
  • ✏️ Inline editing with right-click
  • 🎤 Voice input (mic icon to dictate values)
  • 📥 Download filtered data as CSV
  • 📐 Column resizing

🖼️ Demo Screenshots

🔼 Upload and Structure

Upload CSV or Excel Files
Upload

Auto-Numbered Rows
Row Numbers


✏️ Editing

Edit Cell by Typing
Edit by Typing

Edit Cell Using Voice Input
Edit by Voice

Hover Tooltip for Editing Instructions
Hover Info


📊 Table Features

Filter by Column
Filter

Sort by Column
Sort

Resize Table Columns
Resize Columns


📥 Data Export

Download Filtered Data as CSV
Download CSV

Microphone Icon for Voice Input
Mic Icon


🛠️ Tech Stack

  • Angular (v15+ with Standalone Components)
  • PrimeNG (UI Components)
  • PapaParse (CSV parsing)
  • XLSX (Excel support)
  • Web Speech API (Voice input)

🚀 Running the App Locally

git clone https://github.com/ay03/dynamic-data-table-angular.git
cd dynamic-data-table-angular
npm install
ng serve

About

A dynamic Angular-based data table with inline editing, voice input, CSV/Excel upload, filtering, sorting, and CSV export. Built with PrimeNG UI components.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published