Tables, grids and search

import { useEffect, useMemo, useState } from 'react'; // Settings the author fills in. Everything has a default, and columns is just a plain list of names.type Props = {  getPConnect: () => any;  dataPageName: string;  columns?: string;        // 'CaseID, Name, Status'  rowsPerPage?: number;}; export default function MyTable(props: Props) {  const { getPConnect, columns = '', dataPageName, rowsPerPage = 10 } = props;  const pConn = getPConnect();  const cols = columns.split(",").map((c) => c.trim()).filter(Boolean);   const [rows, setRows] = useState<any[]>([]);  const [error, setError] = useState<string | null>(null);  const [query, setQuery] = useState('');  const [page, setPage] = useState(1);   // 1. Ask for rows. Never fetch yourself: PCore adds sign-in, context and caching.  useEffect(() => {    async function load() {      try {        const res = await (window as any).PCore?.getDataApiUtils?.()?.getData(          dataPageName, {  }, pConn.getContextName());        // 2. Accept every answer shape, or a data page that did answer looks empty        setRows(res?.data?.data ?? res?.data ?? (Array.isArray(res) ? res : []));        setError(null);      } catch {        setError('The data could not be loaded.');   // short, calm, no raw error text      }    }    load();  }, [dataPageName]);   // 3. Filter the rows already loaded (a text box matches part of any shown column)  const filtered = useMemo(() => {    const needle = query.trim().toLowerCase();    return needle ? rows.filter((r) => cols.some((c) => String(r[c] ?? "").toLowerCase().includes(needle))) : rows;  }, [rows, query, columns]);   // 4. Cut into pages, in the browser  const shown = filtered.slice((page - 1) * rowsPerPage, page * rowsPerPage);   // 5. What a click on a row does  const open = (row: any) => {    // Only a real case can be opened; a data-view row has a key but no case to open    if (row.pzInsKey && row.pxObjClass) pConn.getActionsApi().openWorkByHandle(row.pzInsKey, row.pxObjClass);  };   if (error) return <p role="alert">{error}</p>;   return (    <div>      <input aria-label="Search" value={query} onChange={(e) => { setQuery(e.target.value); setPage(1); }} />      <table>        <thead><tr>{cols.map((c) => <th key={c}>{c}</th>)}</tr></thead>        <tbody>          {shown.map((row, i) => (            <tr key={row.pzInsKey ?? i} onClick={() => open(row)}>              {cols.map((c) => <td key={c}>{String(row[c] ?? "")}</td>)}            </tr>          ))}        </tbody>      </table>      <button disabled={page <= 1} onClick={() => setPage(page - 1)}>Previous</button>      <button disabled={page >= Math.ceil(filtered.length / rowsPerPage)} onClick={() => setPage(page + 1)}>Next</button>    </div>  );}