@jmruthers/pace-core 0.5.134 → 0.5.136

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -22,11 +22,12 @@ import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../../Select/Select';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import type {
   AggregateConfig,
   DataRecord,
   DataTableAction,
+  DataTableColumn,
   EditableColumnDef,
   EmptyStateConfig,
   HierarchicalConfig,
@@ -215,20 +216,6 @@ function SelectEditField<TData extends DataRecord>({
           // Always show create option when there's a search term (user might want to create even if matches exist)
           const shouldShow = isCreatable && !!columnDef.onCreateNew;
           
-          // Debug logging for creatable select
-          if (import.meta.env.MODE === 'development' && isCreatable) {
-            logger.debug('[SelectEditField] Creatable select check:', {
-              searchTerm: currentSearch,
-              searchLower,
-              hasMatch,
-              isCreatable,
-              hasOnCreateNew: !!columnDef.onCreateNew,
-              shouldShow,
-              fieldOptionsCount: columnDef.fieldOptions?.length || 0,
-              note: 'Create option shows when search term exists, regardless of matches'
-            });
-          }
-          
           setShowCreateOption(shouldShow);
         } else {
           setShowCreateOption(false);
@@ -529,6 +516,7 @@ const RowComponent = React.memo(({
 }: RowProps) => {
   const rowRef = useRef<HTMLTableRowElement>(null);
   const firstInputRef = useRef<HTMLInputElement>(null);
+  const logger = React.useMemo(() => createLogger('RowComponent'), []);
   
   const rowId = getRowIdSafe(row.original, row.index, getRowId);
   
@@ -577,33 +565,115 @@ const RowComponent = React.memo(({
     const groupValue = row.getValue(grouping[0]);
     const subRowsCount = row.subRows?.length || 0;
     const isExpanded = row.getIsExpanded();
+    const visibleCells = row.getVisibleCells();
+    
+    // Get child rows for aggregation (convert TanStack Row to original data)
+    const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
     
-    // Only render the group header row - sub-rows will be rendered by the standard rendering loop
+    // Render individual cells for each column with aggregation support
     return (
       <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-        <td 
-          className={getTableCellClasses({
-            isCompact: true,
-            className: "px-3 py-2 flex items-center font-medium"
-          })} 
-          colSpan={row.getAllCells().length}
-        >
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => row.toggleExpanded()}
-            className="p-0 h-auto mr-2"
-          >
-            {isExpanded ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-          </Button>
-          <span className="text-sm">
-            {String(groupValue)} ({subRowsCount} items)
-          </span>
-        </td>
+        {visibleCells.map((cell: any, cellIndex: number) => {
+          const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
+          const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
+          
+          // For the grouping column, show the group header with expand/collapse
+          if (isGroupingColumn && cellIndex === 0) {
+            return (
+              <td
+                key={cell.id}
+                className={getTableCellClasses({
+                  isCompact: true,
+                  className: "px-3 py-2 flex items-center font-medium"
+                })}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => row.toggleExpanded()}
+                  className="p-0 h-auto mr-2"
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </Button>
+                <span className="text-sm">
+                  {String(groupValue)} ({subRowsCount} items)
+                </span>
+              </td>
+            );
+          }
+          
+          // For other columns, check if they have aggregation functions
+          if (columnDef.aggregateFn && childRows.length > 0) {
+            try {
+              // Call the aggregation function with child rows
+              const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
+              
+              // Use aggregateCell renderer if provided, otherwise use regular cell renderer
+              let cellContent: React.ReactNode;
+              if (columnDef.aggregateCell) {
+                cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
+              } else if (columnDef.cell) {
+                // Use regular cell renderer with a mock cell context
+                // Create a mock cell object for the aggregated value
+                const mockCell = {
+                  ...cell,
+                  getValue: () => aggregatedValue,
+                  renderValue: () => aggregatedValue,
+                };
+                cellContent = flexRender(columnDef.cell, {
+                  ...mockCell,
+                  row: row,
+                  column: cell.column,
+                  cell: mockCell,
+                  getValue: () => aggregatedValue,
+                  renderValue: () => aggregatedValue,
+                });
+              } else {
+                // Fallback to displaying the raw value
+                cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
+              }
+              
+              return (
+                <td
+                  key={cell.id}
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
+                  })}
+                >
+                  {cellContent}
+                </td>
+              );
+            } catch (error) {
+              // If aggregation fails, show empty cell
+              logger.warn('Error in aggregation function:', error);
+              return (
+                <td
+                  key={cell.id}
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: "px-3 py-2"
+                  })}
+                />
+              );
+            }
+          }
+          
+          // For columns without aggregation, show empty cell
+          return (
+            <td
+              key={cell.id}
+              className={getTableCellClasses({
+                isCompact: true,
+                className: "px-3 py-2"
+              })}
+            />
+          );
+        })}
       </tr>
     );
   }
