Quick Filter / Global Search

1<template>
2  <div>
3    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center">
4      <input
5        type="text"
6        placeholder="Search..."
7        :value="searchText"
8        @input="searchText = ($event.target as HTMLInputElement).value"
9        style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 13px; min-width: 200px"
10      />
11      <button
12        @click="filterMode = 'simple'"
13        :style="{
14          padding: '6px 14px',
15          borderRadius: '6px',
16          border: filterMode === 'simple' ? '2px solid #3b82f6' : '1px solid #d1d5db',
17          background: filterMode === 'simple' ? '#eff6ff' : '#fff',
18          color: filterMode === 'simple' ? '#1d4ed8' : '#374151',
19          fontWeight: filterMode === 'simple' ? 600 : 400,
20          cursor: 'pointer',
21          fontSize: '13px',
22        }"
23      >
24        Simple
25      </button>
26      <button
27        @click="filterMode = 'smart'"
28        :style="{
29          padding: '6px 14px',
30          borderRadius: '6px',
31          border: filterMode === 'smart' ? '2px solid #3b82f6' : '1px solid #d1d5db',
32          background: filterMode === 'smart' ? '#eff6ff' : '#fff',
33          color: filterMode === 'smart' ? '#1d4ed8' : '#374151',
34          fontWeight: filterMode === 'smart' ? 600 : 400,
35          cursor: 'pointer',
36          fontSize: '13px',
37        }"
38      >
39        Smart
40      </button>
41      <button
42        @click="caseSensitive = !caseSensitive"
43        :style="{
44          padding: '6px 14px',
45          borderRadius: '6px',
46          border: caseSensitive ? '2px solid #3b82f6' : '1px solid #d1d5db',
47          background: caseSensitive ? '#eff6ff' : '#fff',
48          color: caseSensitive ? '#1d4ed8' : '#374151',
49          fontWeight: caseSensitive ? 600 : 400,
50          cursor: 'pointer',
51          fontSize: '13px',
52        }"
53      >
54        Case Sensitive
55      </button>
56    </div>
57    <SimpleTable
58      :default-headers="quickFilterConfig.headers"
59      :rows="quickFilterConfig.rows"
60      :height="height"
61      :theme="theme"
62      :quick-filter="{ text: searchText, mode: filterMode, caseSensitive }"
63    />
64  </div>
65</template>
66
67<script setup lang="ts">
68import { ref } from "vue";
69import {SimpleTable} from "@simple-table/vue";import type { Theme, QuickFilterMode } from "@simple-table/vue";
70import { quickFilterConfig } from "./quick-filter.demo-data";
71import "@simple-table/vue/styles.css";
72
73withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
74  height: "400px",
75});
76
77const searchText = ref("");
78const filterMode = ref<QuickFilterMode>("simple");
79const caseSensitive = ref(false);
80</script>

