React Data Table Component

A React table component that handles message-based data updates using Zod schema validation. This component is designed to receive data through window.postMessage and display it in a clean, formatted table.

• Message-based data handling: Receives data through window.postMessage API
• Zod schema validation: Validates incoming messages for type safety
• Flexible data types: Handles strings, numbers, booleans, objects, and null values
• Settings support: Accepts theme and readOnly settings
• Auto-formatting: Automatically formats different data types for display
• Responsive design: Clean, modern table styling with hover effects

The component accepts two types of messages:

{
  type: 'data',
  data: {
    span_id?: string,
    input?: unknown,
    output?: unknown,
    expected?: unknown,
    metadata?: unknown,
    // ... any additional properties
  }
}

{
  type: 'settings',
  settings: {
    theme?: 'light' | 'dark',
    readOnly?: boolean,
    // ... any additional settings
  }
}

// Send data to the table
window.postMessage({
  type: 'data',
  data: {
    span_id: 'initial-sample',
    input: 'An orphaned boy discovers he\'s a wizard on his 11th birthday when Hagrid escorts him to magic-teaching Hogwarts School.',
    output: 'Harry Potter and the Philosopher\'s Stone',
    expected: 'Harry Potter and the Sorcerer\'s Stone',
    metadata: null
  }
}, '*');

// Update component settings
window.postMessage({
  type: 'settings',
  settings: {
    theme: 'dark',
    readOnly: true
  }
}, '*');

The component automatically formats different data types:

• Strings: Displayed as-is
• Numbers/Booleans: Converted to strings
• Objects: Pretty-printed as JSON
• null/undefined: Displayed as "null"
• Complex objects: Fallback to "[Object]" if JSON.stringify fails

The component includes a demo that automatically loads sample data:

Property: span_id
Value: initial-sample

Property: input  
Value: An orphaned boy discovers he's a wizard on his 11th birthday when Hagrid escorts him to magic-teaching Hogwarts School.

Property: output
Value: Harry Potter and the Philosopher's Stone

Property: expected
Value: Harry Potter and the Sorcerer's Stone

Property: metadata
Value: null

Open the browser console and run:

window.postMessage({
  type: 'data', 
  data: {
    span_id: 'test', 
    input: 'test input', 
    output: 'test output'
  }
}, '*');

• Built with React 18.2.0
• Uses Zod for schema validation
• Styled with custom CSS (no external UI library dependencies)
• Handles message validation errors gracefully
• Supports extensible schemas with catchall(z.unknown())