Expandable rows

import { useState } from 'react';
import DataTable, { type TableColumn } from 'react-data-table-component';

interface Employee {
  id: number;
  name: string;
  role: string;
  department: string;
  salary: number;
  bio: string;
  locked: boolean;
}

const data: Employee[] = [
  {
    id: 1, name: 'Aria Chen', role: 'Engineering Lead', department: 'Engineering',
    salary: 155000, locked: false,
    bio: 'Aria leads the platform team, focusing on reliability and developer experience.',
  },
  {
    id: 2, name: 'Marcus Webb', role: 'Product Manager', department: 'Product',
    salary: 132000, locked: true,
    bio: 'Marcus drives roadmap strategy across three product lines.',
  },
  {
    id: 3, name: 'Priya Kapoor', role: 'Senior Designer', department: 'Design',
    salary: 118000, locked: false,
    bio: 'Priya leads the design system and owns the mobile experience.',
  },
  {
    id: 4, name: 'Jordan Ellis', role: 'Data Scientist', department: 'Analytics',
    salary: 143000, locked: true,
    bio: 'Jordan builds ML pipelines for churn prediction and revenue forecasting.',
  },
];

const columns: TableColumn<Employee>[] = [
  { name: 'Name',       selector: r => r.name,       sortable: true },
  { name: 'Role',       selector: r => r.role },
  { name: 'Department', selector: r => r.department },
  { name: 'Salary',     selector: r => r.salary, format: r => `$${r.salary.toLocaleString()}`, right: true },
];

// The expandable component receives the row as the `data` prop
const ExpandedRow = ({ data: row }: { data: Employee }) => (
  <div style={{ padding: '16px 40px', background: '#f9fafb', borderBottom: '1px solid #e5e7eb' }}>
    <p style={{ fontWeight: 600, marginBottom: 4 }}>{row.name}</p>
    <p style={{ color: '#6b7280', margin: 0 }}>{row.bio}</p>
  </div>
);

export default function App() {
  const [animate, setAnimate] = useState(true);
  const [disableLocked, setDisableLocked] = useState(false);

  return (
    <div>
      <label>
        <input type="checkbox" checked={animate} onChange={e => setAnimate(e.target.checked)} />
        {' '}Animate expand
      </label>
      <label>
        <input type="checkbox" checked={disableLocked} onChange={e => setDisableLocked(e.target.checked)} />
        {' '}Disable "Restricted" rows
      </label>
      <DataTable
        columns={columns}
        data={data}
        expandableRows
        expandableRowsComponent={ExpandedRow}
        expandableRowDisabled={disableLocked ? (r => r.locked) : undefined}
        animateRows={animate}
        highlightOnHover
      />
    </div>
  );
}