https://github.com/ay03/dynamic-data-table-angular

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

angular csv-upload data-table dynamic-ui excel-uploader frontend-project inline-editing primeng typescript voice-input

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ay03/dynamic-data-table-angular
• Owner: ay03
• Created: 2025-04-20T20:07:58.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-03T09:48:21.000Z (about 1 year ago)
• Last Synced: 2025-05-03T10:29:07.222Z (about 1 year ago)
• Topics: angular, csv-upload, data-table, dynamic-ui, excel-uploader, frontend-project, inline-editing, primeng, typescript, voice-input
• Language: TypeScript
• Homepage:
• Size: 2.33 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📊 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](upload.png)

**Auto-Numbered Rows**  

![Row Numbers](RowNumbers.png)

---

### ✏️ Editing

**Edit Cell by Typing**  

![Edit by Typing](EditTextbyTyping.png)

**Edit Cell Using Voice Input**  

![Edit by Voice](EditTextbyVoice.png)

**Hover Tooltip for Editing Instructions**  

![Hover Info](Hover.png)

---

### 📊 Table Features

**Filter by Column**  

![Filter](filter.png)

**Sort by Column**  

![Sort](sort.png)

**Resize Table Columns**  

![Resize Columns](ResizeColumns.png)

---

### 📥 Data Export

**Download Filtered Data as CSV**  

![Download CSV](downloadCSV.png)

**Microphone Icon for Voice Input**  

![Mic Icon](microphone.png)

---

## 🛠️ 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

```bash

git clone https://github.com/ay03/dynamic-data-table-angular.git

cd dynamic-data-table-angular

npm install

ng serve