ChatGPT Prompt to Build a React Data Table With Sorting, Filtering, and Pagination

ROLE: You are a senior frontend engineer who writes clean, accessible React components.

CONTEXT: I need a React component called CustomerTable that displays a data table for the following data shape: array of objects: { id: string, name: string, email: string, plan: 'free' | 'pro' | 'enterprise', signupDate: string (ISO date), mrr: number }

REQUIREMENTS:

• Columns: Name (sortable), Email, Plan, Signup Date (sortable), MRR (sortable)
• Sorting: clicking a sortable column header toggles ascending/descending order, with a visible indicator of current sort state
• Filtering: a single search input that filters rows by name and email, case-insensitive
• Pagination: 15 rows per page, with previous/next controls and a current page indicator
• Empty states: show a clear message when the data array is empty, and a separate message when a filter returns no results
• Accessibility: sortable headers must be keyboard-operable and expose their sort state to screen readers
• Styling approach: Tailwind CSS classes

OUTPUT FORMAT: Return the complete component code in a single code block, followed by a short list of any assumptions you made about data or behavior that I didn't specify.

import { useState, useMemo } from 'react';

function CustomerTable({ customers }) {
  const [search, setSearch] = useState('');
  const [sortField, setSortField] = useState('name');
  const [sortDir, setSortDir] = useState('asc');
  const [page, setPage] = useState(1);
  const pageSize = 15;

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    return customers.filter(c =>
      c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q)
    );
  }, [customers, search]);

  const sorted = useMemo(() => {
    return [...filtered].sort((a, b) => {
      const dir = sortDir === 'asc' ? 1 : -1;
      return a[sortField] > b[sortField] ? dir : -dir;
    });
  }, [filtered, sortField, sortDir]);

  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
  const pageItems = sorted.slice((page - 1) * pageSize, page * pageSize);

  const toggleSort = (field) => {
    if (sortField === field) {
      setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
    } else {
      setSortField(field);
      setSortDir('asc');
    }
  };

  const sortableHeader = (label, field) => (
    <th
      role="columnheader"
      aria-sort={sortField === field ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}
      tabIndex={0}
      onClick={() => toggleSort(field)}
      onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleSort(field)}
      className="cursor-pointer px-4 py-2 text-left select-none"
    >
      {label} {sortField === field ? (sortDir === 'asc' ? '▲' : '▼') : ''}
    </th>
  );

  if (customers.length === 0) {
    return <p className="p-4 text-gray-500">No customers yet.</p>;
  }

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => { setSearch(e.target.value); setPage(1); }}
        placeholder="Search by name or email"
        className="mb-3 border px-3 py-2 rounded w-full max-w-sm"
      />
      {sorted.length === 0 ? (
        <p className="p-4 text-gray-500">No results match your search.</p>
      ) : (
        <>
          <table className="w-full border-collapse">
            <thead>
              <tr className="border-b">
                {sortableHeader('Name', 'name')}
                <th className="px-4 py-2 text-left">Email</th>
                <th className="px-4 py-2 text-left">Plan</th>
                {sortableHeader('Signup Date', 'signupDate')}
                {sortableHeader('MRR', 'mrr')}
              </tr>
            </thead>
            <tbody>
              {pageItems.map((c) => (
                <tr key={c.id} className="border-b">
                  <td className="px-4 py-2">{c.name}</td>
                  <td className="px-4 py-2">{c.email}</td>
                  <td className="px-4 py-2">{c.plan}</td>
                  <td className="px-4 py-2">{c.signupDate}</td>
                  <td className="px-4 py-2">${c.mrr}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="flex items-center gap-2 mt-3">
            <button disabled={page === 1} onClick={() => setPage(p => p - 1)} className="px-3 py-1 border rounded disabled:opacity-50">Previous</button>
            <span>Page {page} of {totalPages}</span>
            <button disabled={page === totalPages} onClick={() => setPage(p => p + 1)} className="px-3 py-1 border rounded disabled:opacity-50">Next</button>
          </div>
        </>
      )}
    </div>
  );
}

export default CustomerTable;

Assumptions made:

• Email column is not sortable or filterable beyond the search box, per your spec
• MRR is displayed with a plain dollar prefix with no decimal formatting since currency formatting wasn't specified
• Page reset to 1 whenever the search term changes, to avoid landing on an empty page