1import { Component, Input } from "@angular/core";
2import { FormsModule } from "@angular/forms";
3import {SimpleTableComponent} from "@simple-table/angular";import type { AngularHeaderObject, QuickFilterMode, Row, Theme } from "@simple-table/angular";
4import { quickFilterConfig } from "./quick-filter.demo-data";
5import "@simple-table/angular/styles.css";
6
7@Component({
8  selector: "quick-filter-demo",
9  standalone: true,
10  imports: [SimpleTableComponent, FormsModule],
11  template: `
12    <div>
13      <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center">
14        <input
15          type="text"
16          placeholder="Search..."
17          [(ngModel)]="searchText"
18          style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 13px; min-width: 200px"
19        />
20        <button
21          (click)="filterMode = 'simple'"
22          [style.padding]="'6px 14px'"
23          [style.borderRadius]="'6px'"
24          [style.border]="filterMode === 'simple' ? '2px solid #3b82f6' : '1px solid #d1d5db'"
25          [style.background]="filterMode === 'simple' ? '#eff6ff' : '#fff'"
26          [style.color]="filterMode === 'simple' ? '#1d4ed8' : '#374151'"
27          [style.fontWeight]="filterMode === 'simple' ? 600 : 400"
28          [style.cursor]="'pointer'"
29          [style.fontSize]="'13px'"
30        >
31          Simple
32        </button>
33        <button
34          (click)="filterMode = 'smart'"
35          [style.padding]="'6px 14px'"
36          [style.borderRadius]="'6px'"
37          [style.border]="filterMode === 'smart' ? '2px solid #3b82f6' : '1px solid #d1d5db'"
38          [style.background]="filterMode === 'smart' ? '#eff6ff' : '#fff'"
39          [style.color]="filterMode === 'smart' ? '#1d4ed8' : '#374151'"
40          [style.fontWeight]="filterMode === 'smart' ? 600 : 400"
41          [style.cursor]="'pointer'"
42          [style.fontSize]="'13px'"
43        >
44          Smart
45        </button>
46        <button
47          (click)="caseSensitive = !caseSensitive"
48          [style.padding]="'6px 14px'"
49          [style.borderRadius]="'6px'"
50          [style.border]="caseSensitive ? '2px solid #3b82f6' : '1px solid #d1d5db'"
51          [style.background]="caseSensitive ? '#eff6ff' : '#fff'"
52          [style.color]="caseSensitive ? '#1d4ed8' : '#374151'"
53          [style.fontWeight]="caseSensitive ? 600 : 400"
54          [style.cursor]="'pointer'"
55          [style.fontSize]="'13px'"
56        >
57          Case Sensitive
58        </button>
59      </div>
60      <simple-table
61        [rows]="rows"
62        [defaultHeaders]="headers"
63        [height]="height"
64        [theme]="theme"
65        [quickFilter]="{ text: searchText, mode: filterMode, caseSensitive: caseSensitive }"
66      ></simple-table>
67    </div>
68  `,
69})
70export class QuickFilterDemoComponent {
71  @Input() height: string | number = "400px";
72  @Input() theme?: Theme;
73
74  readonly rows: Row[] = quickFilterConfig.rows;
75  readonly headers: AngularHeaderObject[] = quickFilterConfig.headers;
76  searchText = "";
77  filterMode: QuickFilterMode = "simple";
78  caseSensitive = false;
79}
80
81
82// quick-filter.demo-data.ts
83// Self-contained demo table setup for this example.
84import type { AngularHeaderObject } from "@simple-table/angular";
85
86
87export const quickFilterHeaders: AngularHeaderObject[] = [
88  { accessor: "name", label: "Employee Name", width: 180, type: "string" },
89  { accessor: "age", label: "Age", width: 80, type: "number" },
90  { accessor: "department", label: "Department", width: 140, type: "string" },
91  { accessor: "salary", label: "Salary", width: 120, type: "number", valueFormatter: ({ value }) => `$${(value || 0).toLocaleString()}`, align: "right" },
92  { accessor: "status", label: "Status", width: 100, type: "string" },
93  { accessor: "location", label: "Location", width: 140, type: "string" },
94];
95
96export const quickFilterData = [
97  { id: 1, name: "Alice Johnson", age: 28, department: "Engineering", salary: 95000, status: "Active", location: "New York" },
98  { id: 2, name: "Bob Smith", age: 35, department: "Sales", salary: 75000, status: "Active", location: "Los Angeles" },
99  { id: 3, name: "Charlie Davis", age: 42, department: "Engineering", salary: 110000, status: "Active", location: "San Francisco" },
100  { id: 4, name: "Diana Prince", age: 31, department: "Marketing", salary: 82000, status: "Inactive", location: "Chicago" },
101  { id: 5, name: "Ethan Hunt", age: 29, department: "Sales", salary: 78000, status: "Active", location: "Boston" },
102  { id: 6, name: "Fiona Green", age: 38, department: "Engineering", salary: 105000, status: "Active", location: "Seattle" },
103  { id: 7, name: "George Wilson", age: 26, department: "Marketing", salary: 68000, status: "Active", location: "Austin" },
104  { id: 8, name: "Hannah Lee", age: 33, department: "Sales", salary: 88000, status: "Inactive", location: "Denver" },
105  { id: 9, name: "Isaac Chen", age: 27, department: "Engineering", salary: 92000, status: "Active", location: "San Diego" },
106  { id: 10, name: "Julia Brown", age: 30, department: "Marketing", salary: 72000, status: "Inactive", location: "Miami" },
107  { id: 11, name: "Kevin Davis", age: 28, department: "Sales", salary: 85000, status: "Active", location: "Phoenix" },
108  { id: 12, name: "Laura Garcia", age: 32, department: "Engineering", salary: 102000, status: "Active", location: "San Antonio" },
109];
110
111export const quickFilterConfig = {
112  headers: quickFilterHeaders,
113  rows: quickFilterData,
114  tableProps: { quickFilter: { text: "", mode: "simple" as const, caseSensitive: false } },
115} as const;
116

