@jmruthers/pace-core 0.5.121 → 0.5.123

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

@@ -0,0 +1,850 @@
+# 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;
+}
+```