Responsive Design with AG-Grid and React

In today's multi-device world, ensuring your applications provide an optimal user experience across desktops, tablets, and mobile phones is paramount. For data-rich applications, this often means making tables and grids responsive. AG-Grid, a powerful JavaScript data grid, combined with React, offers robust capabilities to tackle the challenges of responsive design head-on.

This installment in our AG-Grid-React series (#49) will dive deep into strategies and techniques for implementing responsive design with AG-Grid, ensuring your data is always presented clearly and effectively, regardless of screen size.

Why Responsive Design for Data Grids?

Large datasets displayed in a grid format can quickly become unwieldy on smaller screens. Without a responsive strategy, users might encounter:

• Excessive horizontal scrolling, making navigation frustrating.
• Truncated or overlapping column headers and cell content.
• Poor readability due to tiny text or squashed elements.
• Difficulty interacting with the grid (e.g., filtering, sorting).

A well-implemented responsive design addresses these issues, enhancing usability and accessibility across all devices.

AG-Grid's Built-in Responsiveness & Key Concepts

AG-Grid provides several features that inherently support responsive layouts or can be leveraged for dynamic adjustments:

• Horizontal Scrolling: By default, if the combined width of columns exceeds the grid's container width, AG-Grid introduces a horizontal scrollbar. While useful, it's often a last resort for truly mobile-friendly experiences.
• Column Sizing:
  • sizeColumnsToFit(width): A grid API method that tells the grid to resize columns to fit the width of the grid. This is great for an initial fit or when the grid container changes size.
  • autoSizeColumns(colKeys): Auto-sizes all (or specific) columns to fit their content. This is generally used once on load or when data changes significantly, not necessarily for responsive breakpoints.
• Dynamic Column Definitions: The most powerful approach for responsiveness involves changing the columnDefs property based on screen size. You can add, remove, or modify columns dynamically.
• Custom Cell and Header Renderers: For more granular control, you can use custom renderers to display different content or styles within cells/headers based on the available space.

Implementing Responsive Design in React with AG-Grid

The core strategy for responsiveness in a React application with AG-Grid often involves detecting screen width changes and then updating the grid's properties accordingly, primarily its columnDefs.

1. Detecting Screen Size in React

We'll use React Hooks (useState and useEffect) to track the current window width.

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MOBILE_BREAKPOINT = 768; // Example breakpoint for mobile devices

const AgGridResponsiveComponent = () => {
    const gridRef = useRef();
    const [rowData] = useState([
        { make: 'Toyota', model: 'Celica', price: 35000, color: 'Red', mileage: 12000 },
        { make: 'Ford', model: 'Mondeo', price: 32000, color: 'Blue', mileage: 25000 },
        { make: 'Porsche', model: 'Boxster', price: 72000, color: 'Green', mileage: 8000 },
        { make: 'BMW', model: 'M3', price: 60000, color: 'Black', mileage: 15000 },
        { make: 'Audi', model: 'A4', price: 45000, color: 'White', mileage: 20000 },
    ]);

    const [windowWidth, setWindowWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => {
            setWindowWidth(window.innerWidth);
        };

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    // ... (rest of the component)
};
    

2. Dynamic Column Definitions based on Breakpoints

Based on the windowWidth, we can conditionally define our columnDefs. The useCallback hook is useful here to memoize the column definitions and prevent unnecessary re-renders.

    // ... inside AgGridResponsiveComponent ...

    const getColumnDefs = useCallback((isMobile) => {
        if (isMobile) {
            // Mobile-specific column definitions: show only essential columns
            return [
                { field: 'make', headerName: 'Manufacturer', flex: 1 },
                { field: 'model', headerName: 'Model', flex: 1 },
                { field: 'price', headerName: 'Price', valueFormatter: p => '$' + p.value.toLocaleString(), width: 100 },
            ];
        } else {
            // Desktop-specific column definitions: show all columns
            return [
                { field: 'make', headerName: 'Manufacturer', width: 150 },
                { field: 'model', headerName: 'Model', width: 150 },
                { field: 'price', headerName: 'Price', valueFormatter: p => '$' + p.value.toLocaleString(), width: 120 },
                { field: 'color', headerName: 'Color', width: 100 },
                { field: 'mileage', headerName: 'Mileage (miles)', width: 150, valueFormatter: p => p.value.toLocaleString() },
            ];
        }
    }, []); // Empty dependency array means this function is created once

    const columnDefs = getColumnDefs(windowWidth < MOBILE_BREAKPOINT);

    // ... (rest of the component)
    

3. Updating the Grid on Screen Resize

When the screen width changes and crosses our breakpoint, we need to tell AG-Grid to update its column definitions. We use an useEffect hook that triggers when windowWidth changes.

    // ... inside AgGridResponsiveComponent ...

    const onGridReady = useCallback((params) => {
        gridRef.current = params.api;
        // Optional: initially size columns to fit
        // params.api.sizeColumnsToFit();
    }, []);

    useEffect(() => {
        if (gridRef.current) {
            const newColumnDefs = getColumnDefs(windowWidth < MOBILE_BREAKPOINT);
            gridRef.current.setColumnDefs(newColumnDefs);
            // Optionally, re-size columns after changing defs
            gridRef.current.sizeColumnsToFit();
        }
    }, [windowWidth, getColumnDefs]); // Re-run when windowWidth or getColumnDefs changes

    // ... (rest of the component)
    

Putting It All Together (Full Example)

Here's a complete example demonstrating responsive AG-Grid behavior in a React component:

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';

// AG-Grid CSS styles
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MOBILE_BREAKPOINT = 768; // Define your breakpoint

const AgGridResponsiveComponent = () => {
    const gridRef = useRef(); // Reference to the AG-Grid API

    // Sample Row Data
    const [rowData] = useState([
        { make: 'Toyota', model: 'Celica', price: 35000, color: 'Red', mileage: 12000 },
        { make: 'Ford', model: 'Mondeo', price: 32000, color: 'Blue', mileage: 25000 },
        { make: 'Porsche', model: 'Boxster', price: 72000, color: 'Green', mileage: 8000 },
        { make: 'BMW', model: 'M3', price: 60000, color: 'Black', mileage: 15000 },
        { make: 'Audi', model: 'A4', price: 45000, color: 'White', mileage: 20000 },
        { make: 'Mercedes', model: 'C-Class', price: 55000, color: 'Silver', mileage: 18000 },
    ]);

    // State to track window width
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);

    // Effect to listen for window resize events
    useEffect(() => {
        const handleResize = () => {
            setWindowWidth(window.innerWidth);
        };

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize); // Cleanup
    }, []);

    // Function to define column definitions based on screen size
    const getColumnDefs = useCallback((isMobile) => {
        if (isMobile) {
            // Mobile-specific column definitions: show fewer, more important columns
            return [
                { field: 'make', headerName: 'Manufacturer', flex: 1, minWidth: 100 },
                { field: 'model', headerName: 'Model', flex: 1, minWidth: 100 },
                { field: 'price', headerName: 'Price', valueFormatter: p => '$' + p.value.toLocaleString(), width: 120 },
            ];
        } else {
            // Desktop-specific column definitions: show all columns
            return [
                { field: 'make', headerName: 'Manufacturer', width: 150 },
                { field: 'model', headerName: 'Model', width: 150 },
                { field: 'price', headerName: 'Price', valueFormatter: p => '$' + p.value.toLocaleString(), width: 120 },
                { field: 'color', headerName: 'Color', width: 100 },
                { field: 'mileage', headerName: 'Mileage (miles)', width: 150, valueFormatter: p => p.value.toLocaleString() },
            ];
        }
    }, []);

    // Determine current column definitions based on window width
    const currentColumnDefs = getColumnDefs(windowWidth < MOBILE_BREAKPOINT);

    // Callback when the grid is ready, capture API reference
    const onGridReady = useCallback((params) => {
        gridRef.current = params.api;
        // Initial column sizing
        params.api.sizeColumnsToFit();
    }, []);

    // Effect to update column definitions when window width changes
    useEffect(() => {
        if (gridRef.current) {
            gridRef.current.setColumnDefs(currentColumnDefs);
            gridRef.current.sizeColumnsToFit(); // Re-fit columns after updating defs
        }
    }, [windowWidth, currentColumnDefs]); // Dependencies: windowWidth and currentColumnDefs

    return (
        <div style={{ height: 400, width: '100%' }} className="ag-theme-alpine">
            <p>Current Window Width: <strong>{windowWidth}</strong>px <em>({windowWidth < MOBILE_BREAKPOINT ? 'Mobile View' : 'Desktop View'})</em></p>
            <AgGridReact
                ref={gridRef}
                rowData={rowData}
                columnDefs={currentColumnDefs} // Use the dynamically determined columnDefs
                onGridReady={onGridReady}
                // Other grid properties can go here
                domLayout='autoHeight' // Useful for mobile, removes vertical scroll if rows are few
            ></AgGridReact>
        </div>
    );
};

