Add Advanced Expandable Row Table Component

components/expandable-row-table-component-v2/README.md

@@ -0,0 +1,137 @@
+# Expandable Row Table for Retool
+
+A highly customizable expandable row table component built with React, TypeScript, and the Retool Custom Component SDK.
+
+This component is designed for advanced operational dashboards, analytics tooling, audit monitoring, transaction inspection, and enterprise-style data grid interactions inside Retool.
+
+---
+
+## Features
+
+### Expandable Rows
+
+* Expandable detail sections
+* Recursive nested JSON rendering
+* Automatic key-value formatting
+* Multi-key expandable support
+* API response inspection
+* Object and array visualization
+* Long text handling
+* URL rendering
+
+### Advanced Table Features
+
+* Dynamic column visibility
+* Drag-and-drop column rearranging
+* Persistent column ordering
+* ASC → DESC → Reset sorting
+* Search and filtering
+* Pagination
+* Responsive layout
+* CSV export
+* Interactive row selection
+
+### Styling Controls
+
+* Header colors
+* Row colors
+* Alternate row colors
+* Font customization
+* Footer styling
+* Pagination styling
+* Theme-aware design
+
+---
+
+## Technology Stack
+
+* React 18
+* TypeScript
+* Retool Custom Component SDK
+* Lucide React Icons
+
+---
+
+## Inputs
+
+| Property               | Type    | Description                      |
+| ---------------------- | ------- | -------------------------------- |
+| tableData              | Array   | Main table dataset               |
+| pageSize               | Number  | Rows per page                    |
+| expandableDataKey      | String  | Expandable object field(s)       |
+| showToolbar            | Boolean | Toggle toolbar                   |
+| showSearchBar          | Boolean | Toggle search                    |
+| headerColor            | String  | Header background                |
+| headerTextColor        | String  | Header text color                |
+| rowBackground          | String  | Row background                   |
+| alternateRowBackground | String  | Alternate row background         |
+| accentColor            | String  | Accent/highlight color           |
+| footerBackgroundColor  | String  | Footer background                |
+| paginationTextColor    | String  | Pagination text color            |
+| rowHeight              | Enum    | Small / Medium / Large / Dynamic |
+| columnWidthMode        | Enum    | Auto / Manual                    |
+
+---
+
+## Outputs
+
+| Property        | Type   | Description                |
+| --------------- | ------ | -------------------------- |
+| selectedRowData | Object | Selected row data          |
+| columnOrder     | Array  | Current column arrangement |
+| visibleColumns  | Array  | Visible table columns      |
+
+---
+
+## Expandable Data Examples
+
+### Single Key
+
+```txt
+metadata
+```
+
+### Multiple Keys
+
+```txt
+metadata,api_response,tags
+```
+
+### JSON Array Format
+
+```json
+["metadata","api_response","tags"]
+```
+
+---
+
+## Sorting Behavior
+
+* First click → Ascending
+* Second click → Descending
+* Third click → Reset sorting
+
+---
+
+## Column Rearranging
+
+Columns support drag-and-drop reordering and persist after refresh using Retool state storage.
+
+---
+
+## Use Cases
+
+* Audit Logs
+* Transaction Monitoring
+* API Debugging
+* Financial Dashboards
+* Shipment Tracking
+* Analytics Dashboards
+* Internal Admin Tools
+* Operational Monitoring
+
+---
+
+## License
+
+MIT License

components/expandable-row-table-component-v2/metadata.json

@@ -0,0 +1,17 @@
+{
+  "id": "expandable-row-table",
+  "title": "Expandable Row Table",
+  "author": "@widlestudiollp",
+  "shortDescription": "An advanced expandable row table component for Retool with nested JSON rendering, drag-and-drop column rearranging, pagination, sorting, filtering, CSV export, and enterprise-style data grid interactions.",
+  "tags": [
+    "Table",
+    "Data Grid",
+    "Expandable Rows",
+    "Analytics",
+    "JSON Viewer",
+    "Dashboard",
+    "React",
+    "TypeScript",
+    "Retool"
+  ]
+}

components/expandable-row-table-component-v2/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "my-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tryretool/custom-component-support": "latest",
+    "fuse.js": "^7.3.0",
+    "lucide-react": "^0.553.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "npx retool-ccl dev",
+    "deploy": "npx retool-ccl deploy"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "postcss-modules": "^6.0.0",
+    "prettier": "^3.0.3"
+  },
+  "retoolCustomComponentLibraryConfig": {
+    "name": "ExpandableRowTable",
+    "label": "Expandable Row Table",
+    "description": "Table with exapndable row feature with responsive.",
+    "entryPoint": "src/index.tsx",
+    "outputPath": "dist"
+  }
+}