Edit Filter

Name

Also known as (comma separated)

Brief definition Restricts records displayed.

Notes **Search, Filter & Query UI:** Restricts displayed data.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "caption", "type": "text", "label": "Caption", "default": "Customer orders" }, { "id": "accent", "type": "color", "label": "Accent", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "status", "type": "select", "label": "Status filter", "default": "all", "options": [ "all", "shipped", "processing", "refunded" ] }, { "id": "query", "type": "text", "label": "Search text", "default": "" }, { "id": "caseSensitive", "type": "toggle", "label": "Case-sensitive", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"filt\" data-status=\"{{status}}\" style=\"--accent:{{accent}};\">\n <div class=\"filt__bar\">\n <div class=\"filt__pills\" role=\"group\" aria-label=\"Filter by status\">\n <button type=\"button\" class=\"filt__pill filt__pill--all\">All</button>\n <button type=\"button\" class=\"filt__pill filt__pill--shipped\">Shipped</button>\n <button type=\"button\" class=\"filt__pill filt__pill--processing\">Processing</button>\n <button type=\"button\" class=\"filt__pill filt__pill--refunded\">Refunded</button>\n </div>\n <div class=\"filt__chips\">\n {{#if query}}<span class=\"filt__chip\">Search: \"{{query}}\"{{#if caseSensitive}} (Aa){{/if}}</span>{{/if}}\n </div>\n </div>\n <div class=\"filt__scroll\">\n <table class=\"filt__table\">\n <caption>{{caption}}</caption>\n <thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Customer</th><th scope=\"col\">Status</th><th scope=\"col\">Total</th></tr></thead>\n <tbody>\n <tr data-row-status=\"shipped\"><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n <tr data-row-status=\"processing\"><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>\n <tr data-row-status=\"shipped\"><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>\n <tr data-row-status=\"refunded\"><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n <tr data-row-status=\"shipped\"><td>#1038</td><td>L. Duarte</td><td>Shipped</td><td>£96.20</td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n.filt { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.filt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #24143020; }\n.filt__pills { display: flex; gap: 6px; flex-wrap: wrap; }\n.filt__pill { border: 1px solid #24143040; background: #FAF7F2; color: #241430; padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }\n.filt__pill:hover { background: #24143010; }\n.filt__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n.filt[data-status=\"all\"] .filt__pill--all,\n.filt[data-status=\"shipped\"] .filt__pill--shipped,\n.filt[data-status=\"processing\"] .filt__pill--processing,\n.filt[data-status=\"refunded\"] .filt__pill--refunded { background: var(--accent); color: #FAF7F2; border-color: var(--accent); }\n.filt__chip { font-size: 12px; background: #24143012; padding: 4px 8px; border-radius: 6px; }\n.filt__scroll { overflow-x: auto; }\n.filt__table { border-collapse: collapse; width: 100%; }\n.filt__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.filt__table th, .filt__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.filt__table th { background: var(--accent); color: #FAF7F2; }\n.filt[data-status=\"shipped\"] tbody tr:not([data-row-status=\"shipped\"]) { display: none; }\n.filt[data-status=\"processing\"] tbody tr:not([data-row-status=\"processing\"]) { display: none; }\n.filt[data-status=\"refunded\"] tbody tr:not([data-row-status=\"refunded\"]) { display: none; }\n</style>", "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" data-status=\"{{status}}\" style=\"--accent:{{accent}};\">\n <div class=\"flex flex-wrap items-center gap-2 px-3.5 py-2.5 border-b border-[#24143020]\">\n <div class=\"flex gap-1.5 flex-wrap\" role=\"group\" aria-label=\"Filter by status\">\n <button type=\"button\" class=\"filt__pill filt__pill--all border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2\">All</button>\n <button type=\"button\" class=\"filt__pill filt__pill--shipped border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2\">Shipped</button>\n <button type=\"button\" class=\"filt__pill filt__pill--processing border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2\">Processing</button>\n <button type=\"button\" class=\"filt__pill filt__pill--refunded border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2\">Refunded</button>\n </div>\n {{#if query}}<span class=\"text-xs bg-[#24143012] px-2 py-1 rounded\">Search: \"{{query}}\"{{#if caseSensitive}} (Aa){{/if}}</span>{{/if}}\n </div>\n <div class=\"overflow-x-auto\">\n <table class=\"border-collapse w-full\">\n <caption class=\"text-left font-semibold px-3.5 py-2.5\">{{caption}}</caption>\n <thead><tr class=\"text-[#FAF7F2]\" style=\"background:{{accent}}\">\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Order</th>\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Customer</th>\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Status</th>\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Total</th>\n </tr></thead>\n <tbody>\n <tr data-row-status=\"shipped\"><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1042</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">A. Whitfield</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£64.00</td></tr>\n <tr data-row-status=\"processing\"><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1041</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">R. Okafor</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Processing</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td></tr>\n <tr data-row-status=\"shipped\"><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1040</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">M. Iqbal</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£22.00</td></tr>\n <tr data-row-status=\"refunded\"><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1039</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">S. Novak</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Refunded</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£40.00</td></tr>\n <tr data-row-status=\"shipped\"><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1038</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">L. Duarte</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£96.20</td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n[data-status=\"all\"] .filt__pill--all,\n[data-status=\"shipped\"] .filt__pill--shipped,\n[data-status=\"processing\"] .filt__pill--processing,\n[data-status=\"refunded\"] .filt__pill--refunded { background: var(--accent); color: #FAF7F2; border-color: var(--accent); }\n[data-status=\"shipped\"] tbody tr:not([data-row-status=\"shipped\"]) { display: none; }\n[data-status=\"processing\"] tbody tr:not([data-row-status=\"processing\"]) { display: none; }\n[data-status=\"refunded\"] tbody tr:not([data-row-status=\"refunded\"]) { display: none; }\n</style>", "react": "function Filter({\n caption = \"{{caption}}\",\n accent = \"{{accent}}\",\n status = \"{{status}}\",\n query = \"{{query}}\",\n caseSensitive = {{caseSensitive}},\n}) {\n const rows = [\n [\"#1042\", \"A. Whitfield\", \"shipped\", \"£64.00\"],\n [\"#1041\", \"R. Okafor\", \"processing\", \"£128.50\"],\n [\"#1040\", \"M. Iqbal\", \"shipped\", \"£22.00\"],\n [\"#1039\", \"S. Novak\", \"refunded\", \"£40.00\"],\n [\"#1038\", \"L. Duarte\", \"shipped\", \"£96.20\"],\n ];\n const visible = rows.filter((r) => status === \"all\" || r[2] === status);\n const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\n const pill = (key, label) => (\n <button key={key} type=\"button\" style={{\n border: `1px solid ${status === key ? accent : \"#24143040\"}`, background: status === key ? accent : \"#FAF7F2\",\n color: status === key ? \"#FAF7F2\" : \"#241430\", padding: \"5px 10px\", borderRadius: 999, font: \"inherit\", fontSize: 12, cursor: \"pointer\",\n }}>{label}</button>\n );\n return (\n <div style={{ maxWidth: 480, borderRadius: 10, border: \"1px solid #24143020\", overflow: \"hidden\", font: \"14px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\" }}>\n <div style={{ display: \"flex\", flexWrap: \"wrap\", alignItems: \"center\", gap: 8, padding: \"10px 14px\", borderBottom: \"1px solid #24143020\" }}>\n <div role=\"group\" aria-label=\"Filter by status\" style={{ display: \"flex\", gap: 6, flexWrap: \"wrap\" }}>\n {pill(\"all\", \"All\")}{pill(\"shipped\", \"Shipped\")}{pill(\"processing\", \"Processing\")}{pill(\"refunded\", \"Refunded\")}\n </div>\n {query && <span style={{ fontSize: 12, background: \"#24143012\", padding: \"4px 8px\", borderRadius: 6 }}>Search: \"{query}\"{caseSensitive ? \" (Aa)\" : \"\"}</span>}\n </div>\n <div style={{ overflowX: \"auto\" }}>\n <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n <caption style={{ textAlign: \"left\", fontWeight: 600, padding: \"10px 14px\" }}>{caption}</caption>\n <thead>\n <tr style={{ background: accent, color: \"#FAF7F2\" }}>\n {[\"Order\", \"Customer\", \"Status\", \"Total\"].map((h) => <th key={h} scope=\"col\" style={cell}>{h}</th>)}\n </tr>\n </thead>\n <tbody>\n {visible.map((row) => (\n <tr key={row[0]}>\n <td style={cell}>{row[0]}</td><td style={cell}>{row[1]}</td>\n <td style={cell}>{row[2][0].toUpperCase() + row[2].slice(1)}</td><td style={cell}>{row[3]}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n );\n}" }