@@ -774,49 +844,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
 
-  // Diagnostic logging when rows are empty but data exists
-  useEffect(() => {
-    if (rows.length === 0 && dataLength > 0) {
-      const tableState = table.getState();
-      const pagination = tableState.pagination;
-      const columnFilters = tableState.columnFilters;
-      const globalFilter = tableState.globalFilter;
-      const coreRows = table.getCoreRowModel().rows;
-      const prePaginationRows = table.getPrePaginationRowModel?.()?.rows || [];
-      const filteredRows = table.getFilteredRowModel?.()?.rows || [];
-      const sortedRows = table.getSortedRowModel?.()?.rows || [];
-      const rowCount = table.getRowCount();
-      const pageCount = table.getPageCount();
-      
-      logger.warn('Rows empty but data exists!', {
-        dataLength,
-        rowsLength: rows.length,
-        coreRowsLength: coreRows.length,
-        prePaginationRowsLength: prePaginationRows.length,
-        filteredRowsLength: filteredRows.length,
-        sortedRowsLength: sortedRows.length,
-        rowCount,
-        pageCount,
-        pagination: {
-          pageIndex: pagination.pageIndex,
-          pageSize: pagination.pageSize,
-        },
-        columnFilters,
-        globalFilter,
-        tableOptions: {
-          getCoreRowModel: !!table.options.getCoreRowModel,
-          getFilteredRowModel: !!table.options.getFilteredRowModel,
-          getSortedRowModel: !!table.options.getSortedRowModel,
-          getPaginationRowModel: !!table.options.getPaginationRowModel,
-          manualPagination: table.options.manualPagination,
-          manualFiltering: table.options.manualFiltering,
-          manualSorting: table.options.manualSorting,
-        },
-        tableDataLength: table.options.data?.length || 0,
-      });
-    }
-  }, [rows.length, dataLength, table, logger]);
-
   // CRITICAL FIX: Virtual scrolling requires a scroll container (parentRef).
   // If virtualization is enabled but no scroll container exists, fall back to standard rendering.
   // This fixes the bug where rows exist but nothing renders when virtualization is enabled.

package/src/components/DataTable/components/__tests__/ActionButtons.test.tsx

