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