@jmruthers/pace-core 0.2.7 → 0.4.1

package/docs/implementation-guides/hierarchical-datatable.md

@@ -1,850 +0,0 @@
-# Hierarchical DataTable Implementation Guide
-
-This comprehensive guide covers implementing hierarchical parent/child rows in PACE Core's DataTable component.
-
-## Overview
-
-The hierarchical DataTable feature allows you to display parent/child relationships in your data with:
-- **Expand/Collapse All**: Single button to expand/collapse all parent rows
-- **Individual Controls**: Click arrows next to each parent row
-- **Different Action Icons**: Context-aware actions for parent vs child rows
-- **Smart Sorting**: Sorting by child fields sorts children within their parents
-- **Column Rendering**: Different content display for parent vs child rows
-- **Visual Distinction**: Clear visual hierarchy with indentation and styling
-
-## Quick Start
-
-### 1. Enable Hierarchical Features
-
-```tsx
-import { DataTable, type HierarchicalDataRow } from '@jmruthers/pace-core';
-
-<DataTable
-  data={hierarchicalData}
-  columns={columns}
-  features={{
-    hierarchical: true, // Enable hierarchical functionality
-  }}
-  hierarchical={{
-    enabled: true,
-    defaultExpanded: false, // Start with all collapsed
-  }}
-/>
-```
-
-### 2. Structure Your Data
-
-```typescript
-interface Dish extends HierarchicalDataRow {
-  id: string;
-  isParent: boolean;
-  parentId?: string;
-  name: string;
-  type: string;
-  cost: number;
-  // ... other properties
-}
-
-const hierarchicalData: Dish[] = [
-  // Parent rows (dishes)
-  {
-    id: 'dish-1',
-    isParent: true,
-    parentId: null,
-    name: 'Caesar Salad',
-    type: 'Salad',
-    cost: 12.99
-  },
-  {
-    id: 'dish-2',
-    isParent: true,
-    parentId: null,
-    name: 'Beef Stir Fry',
-    type: 'Main Course',
-    cost: 18.99
-  },
-  
-  // Child rows (ingredients) for Caesar Salad
-  {
-    id: 'ingredient-1',
-    isParent: false,
-    parentId: 'dish-1',
-    name: 'Romaine Lettuce',
-    type: 'Vegetable',
-    cost: 2.50
-  },
-  {
-    id: 'ingredient-2',
-    isParent: false,
-    parentId: 'dish-1',
-    name: 'Parmesan Cheese',
-    type: 'Dairy',
-    cost: 4.20
-  },
-  
-  // Child rows (ingredients) for Beef Stir Fry
-  {
-    id: 'ingredient-3',
-    isParent: false,
-    parentId: 'dish-2',
-    name: 'Beef Strips',
-    type: 'Protein',
-    cost: 8.50
-  },
-  {
-    id: 'ingredient-4',
-    isParent: false,
-    parentId: 'dish-2',
-    name: 'Mixed Vegetables',
-    type: 'Vegetable',
-    cost: 3.20
-  }
-];
-```
-
-### 3. Configure Columns for Different Row Types
-
-```tsx
-const columns: DataTableColumn<Dish>[] = [
-  {
-    id: 'name',
-    accessorKey: 'name',
-    header: 'Name',
-    // Different rendering for parent vs child rows
-    renderForParent: (row) => (
-      <div className="flex items-center gap-2">
-        <span className="font-semibold text-main-800">{row.name}</span>
-        <span className="text-xs bg-main-100 text-main-700 px-2 py-1 rounded">
-          {row.type}
-        </span>
-      </div>
-    ),
-    renderForChild: (row) => (
-      <div className="flex items-center gap-2 ml-4">
-        <span className="text-sec-700">{row.name}</span>
-        <span className="text-xs bg-sec-100 text-sec-600 px-2 py-1 rounded">
-          {row.type}
-        </span>
-      </div>
-    ),
-  },
-  {
-    id: 'cost',
-    accessorKey: 'cost',
-    header: 'Cost',
-    renderForParent: (row) => (
-      <div className="text-right font-semibold text-main-800">
-        ${row.cost?.toFixed(2)}
-      </div>
-    ),
-    renderForChild: (row) => (
-      <div className="text-right text-sec-600 ml-4">
-        ${row.cost?.toFixed(2)}
-      </div>
-    ),
-  },
-  {
-    id: 'ingredient-specific',
-    accessorKey: 'quantity',
-    header: 'Quantity',
-    // Only show for child rows
-    renderForParent: () => null,
-    renderForChild: (row) => (
-      <div className="text-sm ml-4">
-        <span className="font-medium">{row.quantity}</span>
-        {row.unit && <span className="text-sec-500 ml-1">{row.unit}</span>}
-      </div>
-    ),
-    hideForParent: true, // Hide this column for parent rows
-  }
-];
-```
-
-## Detailed Configuration
-
-### Data Structure Requirements
-
-Your hierarchical data must implement the `HierarchicalDataRow` interface:
-
-```typescript
-interface HierarchicalDataRow extends DataRecord {
-  /** Whether this row is a parent row */
-  isParent: boolean;
-  /** For child rows, references the parent row ID */
-  parentId?: string;
-  /** Unique identifier for this row */
-  id: string;
-  // ... your actual data properties
-}
-```
-
-**Critical Requirements:**
-- **Parent rows**: Must have `isParent: true` and `parentId: null` or `undefined`
-- **Child rows**: Must have `isParent: false` and `parentId: string` (referencing a parent's `id`)
-- **Unique IDs**: Every row must have a unique `id` value
-- **Valid References**: All `parentId` values must reference an existing parent row's `id`
-
-### Hierarchical Configuration Options
-
-```tsx
-hierarchical={{
-  enabled: true,                    // Enable/disable hierarchical functionality
-  defaultExpanded: false,          // Initial expansion state
-  onExpandedChange: (expandedIds) => {
-    console.log('Expanded rows:', expandedIds);
-  },
-  expandButton: CustomExpandButton, // Optional custom expand button
-  indentSize: 24,                  // Indentation for child rows in pixels
-  parentRowClassName: 'bg-main-50 font-medium', // CSS classes for parent rows
-  childRowClassName: 'bg-sec-25',  // CSS classes for child rows
-}}
-```
-
-**Configuration Details:**
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `enabled` | `boolean` | `false` | Enable/disable hierarchical functionality |
-| `defaultExpanded` | `boolean \| string[]` | `false` | Initial expansion state |
-| `onExpandedChange` | `(expandedIds: string[]) => void` | `undefined` | Callback when expansion changes |
-| `expandButton` | `React.ComponentType` | `ExpandButton` | Custom expand/collapse button |
-| `indentSize` | `number` | `24` | Indentation for child rows in pixels |
-| `parentRowClassName` | `string` | `''` | CSS classes for parent rows |
-| `childRowClassName` | `string` | `''` | CSS classes for child rows |
-
-### Column Configuration for Hierarchical Data
-
-Configure how columns render for different row types using these properties:
-
-```tsx
-const column: DataTableColumn<YourType> = {
-  // ... standard column properties
-  
-  // Hierarchical-specific properties
-  renderForParent?: (row: YourType) => React.ReactNode;  // Custom renderer for parent rows
-  renderForChild?: (row: YourType) => React.ReactNode;   // Custom renderer for child rows
-  hideForParent?: boolean;                               // Hide this column for parent rows
-  hideForChild?: boolean;                                // Hide this column for child rows
-};
-```
-
-**Column Rendering Strategies:**
-
-1. **Different Content**: Use `renderForParent` and `renderForChild` for different content
-2. **Hide Columns**: Use `hideForParent` or `hideForChild` to hide columns for specific row types
-3. **Conditional Rendering**: Use both approaches together for complex layouts
-
-**Example - Mixed Strategy:**
-```tsx
-{
-  id: 'actions',
-  header: 'Actions',
-  renderForParent: (row) => (
-    <div className="flex gap-2">
-      <Button size="sm">Edit Recipe</Button>
-      <Button size="sm" variant="outline">Add Ingredient</Button>
-    </div>
-  ),
-  renderForChild: (row) => (
-    <div className="flex gap-2">
-      <Button size="sm" variant="ghost">Edit</Button>
-      <Button size="sm" variant="destructive">Remove</Button>
-    </div>
-  ),
-}
-```
-
-## Expand/Collapse All Controls
-
-The DataTable automatically adds an expand/collapse all button in the header when hierarchical mode is enabled.
-
-### Features
-
-- **Expand All Button (▶️)**: Expands all parent rows to show their children
-- **Collapse All Button (🔽)**: Collapses all parent rows to hide their children
-- **Smart State Detection**: Button automatically updates based on current expansion state
-- **Accessibility**: Proper ARIA labels and keyboard navigation support
-
-### Button Behavior
-
-- Shows ▶️ when some or all parent rows are collapsed
-- Shows 🔽 when all parent rows are expanded
-- Only appears when there are parent rows with children
-- Positioned in the first column of the table header
-
-### Custom Expand Button
-
-You can provide a custom expand button component:
-
-```tsx
-import { ChevronRight, ChevronDown } from 'lucide-react';
-
-const CustomExpandButton = ({ isExpanded, onClick, ...props }) => (
-  <button
-    onClick={onClick}
-    className="p-1 hover:bg-sec-100 rounded"
-    {...props}
-  >
-    {isExpanded ? (
-      <ChevronDown className="h-4 w-4" />
-    ) : (
-      <ChevronRight className="h-4 w-4" />
-    )}
-  </button>
-);
-
-// Use in DataTable
-<DataTable
-  hierarchical={{
-    enabled: true,
-    expandButton: CustomExpandButton,
-  }}
-/>
-```
-
-## Hierarchical Actions
-
-Configure different actions for parent vs child rows using the `DataTableAction` interface:
-
-```tsx
-const hierarchicalActions: DataTableAction<Dish>[] = [
-  {
-    label: 'View Details',
-    icon: Eye,
-    onClick: (row) => console.log('Viewing:', row.name),
-    variant: 'default',
-  },
-  {
-    label: 'Copy Recipe',
-    parentLabel: 'Copy Recipe',
-    childLabel: 'Copy Ingredient',
-    parentIcon: Copy,
-    childIcon: Copy,
-    onClick: (row) => console.log('Copying:', row.name),
-    variant: 'secondary',
-    showForParent: true,
-    showForChild: true,
-  },
-  {
-    label: 'Add Ingredient',
-    icon: Plus,
-    onClick: (row) => console.log('Adding ingredient to:', row.name),
-    variant: 'outline',
-    showForParent: true, // Only show for parent rows
-  },
-  {
-    label: 'Export',
-    icon: Download,
-    onClick: (row) => console.log('Exporting:', row.name),
-    variant: 'ghost',
-    showForChild: true, // Only show for child rows
-  }
-];
-```
-
-**Action Configuration Properties:**
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `showForParent` | `boolean` | Show this action only for parent rows |
-| `showForChild` | `boolean` | Show this action only for child rows |
-| `parentIcon` | `React.ComponentType` | Icon for parent rows (overrides `icon`) |
-| `childIcon` | `React.ComponentType` | Icon for child rows (overrides `icon`) |
-| `parentLabel` | `string` | Label for parent rows (overrides `label`) |
-| `childLabel` | `string` | Label for child rows (overrides `label`) |
-
-## Smart Sorting
-
-When hierarchical mode is enabled, sorting behavior is optimized to preserve the parent-child relationship structure.
-
-### How It Works
-
-**Parent Row Sorting:**
-- Parent rows maintain their original order and are not affected by sorting
-- Only child rows within each parent group are sorted
-- This prevents parent rows from being moved to unexpected positions
-
-**Child Row Sorting:**
-- Child rows are sorted within their parent group only
-- Sorting by a child-specific column will sort children within each parent
-- The parent row remains at the top of its group
-
-### Example Sorting Behavior
-
-```tsx
-// When sorting by "Diet" column:
-// ✅ Correct behavior:
-// Parent: Caesar Salad
-//   ├─ Child: Dairy Free (Sour cream)
-//   ├─ Child: Egg Free (Mayonnaise)
-//   └─ Child: GF & Vegan (Lettuce)
-// Parent: Beef Stir Fry
-//   ├─ Child: GF & Vegan (Vegetables)
-//   └─ Child: Halal (Beef)
-
-// ❌ Incorrect behavior (what we prevent):
-// Child: Dairy Free (Sour cream)
-// Child: Egg Free (Mayonnaise)
-// Child: GF & Vegan (Lettuce)
-// Child: GF & Vegan (Vegetables)
-// Child: Halal (Beef)
-// Parent: Caesar Salad (moved to end)
-// Parent: Beef Stir Fry (moved to end)
-```
-
-### Sorting Configuration
-
-- All existing sorting features work with hierarchical data
-- Multi-column sorting is supported
-- Server-side sorting is compatible
-- Column-specific sorting behavior is preserved
-
-## Complete Example
-
-Here's a complete example showing all hierarchical features:
-
-```tsx
-import React, { useMemo } from 'react';
-import { DataTable, type HierarchicalDataRow, type DataTableColumn } from '@jmruthers/pace-core';
-import { Eye, Edit, Plus, Download, Copy, Star, Trash2 } from 'lucide-react';
-
-interface Dish extends HierarchicalDataRow {
-  id: string;
-  isParent: boolean;
-  parentId?: string;
-  name: string;
-  type: string;
-  description: string;
-  cost: number;
-  prepTime?: number;
-  difficulty?: string;
-  quantity?: string;
-  unit?: string;
-  supplier?: string;
-}
-
-function HierarchicalDishTable() {
-  const hierarchicalData: Dish[] = useMemo(() => [
-    // Parent rows (dishes)
-    {
-      id: 'dish-1',
-      isParent: true,
-      parentId: null,
-      name: 'Caesar Salad',
-      type: 'Salad',
-      description: 'Classic Caesar salad with romaine lettuce',
-      cost: 12.99,
-      prepTime: 15,
-      difficulty: 'Easy'
-    },
-    {
-      id: 'dish-2',
-      isParent: true,
-      parentId: null,
-      name: 'Beef Stir Fry',
-      type: 'Main Course',
-      description: 'Tender beef with mixed vegetables',
-      cost: 18.99,
-      prepTime: 25,
-      difficulty: 'Medium'
-    },
-    
-    // Child rows (ingredients) for Caesar Salad
-    {
-      id: 'ingredient-1',
-      isParent: false,
-      parentId: 'dish-1',
-      name: 'Romaine Lettuce',
-      type: 'Vegetable',
-      description: 'Fresh romaine lettuce leaves',
-      cost: 2.50,
-      quantity: '2 heads',
-      unit: 'pieces',
-      supplier: 'Fresh Farms'
-    },
-    {
-      id: 'ingredient-2',
-      isParent: false,
-      parentId: 'dish-1',
-      name: 'Parmesan Cheese',
-      type: 'Dairy',
-      description: 'Grated parmesan cheese',
-      cost: 4.20,
-      quantity: '100g',
-      unit: 'grams',
-      supplier: 'Italian Imports'
-    },
-    
-    // Child rows (ingredients) for Beef Stir Fry
-    {
-      id: 'ingredient-3',
-      isParent: false,
-      parentId: 'dish-2',
-      name: 'Beef Strips',
-      type: 'Protein',
-      description: 'Thinly sliced beef strips',
-      cost: 8.50,
-      quantity: '300g',
-      unit: 'grams',
-      supplier: 'Premium Meats'
-    },
-    {
-      id: 'ingredient-4',
-      isParent: false,
-      parentId: 'dish-2',
-      name: 'Mixed Vegetables',
-      type: 'Vegetable',
-      description: 'Bell peppers, broccoli, carrots',
-      cost: 3.20,
-      quantity: '200g',
-      unit: 'grams',
-      supplier: 'Garden Fresh'
-    }
-  ], []);
-
-  const columns: DataTableColumn<Dish>[] = useMemo(() => [
-    {
-      id: 'name',
-      accessorKey: 'name',
-      header: 'Name',
-      enableSorting: true,
-      size: 200,
-      renderForParent: (row) => (
-        <div className="flex items-center gap-2">
-          <span className="font-semibold text-main-800">{row.name}</span>
-          <span className="text-xs bg-main-100 text-main-700 px-2 py-1 rounded">
-            {row.type}
-          </span>
-        </div>
-      ),
-      renderForChild: (row) => (
-        <div className="flex items-center gap-2 ml-4">
-          <span className="text-sec-700">{row.name}</span>
-          <span className="text-xs bg-sec-100 text-sec-600 px-2 py-1 rounded">
-            {row.type}
-          </span>
-        </div>
-      ),
-    },
-    {
-      id: 'description',
-      accessorKey: 'description',
-      header: 'Description',
-      enableSorting: true,
-      size: 250,
-      renderForParent: (row) => (
-        <div className="text-sm text-sec-600">
-          {row.description}
-        </div>
-      ),
-      renderForChild: (row) => (
-        <div className="text-sm text-sec-500 ml-4">
-          {row.description}
-        </div>
-      ),
-    },
-    {
-      id: 'quantity',
-      accessorKey: 'quantity',
-      header: 'Quantity',
-      enableSorting: true,
-      size: 120,
-      renderForParent: () => null,
-      renderForChild: (row) => (
-        <div className="text-sm ml-4">
-          <span className="font-medium">{row.quantity}</span>
-          {row.unit && <span className="text-sec-500 ml-1">{row.unit}</span>}
-        </div>
-      ),
-      hideForParent: true,
-    },
-    {
-      id: 'cost',
-      accessorKey: 'cost',
-      header: 'Cost',
-      enableSorting: true,
-      size: 100,
-      renderForParent: (row) => (
-        <div className="text-right font-semibold text-main-800">
-          ${row.cost?.toFixed(2)}
-        </div>
-      ),
-      renderForChild: (row) => (
-        <div className="text-right text-sec-600 ml-4">
-          ${row.cost?.toFixed(2)}
-        </div>
-      ),
-    },
-    {
-      id: 'supplier',
-      accessorKey: 'supplier',
-      header: 'Supplier',
-      enableSorting: true,
-      size: 150,
-      renderForParent: () => null,
-      renderForChild: (row) => (
-        <div className="text-sm text-sec-600 ml-4">
-          {row.supplier}
-        </div>
-      ),
-      hideForParent: true,
-    },
-    {
-      id: 'prepTime',
-      accessorKey: 'prepTime',
-      header: 'Prep Time',
-      enableSorting: true,
-      size: 100,
-      renderForParent: (row) => (
-        <div className="text-center">
-          <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-sec-100 text-sec-800">
-            {row.prepTime} min
-          </span>
-        </div>
-      ),
-      renderForChild: () => null,
-      hideForChild: true,
-    },
-    {
-      id: 'difficulty',
-      accessorKey: 'difficulty',
-      header: 'Difficulty',
-      enableSorting: true,
-      size: 100,
-      renderForParent: (row) => {
-        const colors = {
-          Easy: 'bg-main-100 text-main-800',
-          Medium: 'bg-acc-100 text-acc-800',
-          Hard: 'bg-acc-100 text-acc-800'
-        };
-        return (
-          <div className="text-center">
-            <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${colors[row.difficulty as keyof typeof colors] || 'bg-sec-100 text-sec-800'}`}>
-              {row.difficulty}
-            </span>
-          </div>
-        );
-      },
-      renderForChild: () => null,
-      hideForChild: true,
-    }
-  ], []);
-
-  const hierarchicalActions = useMemo(() => [
-    {
-      label: 'View Details',
-      icon: Eye,
-      onClick: (row: Dish) => {
-        console.log('Viewing details for:', row.name);
-        alert(`Viewing details for: ${row.name}`);
-      },
-      variant: 'default' as const,
-    },
-    {
-      label: 'Edit',
-      icon: Edit,
-      onClick: (row: Dish) => {
-        console.log('Editing:', row.name);
-        alert(`Editing: ${row.name}`);
-      },
-      variant: 'outline' as const,
-    },
-    {
-      label: 'Copy Recipe',
-      parentLabel: 'Copy Recipe',
-      childLabel: 'Copy Ingredient',
-      parentIcon: Copy,
-      childIcon: Copy,
-      onClick: (row: Dish) => {
-        console.log('Copying:', row.name);
-        alert(`Copying: ${row.name}`);
-      },
-      variant: 'secondary' as const,
-      showForParent: true,
-      showForChild: true,
-    },
-    {
-      label: 'Add Ingredient',
-      icon: Plus,
-      onClick: (row: Dish) => {
-        console.log('Adding ingredient to:', row.name);
-        alert(`Adding ingredient to: ${row.name}`);
-      },
-      variant: 'outline' as const,
-      showForParent: true, // Only show for parent rows (dishes)
-    },
-    {
-      label: 'Export',
-      icon: Download,
-      onClick: (row: Dish) => {
-        console.log('Exporting:', row.name);
-        alert(`Exporting: ${row.name}`);
-      },
-      variant: 'ghost' as const,
-      showForChild: true, // Only show for child rows (ingredients)
-    },
-    {
-      label: 'Favorite Recipe',
-      parentLabel: 'Favorite Recipe',
-      childLabel: 'Favorite Ingredient',
-      icon: Star,
-      onClick: (row: Dish) => {
-        console.log('Favoriting:', row.name);
-        alert(`Favoriting: ${row.name}`);
-      },
-      variant: 'ghost' as const,
-      showForParent: true,
-      showForChild: true,
-    },
-    {
-      label: 'Delete Recipe',
-      parentLabel: 'Delete Recipe',
-      childLabel: 'Remove Ingredient',
-      icon: Trash2,
-      onClick: (row: Dish) => {
-        console.log('Deleting:', row.name);
-        alert(`Deleting: ${row.name}`);
-      },
-      variant: 'destructive' as const,
-      showForParent: true,
-      showForChild: true,
-    }
-  ], []);
-
-  return (
-    <DataTable
-      data={hierarchicalData}
-      columns={columns}
-      features={{
-        search: true,
-        pagination: true,
-        sorting: true,
-        filtering: true,
-        hierarchical: true,
-        editing: true,
-        deletion: true,
-      }}
-      actions={hierarchicalActions}
-      title="Dishes & Ingredients"
-      description="Hierarchical data showing dishes (parent rows) with their ingredients (child rows). Notice the expand/collapse all button in the header and different actions for parent vs child rows."
-      hierarchical={{
-        enabled: true,
-        defaultExpanded: false, // Start with all collapsed
-        onExpandedChange: (expandedIds) => {
-          console.log('Expanded rows:', expandedIds);
-        },
-      }}
-      getRowId={(row: Dish) => row.id}
-    />
-  );
-}
-
-export default HierarchicalDishTable;
-```
-
-## Best Practices
-
-### 1. Data Structure
-- Always use unique IDs for each row
-- Ensure parent-child relationships are valid
-- Keep data structure consistent across all rows
-
-### 2. User Experience
-- Start with collapsed state (`defaultExpanded: false`)
-- Use clear visual distinction between parent and child rows
-- Provide meaningful action labels for different row types
-
-### 3. Performance
-- Use `useMemo` for column and action definitions
-- Consider pagination for large hierarchical datasets
-- Implement proper `getRowId` function
-
-### 4. Accessibility
-- Ensure proper ARIA labels for expand/collapse buttons
-- Use semantic HTML structure
-- Provide keyboard navigation support
-
-## Troubleshooting
-
-### Common Issues
-
-**1. Rows not expanding/collapsing:**
-- Check that `isParent` and `parentId` are set correctly
-- Ensure all `parentId` values reference existing parent row IDs
-- Verify `hierarchical.enabled` is set to `true`
-
-**2. Actions not showing for correct row types:**
-- Check `showForParent` and `showForChild` properties
-- Ensure action configuration is correct
-
-**3. Sorting not working as expected:**
-- This is expected behavior - child rows sort within their parent groups
-- Parent rows maintain their original order
-
-**4. Visual styling issues:**
-- Check `parentRowClassName` and `childRowClassName` configuration
-- Ensure proper CSS classes are applied
-- Verify `indentSize` is appropriate for your design
-
-### Debug Tips
-
-1. **Check console logs** for expansion state changes
-2. **Verify data structure** matches `HierarchicalDataRow` interface
-3. **Test with simple data** first before complex hierarchies
-4. **Use browser dev tools** to inspect rendered HTML structure
-
-## API Reference
-
-### HierarchicalDataRow Interface
-
-```typescript
-interface HierarchicalDataRow extends DataRecord {
-  isParent: boolean;
-  parentId?: string;
-  id: string;
-}
-```
-
-### HierarchicalConfig Interface
-
-```typescript
-interface HierarchicalConfig {
-  enabled: boolean;
-  defaultExpanded?: boolean | string[];
-  onExpandedChange?: (expandedIds: string[]) => void;
-  expandButton?: React.ComponentType<ExpandButtonProps>;
-  indentSize?: number;
-  parentRowClassName?: string;
-  childRowClassName?: string;
-}
-```
-
-### DataTableColumn Hierarchical Properties
-
-```typescript
-interface DataTableColumn<TData> {
-  // ... standard properties
-  
-  // Hierarchical-specific properties
-  renderForParent?: (row: TData) => React.ReactNode;
-  renderForChild?: (row: TData) => React.ReactNode;
-  hideForParent?: boolean;
-  hideForChild?: boolean;
-}
-```
-
-### DataTableAction Hierarchical Properties
-
-```typescript
-interface DataTableAction<TData> {
-  // ... standard properties
-  
-  // Hierarchical-specific properties
-  showForParent?: boolean;
-  showForChild?: boolean;
-  parentIcon?: React.ComponentType<{ className?: string }>;
-  childIcon?: React.ComponentType<{ className?: string }>;
-  parentLabel?: string;
-  childLabel?: string;
-}
-```