Demo

Svelte

src/components/filter-showcase/FilterAdvanced.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { RevoGrid, type ColumnFilterConfig } from '@revolist/svelte-datagrid';
  import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
  import {
    parseFilterExpression,
    syncFiltersToTextInput,
  } from './parse.filters';
  import { makeData, allColumns } from '../composables/makeData';
  import { currentTheme } from '../composables/useRandomData';
  const { isDark } = currentTheme();

  let filterExpression = ''; // Stores the user-entered filter expression
  let theme = 'compact'; // Default theme

  const columns = [...allColumns()];
  const rows = [...makeData(1000)];

  const plugins = [ColumnStretchPlugin];
  const additionalData = { stretch: 'all' };

  let filter: ColumnFilterConfig = {
    multiFilterItems: {
      fullName: [{ id: 0, type: 'contains', value: 't', relation: 'or' }],
      email: [
        { id: 1, type: 'contains', value: '@gmail', relation: 'or' },
        { id: 1, type: 'contains', value: '@yahoo', relation: 'and' },
        { id: 1, type: 'contains', value: '.com', relation: 'and' },
      ],
    },
  };

  function applyTextFilters() {
    const parsedFilters = parseFilterExpression(filterExpression);
    filter = { multiFilterItems: parsedFilters };
  }

  function sync(e) {
    filterExpression = syncFiltersToTextInput(e);
  }

  sync({ detail: filter });

  onMount(() => {
    theme = isDark() ? 'darkCompact' : 'compact';
  });
</script>

<div class="filter-input">
  <label for="filterExpression">Enter Filter Expression:</label>
  <div class="flex gap-2 mt-1">
    <textarea
      class:bg-white={!isDark()}
      class:border-gray-300={!isDark()}
      class:bg-gray-800={isDark()}
      class:border-gray-600={isDark()}
      class="grow p-4 text-sm border rounded-lg shadow-sm focus:ring focus:ring-blue-200 focus:outline-none focus:border-blue-400 placeholder-gray-400"
      id="filterExpression"
      rows="2"
      bind:value={filterExpression}
      placeholder="Enter filters (e.g., fullName contains 't' and email contains '@gmail')"
    ></textarea>
    <button
      class="self-start rounded-md bg-slate-800 mb-2 py-1.5 px-3 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      on:click={applyTextFilters}>Apply</button
    >
  </div>
</div>

<div
  class:border-gray-300={!isDark()}
  class="mt-2 rounded-lg shadow-sm h-[70vh]"
>
  <RevoGrid
    {theme}
    {columns}
    source={rows}
    {plugins}
    colSize={250}
    {additionalData}
    {filter}
    on:afterfilterapply={sync}
    hideAttribution={true}
  />
</div>

<style>
  :global(revo-grid) {
    border-radius: 10px;
  }
</style>