feat(AGGrid): add AG Grid wrapper component with theming support#4
Merged
garrity-miepub merged 6 commits intomainfrom Jan 23, 2026
Merged
feat(AGGrid): add AG Grid wrapper component with theming support#4garrity-miepub merged 6 commits intomainfrom
garrity-miepub merged 6 commits intomainfrom
Conversation
Contributor
garrity-miepub
commented
Jan 21, 2026
garrity-miepub
commented
- Add AGGrid wrapper component with variants (default, bordered, striped)
- Add size options (sm, md, lg) for row density
- Implement custom theme CSS that inherits MIE Web UI design tokens
- Support AG Grid v35+ API including new rowSelection object format
- Add comprehensive Storybook stories with 16 examples
- Include TypeScript support with proper generic types
- Export ColDef and other AG Grid types for convenience
- Add AGGrid wrapper component with variants (default, bordered, striped) - Add size options (sm, md, lg) for row density - Implement custom theme CSS that inherits MIE Web UI design tokens - Support AG Grid v35+ API including new rowSelection object format - Add comprehensive Storybook stories with 16 examples - Include TypeScript support with proper generic types - Export ColDef and other AG Grid types for convenience
Brings in all AG Grid customizations from the Waggleline project. NEW CELL RENDERERS (CellRenderers.tsx): - AvatarNameRenderer - Avatar with name, fallback initials, favicon - StatusBadgeRenderer - Color-coded status badges - EngagementScoreRenderer - Score with color-coded progress bar - EmailRenderer - Clickable mailto links - PhoneRenderer - Formatted phone with click-to-call - LinkedInRenderer - LinkedIn profile links - DomainRenderer - Website links with globe icon - CurrencyRenderer - Formatted USD currency - NumberRenderer - Comma-separated numbers - DateRenderer - Multiple formats (short, medium, long, relative, datetime) - BooleanRenderer - Yes/No badges - CompanyRenderer - Company name with favicon - ProgressRenderer - Visual progress bar - TagsRenderer - Array of tag badges All renderers memoized with React.memo for performance. THEME ENHANCEMENTS (ag-grid-theme.css): - Complete dark mode support (charcoal #1f2937) - Primary brand color integration (#17AEED) - Always-visible scrollbars for macOS - Floating filter styling with focus states - Cell focus with primary blue glow - Custom checkbox styling - Status badge utility classes - Responsive adjustments for mobile - Print-friendly styles - Header menu reveal-on-hover - Filter popup dark mode styling NEW STORIES (AGGrid.stories.tsx): - CellRenderersShowcase - CompanyAndLinksRenderers - DateFormatsShowcase - ProgressAndBooleansShowcase - StatusColorsVariations - WithFloatingFilters EXPORTS (index.ts): - All renderers (individual and memoized) - Type exports (StatusConfig, DateRendererProps, ProgressRendererProps) - Utility functions (formatPhoneDisplay, statusColors) Ported from Waggleline production AG Grid implementation.
Deploying ui with
|
| Latest commit: |
814f48f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e630dd2e.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-ag-grid.ui-6d0.pages.dev |
… use lucide-react AG Grid Header/Menu Icons: - Add agGridQuartzFont.css import to AGGrid.stories.tsx for icon font support - Add --ag-icon-font-family CSS variable set to 'agGridQuartz' in theme - Add explicit .ag-icon font-family rule to ensure icons render correctly - The --ag-font-family: inherit was overriding AG Grid's icon webfont Cell Renderer Icons: - Replace inline SVG icons with lucide-react icon components - EmailRenderer now uses MailIcon from Icons component - PhoneRenderer now uses PhoneIcon from Icons component - DomainRenderer now uses GlobeIcon from Icons component - LinkedInRenderer now uses Linkedin from lucide-react - BooleanRenderer now uses CheckCircleIcon and ClockIcon from Icons component - Ensures consistency with the new icon library added in PR #1 Misc: - Fix ESLint error in Icons.stories.tsx (escape quotes in JSX)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.