Creating a Reusable Table System with AG Grid: Patterns for Enterprise Applications

Tables are a fundamental component in any admin interface. They need to display data efficiently, handle sorting and filtering, and provide a consistent user experience. In this article, I’ll share patterns I’ve developed for building a reusable table system using AG Grid that standardizes tables across an enterprise application while remaining flexible for different use cases.

The Table Challenge

When I started working on a large-scale admin dashboard, I found myself creating many similar table implementations across different features. This led to several issues:

1. Inconsistent styling and behavior between tables
2. Duplicate code for common functionality
3. No standardized approach to empty states
4. Different patterns for handling row clicks
5. Repetitive filtering implementation

To solve these problems, I created a reusable table system based on AG Grid.

The EntityTablePage Component

The heart of the system is an EntityTablePage component that accepts generic typed data:

This component takes a variety of props to customize the table while maintaining consistent patterns.

Key Features of the Reusable Table System

1. Consistent Header with Search

Each table includes a standardized header with search functionality:

2. Flexible Empty States

The component handles empty states with a consistent pattern:

This allows for:

• The default empty state with “Add New” action
• Custom empty state component
• Configurable action behaviour

4. Row Navigation

The component implements a standardized pattern for row navigation:

This allows for:

• Default behavior of navigating to entity detail page
• Custom click handlers
• Special handling for action columns

5. Dynamic Filtering

The component implements dynamic filtering:

This pattern:

• Memoizes filter results to improve performance
• Supports custom filter functions
• Handles text-based filtering

Column Factory Pattern

One of the most powerful patterns I discovered was a column factory system that creates standardised column definitions:

These factory functions return standardized column configurations:

This pattern:

• Creates reusable column definitions with consistent styling
• Provides type safety through generics
• Supports customization through options
• Handles complex rendering scenarios like icons and dates
• Normalizes common patterns across different entity tables

Action Column Pattern

For actions, I implemented a dedicated pattern that ensures consistent user interactions:

This approach:

• Pins action menus to the right for consistency
• Uses a standardized constant for the column ID
• Provides a consistent visual treatment
• Allows for dynamic menu items based on the row data
• Handles click events consistently across tables

Type-Safe Column Definitions

The column definitions are fully type-safe:

This pattern:

• Ensures column definitions match the data type
• Allows for extending types with UI-specific fields (e.g., referenceCount)
• Provides IDE autocomplete for field names
• Catches type errors at compile time

Usage Example

A typical implementation of the table looks like:

Why This Pattern Works

This table system offers several advantages:

1. Consistency: All tables follow the same patterns and styling
2. DRY Code: Common functionality is abstracted away
3. Type Safety: Generic typing ensures type safety across the table
4. Developer Experience: Implementing new tables is simple and fast
5. User Experience: Users get consistent behavior across the application
6. Maintainability: Column definitions are separated from rendering logic
7. Reusability: Factory functions create consistent columns across tables
8. Extensibility: The pattern supports special cases while maintaining standards

Conclusion

To implement a similar pattern in your own projects:

1. Create a base table component with generic typing
2. Standardize headers, empty states, and row interactions
3. Implement consistent filtering mechanisms
4. Create a column definition factory pattern
5. Use custom cell renderers for specific presentation needs
6. Ensure type safety with generic column definitions
7. Standardize action columns and their behavior

This approach creates a more maintainable and consistent table system that improves both developer experience and end-user experience. By centralizing common patterns, you can focus on the unique aspects of each table rather than reimplementing the same functionality.

What table patterns have you found effective in your React applications? I’d love to hear about your experiences in the comments.

Connect and Grow Together

Want to dive deeper into software engineering and bulletproof pattern-based approaches? Let’s connect:

Professional Networking

— LinkedIn: For in-depth tech discussions and professional insights.
— Twitter/X: Quick tips, tech trends, and software engineering snippets.

Work With Me

Hire me as a full-stack engineer for any software engineering projects (ranging from Frontend, Backend, Mobile, Cloud and anything else in between).
— My Portfolio

Stay Updated

Follow along for more technical deep dives, coding tutorials, and software engineering strategies. Let’s keep learning and growing together!