README update

Author: christianhugoch

README.md

@@ -412,127 +412,6 @@ export default function App({ viewName, query }) {
 }
 ```
 
-## Pagination and Sorting
-
-React views receive a `stateHash` prop — a short identifier for this view's state context. Use it to set pagination and sort parameters via `set_state_field`, which updates the URL and triggers a re-render with the new page.
-
-The view also receives `totalCount` when a page size is active, so you can show "page X of Y".
-
-**Available state keys** (replace `${stateHash}` with the actual value):
-
-| Key                      | Effect                             |
-| ------------------------ | ---------------------------------- |
-| `_${stateHash}_page`     | Current page number (1-based)      |
-| `_${stateHash}_pagesize` | Rows per page                      |
-| `_${stateHash}_sortby`   | Field name to sort by              |
-| `_${stateHash}_sortdesc` | Set to `"on"` for descending order |
-
-**Copy-paste example** — paste this into a table-based React view:
-
-```javascript
-import React, { useEffect } from "react";
-
-const PAGE_SIZE = 5;
-
-export default function App({ rows, state, stateHash, totalCount }) {
-  useEffect(() => {
-    if (!state[`_${stateHash}_pagesize`]) {
-      set_state_field(`_${stateHash}_pagesize`, PAGE_SIZE);
-    }
-  }, []);
-
-  const currentPage = state[`_${stateHash}_page`]
-    ? parseInt(state[`_${stateHash}_page`])
-    : 1;
-  const sortBy = state[`_${stateHash}_sortby`] || "";
-  const sortDesc = !!state[`_${stateHash}_sortdesc`];
-  const totalPages = totalCount ? Math.ceil(totalCount / PAGE_SIZE) : null;
-
-  const setPage = (n) => set_state_field(`_${stateHash}_page`, n);
-  const setPageSize = (n) =>
-    set_state_fields({
-      [`_${stateHash}_pagesize`]: n,
-      [`_${stateHash}_page`]: 1,
-    });
-  const setSort = (field) => {
-    const newSortDesc = sortBy === field ? (sortDesc ? "" : "on") : "";
-    const kvs = {
-      [`_${stateHash}_sortby`]: field,
-      [`_${stateHash}_sortdesc`]: newSortDesc,
-    };
-    const currentPageSize = state[`_${stateHash}_pagesize`];
-    if (currentPageSize) kvs[`_${stateHash}_pagesize`] = currentPageSize;
-    set_state_fields(kvs);
-  };
-
-  if (!rows || rows.length === 0) return <p>No rows found.</p>;
-  const columns = Object.keys(rows[0]);
-
-  return (
-    <div>
-      <table className="table table-striped">
-        <thead>
-          <tr>
-            {columns.map((col) => (
-              <th
-                key={col}
-                onClick={() => setSort(col)}
-                style={{ cursor: "pointer" }}
-              >
-                {col}
-                {sortBy === col ? (sortDesc ? " ▼" : " ▲") : ""}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row, i) => (
-            <tr key={i}>
-              {columns.map((col) => (
-                <td key={col}>{String(row[col] ?? "")}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <div className="d-flex align-items-center gap-3 mt-2">
-        <button
-          className="btn btn-sm btn-outline-secondary"
-          disabled={currentPage <= 1}
-          onClick={() => setPage(currentPage - 1)}
-        >
-          ‹ Prev
-        </button>
-        <span>
-          Page {currentPage}
-          {totalPages ? ` of ${totalPages}` : ""}
-        </span>
-        <button
-          className="btn btn-sm btn-outline-secondary"
-          disabled={
-            totalPages ? currentPage >= totalPages : rows.length < PAGE_SIZE
-          }
-          onClick={() => setPage(currentPage + 1)}
-        >
-          Next ›
-        </button>
-        <select
-          className="form-select form-select-sm w-auto"
-          value={state[`_${stateHash}_pagesize`] || PAGE_SIZE}
-          onChange={(e) => setPageSize(Number(e.target.value))}
-        >
-          {[5, 10, 25, 50].map((n) => (
-            <option key={n} value={n}>
-              {n} per page
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-}
-```
 
 ## Components