can you add an example with function components and hooks

[Amishmaqbool]

No description provided.

[madooei]

Does this help?

import React, { useState } from "react";
import ReactFilterBox, { SimpleResultProcessing } from "react-filter-box";

const options = [
  {
    columnField: "Name",
    type: "text",
  },
  {
    columnField: "Description",
    type: "text",
  },
  {
    columnField: "Status",
    type: "selection", // when using type selection, it will automatically suggest all possible values
  },
  {
    columnText: "Email @",
    columnField: "Email",
    type: "text",
  },
];

function Demo(props) {
  const [data, setData] = useState([]); // pass your data in here instead of empty array

  const onParseOk = (expressions) => {
    const newData = new SimpleResultProcessing(options).process(
      data,
      expressions
    );
    // your new data here, which is filtered out of the box by SimpleResultProcessing
    setData(newData);
  };

  return (
    <>
      <ReactFilterBox
        data={data}
        options={options}
        onParseOk={onParseOk}
      />
    </>
  );
}

export default Demo;

[Amishmaqbool]

does it runs on next js

[madooei]

does it runs on next js

I don't know. try it!

[Amishmaqbool]

nope this package doesn't support next js or to be more precise SSR Frontend architecture

[ChandraAvira]

Does this help?

import React, { useState } from "react";
import ReactFilterBox, { SimpleResultProcessing } from "react-filter-box";

const options = [
  {
    columnField: "Name",
    type: "text",
  },
  {
    columnField: "Description",
    type: "text",
  },
  {
    columnField: "Status",
    type: "selection", // when using type selection, it will automatically suggest all possible values
  },
  {
    columnText: "Email @",
    columnField: "Email",
    type: "text",
  },
];

function Demo(props) {
  const [data, setData] = useState([]); // pass your data in here instead of empty array

  const onParseOk = (expressions) => {
    const newData = new SimpleResultProcessing(options).process(
      data,
      expressions
    );
    // your new data here, which is filtered out of the box by SimpleResultProcessing
    setData(newData);
  };

  return (
    <>
      <ReactFilterBox
        data={data}
        options={options}
        onParseOk={onParseOk}
      />
    </>
  );
}

export default Demo;

HI, Is there a way to clear the input filed data after the search or on clicking the custom clear button.