export default AgGridResponsiveComponent;
    

4. Basic CSS for Grid Container

While React handles the dynamic column definitions, ensuring the grid container itself adapts to available space is crucial. A simple CSS rule often suffices:

/* App.css or a dedicated component CSS */
.ag-theme-alpine {
    width: 100%; /* Ensure the grid takes full width of its parent */
    /* You might want a max-width for very large screens */
    /* max-width: 1200px; */
}
    

In our example, we applied inline styles `style={{ height: 400, width: '100%' }}` directly to the wrapper div. For more complex layouts, external CSS with media queries might be preferred for the overall page structure, but the AG-Grid internal responsiveness relies on the component's logic.

Best Practices for Responsive AG-Grid

• Prioritize Columns: On smaller screens, only display the most essential columns. Less critical information can be hidden or presented in a detail view (e.g., via a custom cell renderer or row click event).
• Consider `domLayout='autoHeight'`: For mobile views, if the number of rows isn't excessively high, `domLayout='autoHeight'` can be beneficial. It removes the internal vertical scrollbar of the grid, allowing the entire page to scroll if needed, which is often a more natural mobile experience.
• Test on Real Devices: Browser developer tools are great, but nothing beats testing your responsive design on actual mobile phones and tablets.
• Debounce Resize Events: For performance-critical applications, consider debouncing the `handleResize` function if you notice performance issues on continuous resizing. However, React's state updates are generally batched, making this less critical for simple width checks.
• Accessibility: Ensure that even with fewer columns, users can still access all necessary data. Provide alternative ways to view hidden information if crucial.

Conclusion

Responsive design is not merely an aesthetic choice but a fundamental requirement for modern web applications. By combining React's component-based architecture and state management with AG-Grid's powerful API, you can create data grids that adapt seamlessly to any screen size.

The key takeaway is to leverage dynamic columnDefs coupled with screen width detection to conditionally display or hide columns, providing a tailored and highly usable experience for all your users.