1<script lang="ts">
2  import {SimpleTable} from "@simple-table/svelte";  import type { Theme, QuickFilterMode } from "@simple-table/svelte";
3  import { quickFilterConfig } from "./quick-filter.demo-data";
4  import "@simple-table/svelte/styles.css";
5
6  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
7  let searchText = $state("");
8  let filterMode: QuickFilterMode = $state("simple");
9  let caseSensitive = $state(false);
10</script>
11
12<div>
13  <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center">
14    <input
15      type="text"
16      placeholder="Search..."
17      bind:value={searchText}
18      style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 13px; min-width: 200px"
19    />
20    <button
21      onclick={() => (filterMode = "simple")}
22      style="padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; border: {filterMode === 'simple' ? '2px solid #3b82f6' : '1px solid #d1d5db'}; background: {filterMode === 'simple' ? '#eff6ff' : '#fff'}; color: {filterMode === 'simple' ? '#1d4ed8' : '#374151'}; font-weight: {filterMode === 'simple' ? 600 : 400}"
23    >
24      Simple
25    </button>
26    <button
27      onclick={() => (filterMode = "smart")}
28      style="padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; border: {filterMode === 'smart' ? '2px solid #3b82f6' : '1px solid #d1d5db'}; background: {filterMode === 'smart' ? '#eff6ff' : '#fff'}; color: {filterMode === 'smart' ? '#1d4ed8' : '#374151'}; font-weight: {filterMode === 'smart' ? 600 : 400}"
29    >
30      Smart
31    </button>
32    <button
33      onclick={() => (caseSensitive = !caseSensitive)}
34      style="padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; border: {caseSensitive ? '2px solid #3b82f6' : '1px solid #d1d5db'}; background: {caseSensitive ? '#eff6ff' : '#fff'}; color: {caseSensitive ? '#1d4ed8' : '#374151'}; font-weight: {caseSensitive ? 600 : 400}"
35    >
36      Case Sensitive
37    </button>
38  </div>
39  <SimpleTable
40    defaultHeaders={quickFilterConfig.headers}
41    rows={quickFilterConfig.rows}
42    {height}
43    {theme}
44    quickFilter={{ text: searchText, mode: filterMode, caseSensitive }}
45  />
46</div>

