Data table

import { useState } from 'react';
import { motion } from 'motion/react';

type Customer = { id: string; name: string; plan: string; seats: number };
type Column = 'name' | 'plan' | 'seats';

export function CustomersTable({ rows }: { rows: Customer[] }) {
  const [sort, setSort] = useState({ by: 'name' as Column, dir: 1 });
  const [query, setQuery] = useState('');
  const visible = rows
    .filter((row) => row.name.toLowerCase().includes(query.toLowerCase()))
    .sort((a, b) => (a[sort.by] > b[sort.by] ? sort.dir : -sort.dir));
  const order = sort.dir > 0 ? 'ascending' : 'descending';
  const arrow = sort.dir > 0 ? '↑' : '↓';
  // Clicking a header sorts by it; clicking it again flips the direction.
  const sortBy = (by: Column) =>
    setSort({ by, dir: sort.by === by ? -sort.dir : 1 });
  const header = (by: Column) => (
    <th aria-sort={sort.by === by ? order : 'none'}>
      <button onClick={() => sortBy(by)}>
        {by} {sort.by === by && arrow}
      </button>
    </th>
  );

  return (
    <div className='w-md text-sm'>
      <input
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder='Filter by name'
        aria-label='Filter customers by name'
        className='mb-3 h-9 w-full rounded-lg border bg-background px-3'
      />
      <table className='w-full text-left'>
        <thead className='border-b text-muted-foreground [&_th]:py-2 [&_th]:font-medium [&_th]:capitalize [&_th:last-child]:text-right'>
          <tr>
            {header('name')}
            {header('plan')}
            {header('seats')}
          </tr>
        </thead>
        <tbody>
          {visible.map((row) => (
            // `layout` slides each row from its old position to its new one.
            <motion.tr
              key={row.id}
              layout
              className='border-b hover:bg-muted/50'
            >
              <td className='py-2 font-medium'>{row.name}</td>
              <td>{row.plan}</td>
              <td className='text-right tabular-nums'>{row.seats}</td>
            </motion.tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}