Table AG Grid

The Table AG Grid component provides powerful data grid functionality using AG Grid React. It offers advanced features like sorting, filtering, pagination, row selection, and custom cell renderers for complex data visualization.

Overview

The Table AG Grid component is designed to provide enterprise-grade data grid functionality with:

Advanced sorting and filtering capabilities
Built-in pagination with customizable page sizes
Row selection (single or multiple)
Custom cell renderers for enhanced data presentation
Quick filter search functionality
Responsive design with dark mode support
Professional styling with AG Grid Alpine theme

Components

AgGridTable (Basic)

The basic AG Grid table component with essential features.

import { AgGridTable } from '@/components/atoms'

function MyComponent() {
  const columnDefs = [
    { field: 'name', headerName: 'Name', sortable: true, filter: true },
    { field: 'age', headerName: 'Age', sortable: true, filter: true },
    { field: 'email', headerName: 'Email', sortable: true, filter: true }
  ]

  const rowData = [
    { name: 'John Doe', age: 30, email: 'john@example.com' },
    { name: 'Jane Smith', age: 25, email: 'jane@example.com' }
  ]

  return (
    <AgGridTable 
      columnDefs={columnDefs} 
      rowData={rowData} 
      height="400px" 
    />
  )
}

AgGridAdvancedTable

The advanced AG Grid table component with additional features like row selection and quick filter.

import { AgGridAdvancedTable } from '@/components/atoms'

function MyComponent() {
  const columnDefs = [
    { field: 'name', headerName: 'Name', sortable: true, filter: true },
    { field: 'status', headerName: 'Status', cellRenderer: StatusRenderer }
  ]

  const rowData = [
    { name: 'John Doe', status: 'Active' },
    { name: 'Jane Smith', status: 'Inactive' }
  ]

  return (
    <AgGridAdvancedTable 
      columnDefs={columnDefs} 
      rowData={rowData} 
      height="500px"
      enableRowSelection={true}
      showQuickFilter={true}
    />
  )
}

Props

AgGridTable Props

Prop	Type	Default	Description
`columnDefs`	`Array`	`[]`	Column definitions for the grid
`rowData`	`Array`	`[]`	Data rows to display
`gridOptions`	`Object`	`{}`	Additional AG Grid options
`className`	`string`	`''`	Additional CSS classes
`height`	`string`	`'400px'`	Height of the grid container

AgGridAdvancedTable Props

Prop	Type	Default	Description
`columnDefs`	`Array`	`[]`	Column definitions for the grid
`rowData`	`Array`	`[]`	Data rows to display
`gridOptions`	`Object`	`{}`	Additional AG Grid options
`className`	`string`	`''`	Additional CSS classes
`height`	`string`	`'400px'`	Height of the grid container
`enableRowSelection`	`boolean`	`false`	Enable row selection functionality
`showQuickFilter`	`boolean`	`false`	Show quick filter search input

Column Definition

Column definitions control how data is displayed and interacted with:

const columnDefs = [
  {
    field: 'name',
    headerName: 'Patient Name',
    sortable: true,
    filter: true,
    width: 200,
    cellStyle: { fontWeight: '500' }
  },
  {
    field: 'status',
    headerName: 'Status',
    sortable: true,
    filter: true,
    cellRenderer: (params) => (
      <span className={`badge ${getStatusClass(params.value)}`}>
        {params.value}
      </span>
    )
  }
]

Column Definition Properties

Property	Type	Description
`field`	`string`	Data field name
`headerName`	`string`	Column header display name
`sortable`	`boolean`	Enable sorting for this column
`filter`	`boolean`	Enable filtering for this column
`width`	`number`	Fixed column width
`cellRenderer`	`function`	Custom cell renderer function
`cellStyle`	`object`	CSS styles for cells

Custom Cell Renderers

Create custom cell renderers for enhanced data presentation:

Status Badge Renderer

