add customer filter for search

[wanlwanl]

Add custom filter for search

Interface

export interface SearchConfig {
  keyword?: string;
  enabled?: boolean;
  ignoreHiddenColumns?: boolean;
  debounceTimeout?: number;
  selector?: (cell: TCell, rowIndex: number, cellIndex: number) => string;
  server?: {
    url?: (prevUrl: string, keyword: string) => string;
    body?: (prevBody: BodyInit, keyword: string) => BodyInit;
  };
  filter?: (keyword: string, rows: Row[]) => Row[];
}

Usage

var grid = new Grid({
      columns: ['a', 'b', 'c'],
      data: [
        [1, 2, 3],
        [4, 5, 6],
      ],
      search: {
        enabled: true,
        filter: (keyword, rows) => {
          const filtered = rows.filter((row) =>
            row.cells.some((cell) => cell.data == parseInt(keyword, 10) + 1),
          );
          return filtered;
        },
      },
    }).render(ref.current);

Sample

Filter rows by number x that contains x+1

1. go to folder tests/dev-server
2. udpate src/index.js to:

import './style';
import { Grid } from 'gridjs';
import 'gridjs/dist/theme/mermaid.css';
import { useEffect, useRef } from 'preact/hooks';

export default function App() {
  const ref = useRef();

  useEffect(() => {
    new Grid({
      columns: ['a', 'b', 'c'],
      data: [
        [1, 2, 3],
        [4, 5, 6],
      ],
      search: {
        enabled: true,
        filter: (keyword, rows) => {
          const filtered = rows.filter((row) =>
            row.cells.some((cell) => cell.data == parseInt(keyword, 10) + 1),
          );
          console.log('filtered', filtered);
          return filtered;
        },
      },
    }).render(ref.current);
  });

  return (
    <div id="wrapper">
      <h1>Hello, World!</h1>
      <div id="container" ref={ref} />
    </div>
  );
}

3. npm run start
4. input 3 in search box, the table will show the 2nd row (4,5,6) only

[wanlwanl]

@afshinm hey! check this out and tell me what do you think about it.