Filter Showcase

Source code

TypeScript

src/components/filter-showcase/FilterAdvanced.ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
defineCustomElements();

import { currentTheme, useRandomData } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();
export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');

  grid.source = createRandomData(100);
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
      filter: ['number', 'slider']
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
  ];
  // Define plugin
  grid.plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];

  grid.additionalData = {
    stretch: 'all'
  };
  grid.filter = {};
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue

src/components/filter-showcase/FilterAdvanced.vue

<template>
  <div class="mb-4">
    <label for="filterExpression" class="text-gray-700 font-medium">
    Enter Filter Expression
  </label>
  <div class="flex gap-2 mt-1">
    <textarea
      id="filterExpression"
      rows="2"
      :class="{ 'bg-white border-gray-300': !isDark, 'bg-gray-800 border-gray-600': isDark }"
      class="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"
      style="width: 100%"
      type="text"
      placeholder="Enter filters (e.g., fullName contains 't' and email contains '@gmail')"
      v-model="filterExpression"
    />
  <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"
    @click="applyTextFilters"
  >
    Apply
  </button></div>
  </div>
  <VGrid
    :theme="isDark ? 'darkCompact' : 'compact'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    :colSize="250"
    :additionalData="additionalData"
    :filter="filter"
    @afterfilterapply="sync"
    hide-attribution
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';
import { makeData, allColumns } from '../composables/makeData';
import {
  type ColumnFilterConfig,
  VGrid,
} from '@revolist/vue3-datagrid';
import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { parseFilterExpression, syncFiltersToTextInput } from './parse.filters';

const { isDark } = currentThemeVue();

const columns = ref(allColumns());
columns.value.splice(0, 1);
const rows = ref(makeData(1000));

const plugins = ref([ColumnStretchPlugin]);


const additionalData = ref({
  stretch: 'all',
});

const filter = ref<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' },
    ],
  },
});

// Text filter state
const filterExpression = ref(''); // Stores the user-entered filter expression

/**
 * Parse user-entered filter expression and update the filter config.
 */
function applyTextFilters() {
  const parsedFilters = parseFilterExpression(filterExpression.value);
  filter.value = {
    multiFilterItems: parsedFilters,
  };
}

function sync(e: CustomEvent) {
  filterExpression.value = syncFiltersToTextInput(e);
}
</script>

React

src/components/filter-showcase/FilterAdvanced.tsx

import { useState, useMemo, useRef } from 'react';
import { RevoGrid, type DataType } from '@revolist/react-datagrid';
import {
  AdvanceFilterPlugin,
  ColumnStretchPlugin,
} from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';

function FilterAdvanced() {
  const { isDark } = currentTheme();
  const { createRandomData } = useRandomData();
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [source] = useState<DataType[]>(createRandomData(100));

  const columns = useMemo(
    () => [
      {
        name: '🆔 ID',
        prop: 'id',
        filter: ['number', 'slider'],
      },
      {
        name: '🍎 Fruit',
        prop: 'name',
      },
    ],
    []
  );

  const additionalData = useMemo(
    () => ({
      stretch: 'all',
      filter: {},
    }),
    []
  );

  return (
    <RevoGrid
      ref={gridRef}
      columns={columns}
      source={source}
      additionalData={additionalData}
      hide-attribution
      theme={isDark() ? 'darkCompact' : 'compact'}
      plugins={[AdvanceFilterPlugin, ColumnStretchPlugin]}
    />
  );
}

export default FilterAdvanced;

Angular

src/components/filter-showcase/FilterAdvancedAngular.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { AdvanceFilterPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

@Component({
  selector: 'filter-advanced-angular',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [columns]="columns"
      [source]="source"
      [additionalData]="additionalData"
      [filter]="filter"
      [hideAttribution]="true"
      [theme]="theme"
      [plugins]="plugins"
      style="height: 400px;"
    ></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
})
export class FilterAdvancedGridComponent {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  source = useRandomData().createRandomData(100);

  columns = [
    {
      name: '🆔 ID',
      prop: 'id',
      filter: ['number', 'slider'],
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
  ];

  additionalData = {
    stretch: 'all',
  };

  filter = {};
  plugins = [AdvanceFilterPlugin, ColumnStretchPlugin];
}