1import { createSignal } from "solid-js";
2import {SimpleTable} from "@simple-table/solid";import type { Theme, QuickFilterMode } from "@simple-table/solid";
3import { quickFilterConfig } from "./quick-filter.demo-data";
4import "@simple-table/solid/styles.css";
5
6export default function QuickFilterDemo(props: { height?: string | number; theme?: Theme }) {
7  const [searchText, setSearchText] = createSignal("");
8  const [filterMode, setFilterMode] = createSignal<QuickFilterMode>("simple");
9  const [caseSensitive, setCaseSensitive] = createSignal(false);
10
11  const modeBtn = (mode: QuickFilterMode, label: string) => ({
12    padding: "6px 14px",
13    "border-radius": "6px",
14    border: filterMode() === mode ? "2px solid #3b82f6" : "1px solid #d1d5db",
15    background: filterMode() === mode ? "#eff6ff" : "#fff",
16    color: filterMode() === mode ? "#1d4ed8" : "#374151",
17    "font-weight": filterMode() === mode ? 600 : 400,
18    cursor: "pointer",
19    "font-size": "13px",
20  });
21
22  return (
23    <div>
24      <div style={{ display: "flex", "flex-wrap": "wrap", gap: "8px", "margin-bottom": "12px", "align-items": "center" }}>
25        <input
26          type="text"
27          placeholder="Search..."
28          value={searchText()}
29          onInput={(e) => setSearchText(e.currentTarget.value)}
30          style={{
31            padding: "6px 12px",
32            "border-radius": "6px",
33            border: "1px solid #d1d5db",
34            "font-size": "13px",
35            "min-width": "200px",
36          }}
37        />
38        <button onClick={() => setFilterMode("simple")} style={modeBtn("simple", "Simple")}>
39          Simple
40        </button>
41        <button onClick={() => setFilterMode("smart")} style={modeBtn("smart", "Smart")}>
42          Smart
43        </button>
44        <button
45          onClick={() => setCaseSensitive((prev) => !prev)}
46          style={{
47            padding: "6px 14px",
48            "border-radius": "6px",
49            border: caseSensitive() ? "2px solid #3b82f6" : "1px solid #d1d5db",
50            background: caseSensitive() ? "#eff6ff" : "#fff",
51            color: caseSensitive() ? "#1d4ed8" : "#374151",
52            "font-weight": caseSensitive() ? 600 : 400,
53            cursor: "pointer",
54            "font-size": "13px",
55          }}
56        >
57          Case Sensitive
58        </button>
59      </div>
60      <SimpleTable
61        defaultHeaders={quickFilterConfig.headers}
62        rows={quickFilterConfig.rows}
63        height={props.height ?? "400px"}
64        theme={props.theme}
65        quickFilter={{ text: searchText(), mode: filterMode(), caseSensitive: caseSensitive() }}
66      />
67    </div>
68  );
69}

