Building Block

Data Tables & Search

Sortable data tables, client-side filtering, and PHP site search with MySQL — proven patterns that Claude deploys in a single conversation. No plugins, no external search services, no per-query fees.

Get started — from £6.99/month All building blocks

Code Patterns

Data table & search patterns

Three proven patterns covering sortable HTML tables, PHP-powered site search, and live AJAX search. Claude generates the full markup, CSS, PHP, and JavaScript — matched to your theme and deployed live on your server.

Pattern 1 — Sortable & Filterable Data Table

A responsive HTML table with click-to-sort column headers and a real-time filter input. All sorting and filtering happens client-side in vanilla JavaScript — no server round-trips, no library dependencies, instant feedback for the user.

HTML CSS Vanilla JS Responsive Accessible
  • Semantic <table> with <thead>, <tbody>, scope="col" and scope="row" on all headers
  • Sort indicators: up/down arrow icons in column headers; aria-sort="ascending|descending|none" on active column
  • Click toggles asc/desc; third click resets to original order
  • Filter input above the table: case-insensitive, matches across all visible columns simultaneously
  • Alternating row stripes via :nth-child(even); column highlight on hover
  • Horizontal overflow-x: auto container with right-edge fade shadow on mobile
  • Optional row count badge: “Showing 12 of 48 rows” updates live as filter changes
Prompt to use with Claude

Add a sortable, filterable data table to my page. Columns: [Column 1, Column 2, Column 3, Column 4]. Pre-populate with [your data rows]. Include a filter input above the table. Click column headers to sort asc/desc. Add a row count badge. Responsive with horizontal scroll on mobile. Brand colour: [your hex]. CSS in theme.css, JS in main.js.

Pattern 2 — PHP Site Search with MySQL

A full-text search across your site’s page database using MySQL FULLTEXT indexes. Includes a search bar in your navbar and a dedicated /search results page with highlighted match terms and a result count. No Algolia, no Elasticsearch.

PHP MySQL Full-text Search Search Results Page
  • Search form: <input type="search"> with role="search" and aria-label; submits to /search?q=
  • MySQL query: MATCH(title, content) AGAINST(? IN BOOLEAN MODE) with LIKE fallback for short terms
  • Results page: title, URL slug, and a 160-character excerpt with matched terms wrapped in <mark>
  • Result count heading: “5 results for ‘contact form’”; zero-results state with suggestions
  • Query sanitised with htmlspecialchars() and passed via prepared statement — SQL injection safe
  • Optional: archived pages and drafts excluded from results; optional result ranking by recency
Prompt to use with Claude

Add site search to my Claude CMS site. Search across page titles and content using MySQL FULLTEXT with a LIKE fallback. Create a /search results page with highlighted match excerpts and a result count heading. Add a search input to my navbar. Sanitise all inputs with prepared statements. Exclude archived pages from results.

Pattern 3 — AJAX Live Search with Dropdown Results

A search input that shows results in a dropdown as the user types — debounced to avoid flooding the server, keyboard-navigable, and with a clean no-results state. No full-page reload. The PHP endpoint returns JSON, the frontend renders it instantly.

PHP MySQL Vanilla JS AJAX Debounced
  • Input debounced at 300ms via clearTimeout/setTimeout — fires only when the user pauses typing
  • PHP endpoint search-ajax.php: accepts ?q=, returns JSON array of { title, slug, excerpt }
  • Minimum 2 characters before search fires; loading spinner shown during request
  • Results dropdown: position: absolute below input, z-index: 1001, max 6 results shown
  • Keyboard: down/up arrow moves between results; Enter navigates to result URL; Escape closes dropdown
  • Click outside or focus loss closes dropdown and clears state
  • aria-live="polite" region announces result count to screen readers
Prompt to use with Claude

Add AJAX live search to my navbar. As I type (debounced 300ms, min 2 chars), query search-ajax.php which searches MySQL page titles and content and returns JSON. Show up to 6 results in a dropdown below the input with title and excerpt. Keyboard navigable with arrow keys. Close on Escape or outside click. PHP endpoint uses prepared statements. CSS in theme.css, JS in main.js.

What you get

Every data table & search pattern includes

SQL injection safe

Every PHP search pattern uses prepared statements and htmlspecialchars() sanitisation. User input never touches a raw SQL string.

No external services

No Algolia, no Elasticsearch, no third-party API calls. Search runs on your own MySQL database — zero additional infrastructure or monthly fees.

Accessible by default

Semantic table markup, aria-sort on sortable columns, role="search" on forms, and live region announcements for screen reader users.

Iterable in seconds

Add columns, adjust result limits, change the excerpt length. Describe the change to Claude and it’s on your live site within seconds.

More building blocks

Pair data tables with

Combine search and table patterns with these building blocks for complete data-driven pages.

Authentication & Members

Gate admin tables and search behind a PHP login system with role-based access control.

View patterns →

Blog & Article Layouts

Pair PHP site search with a blog index — let visitors find articles by title or content keyword instantly.

View patterns →

Navigation & Menus

Embed an AJAX live search input directly in your sticky navbar for site-wide access on every page.

View patterns →

Add search and tables today

From £6.99/month. First month free — no credit card required.

View pricing All building blocks