Comparison Table Component

import { ComparisonTable, ComparisonColumn, ComparisonRow } from '@/components/composite/ComparisonTable';

const data: ComparisonRow[] = [
  { id: '1', name: 'Trastevere', bestFor: 'Foodies', vibe: 'Local', avgHotel: '€120/night', walkScore: '95/100', attractions: '12 nearby' },
  { id: '2', name: 'Centro', bestFor: 'First Time', vibe: 'Tourist', avgHotel: '€150/night', walkScore: '98/100', attractions: '25 nearby' },
];

const columns: ComparisonColumn[] = [
  { key: 'name', label: 'Neighborhood', sortable: true },
  { key: 'bestFor', label: 'Best For', filterable: true },
  { key: 'vibe', label: 'Vibe' },
  { key: 'avgHotel', label: 'Avg Hotel', sortable: true },
  { key: 'walkScore', label: 'Walk Score', sortable: true },
  { key: 'attractions', label: 'Attractions' },
];

<ComparisonTable
  data={data}
  columns={columns}
  sortable
  filterable
  searchable
  exportable
  persistState
  caption="Compare neighborhoods in Rome"
  onRowClick={(row) => navigate(`/neighborhoods/${row.id}`)}
/>