const StatusCellRenderer = (props) => {
  const status = props.value
  const getStatusColor = (status) => {
    switch (status) {
      case 'Active':
        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
      case 'Inactive':
        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
    }
  }
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(status)}`}>
      {status}
    </span>
  )
}

Icon with Text Renderer

const IconTextRenderer = (props) => {
  return (
    <div className="flex items-center space-x-2">
      <svg className="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
        <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
      </svg>
      <span className="font-mono text-sm">{props.value}</span>
    </div>
  )
}

Features

Pagination

Built-in pagination with customizable page sizes:

Default page size: 10 rows
Page size options: 10, 25, 50, 100
Navigation controls for page jumping

Sorting

Multi-column sorting capabilities:

Click column headers to sort
Hold Shift + click for multi-column sorting
Visual indicators for sort direction

Filtering

Advanced filtering options:

Text filters for string columns
Number filters for numeric columns
Date filters for date columns
Custom filter components

Row Selection

Row selection functionality (Advanced table only):

Single row selection
Multiple row selection
Programmatic selection control

Quick Filter

Global search functionality (Advanced table only):

Search across all visible columns
Real-time filtering as you type
Case-insensitive search

Grid Options

Customize grid behavior with additional options:

const gridOptions = {
  defaultColDef: {
    flex: 1,
    minWidth: 100,
    resizable: true,
    sortable: true,
    filter: true
  },
  pagination: true,
  paginationPageSize: 20,
  domLayout: 'autoHeight',
  suppressRowClickSelection: true,
  rowMultiSelectWithClick: true
}

<AgGridTable 
  columnDefs={columnDefs} 
  rowData={rowData} 
  gridOptions={gridOptions}
/>

Examples

Patient Management Table

import React from 'react'
import { AgGridAdvancedTable, Badges } from '@/components/atoms'
import { Card } from '@/components/molecules'

const PatientTable = () => {
  const columnDefs = [
    { 
      field: 'patientId', 
      headerName: 'Patient ID', 
      width: 120,
      cellRenderer: (props) => (
        <span className="font-mono text-sm">{props.value}</span>
      )
    },
    { field: 'name', headerName: 'Name', cellStyle: { fontWeight: '500' } },
    { 
      field: 'age', 
      headerName: 'Age', 
      width: 100,
      cellRenderer: (props) => `${props.value} years`
    },
    { 
      field: 'status', 
      headerName: 'Status', 
      width: 120,
      cellRenderer: (props) => (
        <Badges className={getStatusClass(props.value)}>
          {props.value}
        </Badges>
      )
    }
  ]

  const rowData = [
    { patientId: 'P001', name: 'John Doe', age: 35, status: 'Inpatient' },
    { patientId: 'P002', name: 'Jane Smith', age: 28, status: 'Outpatient' }
  ]

  return (
    <Card>
      <div className="p-4">
        <h3 className="font-bold text-lg mb-4">Patient Management</h3>
        <AgGridAdvancedTable 
          columnDefs={columnDefs} 
          rowData={rowData} 
          height="500px"
          enableRowSelection={true}
          showQuickFilter={true}
        />
      </div>
    </Card>
  )
}

Styling

The component uses AG Grid's Alpine theme with automatic dark mode support:

Light mode: ag-theme-alpine
Dark mode: ag-theme-alpine-dark
Responsive design with proper mobile handling
Consistent with application theme colors

Best Practices

Column Definitions: Always provide meaningful headerName values
Performance: Use useMemo for large datasets to prevent unnecessary re-renders
Cell Renderers: Keep custom renderers simple and performant
Accessibility: Ensure custom renderers maintain keyboard navigation
Responsive: Test table behavior on different screen sizes
Data Types: Use appropriate column types for better filtering and sorting

Troubleshooting

Common Issues

Grid not displaying data

Verify columnDefs field names match data object keys
Check that rowData is a valid array

Styling issues

Ensure AG Grid CSS files are properly imported
Check for conflicting CSS classes

Performance issues

Use useMemo for column definitions and row data
Consider virtual scrolling for large datasets
Implement server-side pagination for very large datasets

Overview​

Components​

AgGridTable (Basic)​

AgGridAdvancedTable​

Props​

AgGridTable Props​

AgGridAdvancedTable Props​

Column Definition​

Column Definition Properties​

Custom Cell Renderers​

Status Badge Renderer​

Icon with Text Renderer​

Features​

Pagination​

Sorting​

Filtering​

Row Selection​

Quick Filter​

Grid Options​

Examples​

Patient Management Table​

Styling​

Best Practices​

Troubleshooting​

Common Issues​