@@ -28,7 +28,7 @@ vi.mock('lucide-react', async () => {
 });
 
 // Mock logger
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => ({
     debug: vi.fn(),
     info: vi.fn(),

package/src/components/DataTable/components/__tests__/DataTableErrorBoundary.test.tsx

@@ -16,7 +16,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { DataTableErrorBoundary, useDataTableErrorBoundary } from '../DataTableErrorBoundary';
 
 // Mock logger
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => ({
     debug: vi.fn(),
     info: vi.fn(),

package/src/components/DataTable/components/__tests__/DataTableModals.test.tsx

@@ -22,7 +22,7 @@ const mockLogger = {
   info: vi.fn(),
 };
 
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => mockLogger,
 }));
 

package/src/components/DataTable/components/__tests__/ImportModal.test.tsx

@@ -79,7 +79,7 @@ vi.mock('lucide-react', () => ({
 }));
 
 // Mock logger
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => ({
     debug: vi.fn(),
     info: vi.fn(),

package/src/components/DataTable/examples/GroupingAggregationExample.tsx

@@ -0,0 +1,273 @@
+/**
+ * @file Grouping Aggregation Example
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Examples
+ * @since 0.6.0
+ * 
+ * Complete example demonstrating grouped row aggregation in DataTable.
+ * This example shows how to use aggregation functions to display
+ * totals and averages in grouped rows, similar to the pace-cake diners table use case.
+ */
+
+import React from 'react';
+import { DataTable, sum, average, count, type DataTableColumn, type DataRecord } from '../index';
+
+// ============================================================================
+// DATA INTERFACE
+// ============================================================================
+
+interface DinerData extends DataRecord {
+  id: string;
+  unit_number: string;
+  unit_name: string;
+  diet: string;
+  youth: number;
+  adults: number;
+  cost: number;
+  [key: string]: unknown; // Index signature to satisfy DataRecord constraint
+}
+
+// ============================================================================
+// SAMPLE DATA
+// ============================================================================
+
+const dinerData: DinerData[] = [
+  { id: '1', unit_number: '101', unit_name: 'Alpha Unit', diet: 'Standard', youth: 10, adults: 5, cost: 100.50 },
+  { id: '2', unit_number: '101', unit_name: 'Alpha Unit', diet: 'Standard', youth: 15, adults: 8, cost: 150.75 },
+  { id: '3', unit_number: '101', unit_name: 'Alpha Unit', diet: 'Gluten Free', youth: 5, adults: 3, cost: 75.25 },
+  { id: '4', unit_number: '102', unit_name: 'Beta Unit', diet: 'Standard', youth: 20, adults: 10, cost: 200.00 },
+  { id: '5', unit_number: '102', unit_name: 'Beta Unit', diet: 'Standard', youth: 12, adults: 6, cost: 120.50 },
+  { id: '6', unit_number: '102', unit_name: 'Beta Unit', diet: 'Vegetarian', youth: 8, adults: 4, cost: 90.00 },
+  { id: '7', unit_number: '103', unit_name: 'Gamma Unit', diet: 'Standard', youth: 18, adults: 9, cost: 180.25 },
+  { id: '8', unit_number: '103', unit_name: 'Gamma Unit', diet: 'Gluten Free', youth: 6, adults: 3, cost: 80.50 },
+];
+
+// ============================================================================
+// COLUMN DEFINITIONS
+// ============================================================================
+
+const columns: DataTableColumn<DinerData>[] = [
+  {
+    accessorKey: 'unit_number',
+    header: 'Unit #',
+    sortable: true,
+    enableGrouping: true,
+    size: 100,
+  },
+  {
+    accessorKey: 'unit_name',
+    header: 'Unit Name',
+    sortable: true,
+    enableGrouping: true,
+    size: 150,
+  },
+  {
+    accessorKey: 'diet',
+    header: 'Diet',
+    sortable: true,
+    enableGrouping: true,
+    size: 120,
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <span className="px-2 py-1 rounded text-xs font-medium bg-main-100 text-main-800 border border-main-300">
+        {row.original.diet}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'youth',
+    header: 'Youth',
+    sortable: true,
+    fieldType: 'number',
+    size: 100,
+    aggregateFn: sum('youth'),
+    aggregateCell: (value: any) => (
+      <div className="text-right font-semibold">
+        {typeof value === 'number' ? value.toLocaleString() : '0'}
+      </div>
+    ),
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <div className="text-right">
+        {row.original.youth.toLocaleString()}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'adults',
+    header: 'Adults',
+    sortable: true,
+    fieldType: 'number',
+    size: 100,
+    aggregateFn: sum('adults'),
+    aggregateCell: (value: any) => (
+      <div className="text-right font-semibold">
+        {typeof value === 'number' ? value.toLocaleString() : '0'}
+      </div>
+    ),
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <div className="text-right">
+        {row.original.adults.toLocaleString()}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'cost',
+    header: 'Total Cost',
+    sortable: true,
+    fieldType: 'number',
+    size: 120,
+    aggregateFn: sum('cost'),
+    aggregateCell: (value: any) => (
+      <div className="text-right font-semibold font-mono">
+        ${typeof value === 'number' ? value.toFixed(2) : '0.00'}
+      </div>
+    ),
+    cell: ({ row }: { row: { original: DinerData } }) => (
+      <div className="text-right font-mono">
+        ${row.original.cost.toFixed(2)}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'id',
+    header: 'Count',
+    sortable: false,
+    size: 80,
+    aggregateFn: count(),
+    aggregateCell: (value: any) => (
+      <div className="text-center font-semibold">
+        {typeof value === 'number' ? value : '0'}
+      </div>
+    ),
+    cell: () => null as React.ReactNode, // Hide count for individual rows
+  },
+];
+
+// ============================================================================
+// EXAMPLE COMPONENT
+// ============================================================================
+
+export function GroupingAggregationExample() {
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-main-900 mb-2">
+          Grouped Row Aggregation Example
+        </h1>
+        <p className="text-sec-600">
+          This example demonstrates how to use aggregation functions in grouped DataTable rows.
+          When rows are grouped by Unit or Diet, the Youth, Adults, and Cost columns show
+          aggregated totals, and the Count column shows the number of records in each group.
+        </p>
+      </div>
+
+      <div className="bg-main-50 border border-main-200 rounded-md p-4 space-y-2">
+        <p className="font-medium text-sm">How to use:</p>
+        <ol className="list-decimal list-inside text-sm space-y-1 text-sec-700">
+          <li>Use the grouping dropdown to group by Unit #, Unit Name, or Diet</li>
+          <li>Notice how the Youth, Adults, and Cost columns show aggregated totals in grouped rows</li>
+          <li>The Count column shows the number of records in each group</li>
+          <li>Click the expand/collapse arrows to see individual rows within each group</li>
+        </ol>
+      </div>
+
+      <DataTable<DinerData>
+        data={dinerData}
+        columns={columns}
+        title="Diners by Unit and Diet"
+        description="Example showing aggregated values in grouped rows"
+        rbac={{ pageName: 'diners-example' }}
+        features={{
+          search: true,
+          pagination: true,
+          sorting: true,
+          filtering: true,
+          grouping: true,
+          columnVisibility: true,
+          columnReordering: false,
+          selection: false,
+          creation: false,
+          editing: false,
+          deletion: false,
+          deleteSelected: false,
+          import: false,
+          export: true,
+        }}
+        getRowId={(row: DinerData) => row.id}
+        variant="default"
+        className="border border-sec-200 rounded-lg"
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// ALTERNATIVE EXAMPLES
+// ============================================================================
+
+/**
+ * Example with custom aggregation function
+ */
+export function CustomAggregationExample() {
+  const customColumns: DataTableColumn<DinerData>[] = [
+    {
+      accessorKey: 'diet',
+      header: 'Diet',
+      enableGrouping: true,
+    },
+    {
+      accessorKey: 'youth',
+      header: 'Total Diners',
+      aggregateFn: (rows: DinerData[]) => {
+        // Custom: sum of youth + adults
+        return rows.reduce((total: number, row: DinerData) => total + (row.youth || 0) + (row.adults || 0), 0);
+      },
+      aggregateCell: (value: any) => (
+        <div className="text-right font-semibold">
+          {typeof value === 'number' ? value.toLocaleString() : '0'} total diners
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'cost',
+      header: 'Avg Cost per Diner',
+      aggregateFn: (rows: DinerData[]) => {
+        const totalCost = rows.reduce((sum: number, row: DinerData) => sum + (row.cost || 0), 0);
+        const totalDiners = rows.reduce((sum: number, row: DinerData) => sum + (row.youth || 0) + (row.adults || 0), 0);
+        return totalDiners > 0 ? totalCost / totalDiners : 0;
+      },
+      aggregateCell: (value: any) => (
+        <div className="text-right font-semibold font-mono">
+          ${typeof value === 'number' ? value.toFixed(2) : '0.00'} per diner
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h2 className="text-xl font-bold text-main-900 mb-2">
+          Custom Aggregation Example
+        </h2>
+        <p className="text-sec-600">
+          This example shows custom aggregation functions that calculate
+          total diners and average cost per diner.
+        </p>
+      </div>
+
+      <DataTable<DinerData>
+        data={dinerData}
+        columns={customColumns}
+        rbac={{ pageName: 'diners-custom' }}
+        features={{
+          grouping: true,
+          sorting: true,
+          pagination: true,
+        }}
+        defaultGrouping={['diet']}
+        getRowId={(row: DinerData) => row.id}
+      />
+    </div>
+  );
+}
+

package/src/components/DataTable/examples/HierarchicalActionsExample.tsx

@@ -12,7 +12,7 @@ import React from 'react';
 import { DataTable } from '../DataTable';
 import type { DataTableColumn, DataTableAction } from '../types';
 import { Button } from '../../Button';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import { 
   PlusIcon, 
   PencilIcon, 

package/src/components/DataTable/examples/__tests__/HierarchicalActionsExample.test.tsx

@@ -93,7 +93,7 @@ vi.mock('../../../../rbac/hooks', () => ({
 }));
 
 // Mock logger
-vi.mock('../../../utils/logger', () => ({
+vi.mock('../../../utils/core/logger', () => ({
   createLogger: () => ({
     debug: vi.fn(),
     info: vi.fn(),

package/src/components/DataTable/hooks/useColumnOrderPersistence.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 interface UseColumnOrderPersistenceProps {
   tableId?: string;

package/src/components/DataTable/hooks/useColumnVisibilityPersistence.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 interface UseColumnVisibilityPersistenceProps {
   tableId?: string;

package/src/components/DataTable/hooks/useDataTablePermissions.ts

@@ -12,7 +12,7 @@ import { useMemo, useRef } from 'react';
 import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 import { useCan, useResolvedScope } from '../../../rbac/hooks';
 import { useToast } from '../../../hooks/useToast';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import {
   normalizeDataTableFeatures,
   type DataTableFeatureConfig,
@@ -69,16 +69,7 @@ export function useDataTablePermissions<TData extends Record<string, any>>(
    */
 
   // Use shared scope resolution hook for consistent RBAC scoping
-  const { selectedOrganisation, selectedEvent, supabase, organisations } = useUnifiedAuth();
-  
-  // Debug logging to understand organisation context
-  logger.debug('Organisation context:', {
-    hasSelectedOrg: !!selectedOrganisation,
-    selectedOrgId: selectedOrganisation?.id,
-    hasOrganisations: organisations?.length > 0,
-    organisationCount: organisations?.length,
-    selectedEvent: selectedEvent?.event_id
-  });
+  const { selectedOrganisation, selectedEvent, supabase } = useUnifiedAuth();
   
   const { resolvedScope: rawResolvedScope, isLoading: scopeLoading } = useResolvedScope({
     supabase,
@@ -155,18 +146,6 @@ export function useDataTablePermissions<TData extends Record<string, any>>(
     canExport: useCan(userId, consistentScope, readPermission, effectivePageId, true), // Use read permission for export
     canImport: useCan(userId, consistentScope, createPermission, effectivePageId, true), // Use create permission for import
   };
-  
-  // Debug logging for permissions
-  logger.debug('Permission check results:', {
-    canRead: permissions.canRead.can,
-    canReadLoading: permissions.canRead.isLoading,
-    canReadError: permissions.canRead.error?.message,
-    canCreate: permissions.canCreate.can,
-    pageName: effectivePageId,
-    scope: consistentScope,
-    hasValidScope: !!effectiveScope,
-    scopeLoading: scopeLoading
-  });
 
   // MANDATORY: Features are automatically filtered by permissions
   const normalizedFeatures = useMemo(

package/src/components/DataTable/index.ts

@@ -29,6 +29,7 @@ export type { UseDataTablePerformanceOptions, UseDataTablePerformanceReturn } fr
 
 // Type definitions
 export type {
+  DataRecord,
   DataTableColumn,
   DataTableAction,
   DataTableToolbarButton,
@@ -66,6 +67,9 @@ export * from './components';
 // Utility functions
 export * from './utils';
 
+// Aggregation utilities (explicitly exported for convenience)
+export { sum, average, count, min, max } from './utils/aggregationUtils';
+
 // Accessibility utilities
 export { announce } from './utils/a11yUtils';
 

package/src/components/DataTable/styles.ts

@@ -8,7 +8,7 @@
  * This ensures consistent styling across regular and virtualized tables.
  */
 
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 
 // ============================================================================
 // TABLE BASE STYLES

package/src/components/DataTable/types.ts

@@ -328,6 +328,19 @@ export interface DataTableColumn<TData extends DataRecord = DataRecord> extends
   hideForParent?: boolean;
   /** Hide this column for child rows */
   hideForChild?: boolean;
+  
+  // Grouped row aggregation
+  /**
+   * Aggregation function for grouped rows.
+   * Receives all rows in the group and returns the aggregated value.
+   * If not provided, grouped rows will show empty/undefined for this column.
+   */
+  aggregateFn?: (rows: TData[], column: DataTableColumn<TData>) => any;
+  /**
+   * Optional: Custom cell renderer for aggregated values in grouped rows.
+   * If not provided, uses the column's regular cell renderer.
+   */
+  aggregateCell?: (value: any, rows: TData[], column: DataTableColumn<TData>) => React.ReactNode;
 }
 
 /**