1import { SimpleTableVanilla } from "simple-table-core";
2import type { Theme, QuickFilterMode } from "simple-table-core";
3import { quickFilterConfig } from "./quick-filter.demo-data";
4import "simple-table-core/styles.css";
5
6export function renderQuickFilterDemo(
7  container: HTMLElement,
8  options?: { height?: string | number; theme?: Theme }
9): SimpleTableVanilla {
10  let searchText = "";
11  let filterMode: QuickFilterMode = "simple";
12  let caseSensitive = false;
13
14  const wrapper = document.createElement("div");
15
16  const controlsRow = document.createElement("div");
17  controlsRow.style.cssText = "display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center";
18
19  const input = document.createElement("input");
20  input.type = "text";
21  input.placeholder = "Search...";
22  input.style.cssText = "padding:6px 12px;border-radius:6px;border:1px solid #d1d5db;font-size:13px;min-width:200px";
23  input.addEventListener("input", () => {
24    searchText = input.value;
25    table.update({ quickFilter: { text: searchText, mode: filterMode, caseSensitive } });
26  });
27  controlsRow.appendChild(input);
28
29  const tableContainer = document.createElement("div");
30  wrapper.appendChild(controlsRow);
31  wrapper.appendChild(tableContainer);
32  container.appendChild(wrapper);
33
34  const table = new SimpleTableVanilla(tableContainer, {
35    defaultHeaders: quickFilterConfig.headers,
36    rows: quickFilterConfig.rows,
37    height: options?.height ?? "400px",
38    theme: options?.theme,
39    quickFilter: { text: searchText, mode: filterMode, caseSensitive },
40  });
41
42  function applyBtnStyle(btn: HTMLButtonElement, active: boolean) {
43    btn.style.cssText = `padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;border:${active ? "2px solid #3b82f6" : "1px solid #d1d5db"};background:${active ? "#eff6ff" : "#fff"};color:${active ? "#1d4ed8" : "#374151"};font-weight:${active ? 600 : 400}`;
44  }
45
46  const simpleBtn = document.createElement("button");
47  simpleBtn.textContent = "Simple";
48  const smartBtn = document.createElement("button");
49  smartBtn.textContent = "Smart";
50  const caseBtn = document.createElement("button");
51  caseBtn.textContent = "Case Sensitive";
52
53  function updateButtons() {
54    applyBtnStyle(simpleBtn, filterMode === "simple");
55    applyBtnStyle(smartBtn, filterMode === "smart");
56    applyBtnStyle(caseBtn, caseSensitive);
57  }
58
59  simpleBtn.addEventListener("click", () => {
60    filterMode = "simple";
61    table.update({ quickFilter: { text: searchText, mode: filterMode, caseSensitive } });
62    updateButtons();
63  });
64  smartBtn.addEventListener("click", () => {
65    filterMode = "smart";
66    table.update({ quickFilter: { text: searchText, mode: filterMode, caseSensitive } });
67    updateButtons();
68  });
69  caseBtn.addEventListener("click", () => {
70    caseSensitive = !caseSensitive;
71    table.update({ quickFilter: { text: searchText, mode: filterMode, caseSensitive } });
72    updateButtons();
73  });
74
75  controlsRow.appendChild(simpleBtn);
76  controlsRow.appendChild(smartBtn);
77  controlsRow.appendChild(caseBtn);
78  updateButtons();
79
80  return table;
81}
82
83
84// quick-filter.demo-data.ts
85// Self-contained demo table setup for this example.
86import type { HeaderObject } from "simple-table-core";
87
88
89export const quickFilterHeaders: HeaderObject[] = [
90  { accessor: "name", label: "Employee Name", width: 180, type: "string" },
91  { accessor: "age", label: "Age", width: 80, type: "number" },
92  { accessor: "department", label: "Department", width: 140, type: "string" },
93  { accessor: "salary", label: "Salary", width: 120, type: "number", valueFormatter: ({ value }) => `$${(value || 0).toLocaleString()}`, align: "right" },
94  { accessor: "status", label: "Status", width: 100, type: "string" },
95  { accessor: "location", label: "Location", width: 140, type: "string" },
96];
97
98export const quickFilterData = [
99  { id: 1, name: "Alice Johnson", age: 28, department: "Engineering", salary: 95000, status: "Active", location: "New York" },
100  { id: 2, name: "Bob Smith", age: 35, department: "Sales", salary: 75000, status: "Active", location: "Los Angeles" },
101  { id: 3, name: "Charlie Davis", age: 42, department: "Engineering", salary: 110000, status: "Active", location: "San Francisco" },
102  { id: 4, name: "Diana Prince", age: 31, department: "Marketing", salary: 82000, status: "Inactive", location: "Chicago" },
103  { id: 5, name: "Ethan Hunt", age: 29, department: "Sales", salary: 78000, status: "Active", location: "Boston" },
104  { id: 6, name: "Fiona Green", age: 38, department: "Engineering", salary: 105000, status: "Active", location: "Seattle" },
105  { id: 7, name: "George Wilson", age: 26, department: "Marketing", salary: 68000, status: "Active", location: "Austin" },
106  { id: 8, name: "Hannah Lee", age: 33, department: "Sales", salary: 88000, status: "Inactive", location: "Denver" },
107  { id: 9, name: "Isaac Chen", age: 27, department: "Engineering", salary: 92000, status: "Active", location: "San Diego" },
108  { id: 10, name: "Julia Brown", age: 30, department: "Marketing", salary: 72000, status: "Inactive", location: "Miami" },
109  { id: 11, name: "Kevin Davis", age: 28, department: "Sales", salary: 85000, status: "Active", location: "Phoenix" },
110  { id: 12, name: "Laura Garcia", age: 32, department: "Engineering", salary: 102000, status: "Active", location: "San Antonio" },
111];
112
113export const quickFilterConfig = {
114  headers: quickFilterHeaders,
115  rows: quickFilterData,
116  tableProps: { quickFilter: { text: "", mode: "simple" as const, caseSensitive: false } },
117} as const;
118