k-t18 · ritikv37 · Apr 1, 2025
diff --git a/Tech Knowledge/Table.md b/Tech Knowledge/Table.md
@@ -0,0 +1,125 @@
+# AG Grid React Table vs PrimeReact DataTable
+
+This README provides a detailed comparison between **AG Grid React Table** and **PrimeReact DataTable**, two popular React table libraries, focusing on their features, pros/cons, bundle size, customization options, and visual examples (sorting, custom UI, filtering). All information is accurate as of **April 01, 2025**.
+
+## Overview
+
+- **AG Grid React Table**: A feature-rich, high-performance data grid for complex, enterprise-grade applications with advanced functionalities like pivoting and virtualization.
+- **PrimeReact DataTable**: A lightweight, open-source table component focused on simplicity and flexibility, ideal for basic to moderately complex use cases.
+
+---
+
+## Key Differences
+
+| **Aspect**             | **AG Grid React Table**                              | **PrimeReact DataTable**                           |
+|-------------------------|-----------------------------------------------------|---------------------------------------------------|
+| **Purpose**            | Advanced grid for data-intensive apps               | Simple table for basic to moderate needs          |
+| **Rendering**          | Virtualized `<div>` structure                       | Native HTML `<table>` element                     |
+| **Feature Set**        | Extensive (pivoting, grouping, charting)            | Core features (sorting, filtering, templating)    |
+| **Performance**        | Optimized for large datasets (virtualization)       | Best for small to medium datasets                 |
+| **Licensing**          | Free Community + Paid Enterprise                    | Fully open-source (MIT)                           |
+
+---
+
+## Pros and Cons
+
+| **Aspect**             | **AG Grid React Table**                                                                                   | **PrimeReact DataTable**                                                             |
+|-------------------------|----------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
+| **Pros**               | - Rich feature set (grouping, pivoting, editing)                                                         | - Simple and easy to use                                                            |
+|                        | - High performance with virtualization                                                                   | - Lightweight, smaller bundle size                                                  |
+|                        | - Enterprise-ready with premium features                                                                 | - Fully open-source, no cost for core features                                      |
+|                        | - Framework-agnostic (React, Angular, Vue)                                                               | - Flexible templating for custom content                                            |
+|                        | - Extensive documentation and community                                                                  | - Unstyled mode for custom CSS integration                                          |
+| **Cons**               | - Steeper learning curve                                                                                 | - Limited advanced features (no pivoting, etc.)                                     |
+|                        | - Larger bundle size (~500 KB Community, 1 MB+ Enterprise)                                               | - Performance issues with large datasets                                            |
+|                        | - Paid license for Enterprise features                                                                   | - Smaller community, fewer resources                                                |
+|                        | - Styling can be challenging with pre-built themes                                                       | - Less suited for enterprise-grade apps                                             |
+
+---
+
+## Feature Comparison
+
+| **Feature**            | **AG Grid React Table**                                      | **PrimeReact DataTable**                          |
+|-------------------------|-------------------------------------------------------------|--------------------------------------------------|
+| **Sorting**            | Multi-column, custom comparators                            | Single/multi-column, basic customization         |
+| **Searching**          | Quick filter + advanced column filtering                    | Global filter + basic column filtering           |
+| **Child Tables**       | Row grouping, tree data                                     | Row expansion, no hierarchies                    |
+| **Editable Columns**   | Custom editors (text, dropdowns)                            | Basic editing via templates                     |
+| **Bulk Actions**       | Row selection with custom operations                        | Multi-row selection, basic support               |
+| **Bundle Size**        | ~500 KB (Community), 1 MB+ (Enterprise)                     | ~100-150 KB (DataTable alone)                    |
+| **Customization**      | Highly flexible (cell renderers, themes), more complex      | Easy via templates/unstyled mode, simpler scope  |
+
+---
+
+## AG Grid React Table - Paid Features (Enterprise Edition)
+
+AG Grid offers a free **Community** edition and a paid **Enterprise** edition ($999 USD per license). The table below lists key features exclusive to the Enterprise edition, enhancing its suitability for advanced enterprise applications.
+
+| **Feature**                  | **Description**                                                                                     |
+|-------------------------------|-----------------------------------------------------------------------------------------------------|
+| **Server-Side Row Model**    | Efficiently handles massive datasets (millions of rows) with server-side data loading and scrolling.|
+| **Integrated Charting**      | Built-in charting capabilities to visualize grid data (e.g., bar, line, pie charts).               |
+| **Pivoting**                 | Transforms rows into columns for multi-dimensional data analysis (e.g., Excel-like pivot tables).  |
+| **Aggregation**              | Advanced data summarization (e.g., sum, average) across grouped or pivoted data.                   |
+| **Master/Detail**            | Displays hierarchical data with expandable master rows revealing detail grids.                     |
+| **Excel Export**             | Exports grid data to Excel format with formatting and styling preserved.                           |
+| **Advanced Tool Panels**     | Enhanced UI panels for column management, filtering, and pivoting operations.                      |
+| **Row Grouping (Enhanced)**  | More robust grouping options with collapsible groups and custom aggregations.                      |
+| **Dedicated Support**        | Access to AG Grid’s engineering team via Zendesk for priority support and troubleshooting.         |
+
+*Note*: The Community edition includes core features like sorting, filtering, and basic row grouping, but the above features require an Enterprise license
+
+---
+
+## Visual Examples
+
+Below are links to official demos showcasing **Sorting**, **Custom UI**, and **Filtering** for both libraries. Visit these to see live tables or take screenshots.
+
+### **AG Grid React Table**
+
+- **Sorting UI**  
+  - **Link**: [Row Sorting Demo](https://www.ag-grid.com/react-data-grid/row-sorting/)  
+  - **Description**: Clickable headers with up/down arrows for sorting, multi-sort with numbered indicators (e.g., "1," "2").
+
+- **Custom UI**  
+  - **Link**: [Cell Rendering Demo](https://www.ag-grid.com/react-data-grid/cell-rendering/)  
+  - **Description**: Custom badges (e.g., green "Active"), action buttons, and dark-themed styling.
+
+- **Filtering UI**  
+  - **Link**: [Filtering Demo](https://www.ag-grid.com/react-data-grid/filtering/)  
+  - **Description**: Quick filter bar + column dropdowns with text inputs, checkboxes, or sliders.
+
+### **PrimeReact DataTable**
+
+- **Sorting UI**  
+  - **Link**: [Sort Demo](https://primereact.org/datatable/#sort)  
+  - **Description**: Headers with sort icons (up/down arrows), multi-sort with priority numbers.
+
+- **Custom UI**  
+  - **Link**: [Templating Demo](https://primereact.org/datatable/#template)  
+  - **Description**: Star icons for ratings, custom headers/footers, Tailwind-styled rows.
+
+- **Filtering UI**  
+  - **Link**: [Filter Demo](https://primereact.org/datatable/#filter)  
+  - **Description**: Global search bar + column filters (dropdowns or inline inputs).
+
+---
+
+## When to Use
+
+- **AG Grid React Table**: Choose for large datasets, complex features (e.g., pivoting), or enterprise apps. Be prepared for a learning curve and potential costs.
+- **PrimeReact DataTable**: Opt for simplicity, lightweight builds, or custom styling needs in smaller projects with no budget constraints.
+
+---
+
+## Getting Started
+
+- **AG Grid**:  
+  - Install: `npm install ag-grid-react ag-grid-community` (add `ag-grid-enterprise` for paid features)  
+  - Docs: [AG Grid Documentation](https://www.ag-grid.com/react-data-grid/)
+
+- **PrimeReact**:  
+  - Install: `npm install primereact primeicons`  
+  - Docs: [PrimeReact Documentation](https://primereact.org/datatable/)
+
+---