Filter

Description

filtering data is possible by passing the attribute filter in the initialDataState object

Structure

const initialDataState = {
  filter: [
    {
      id: "age",
      fieldType: "integer",
      filterFn: "gt",
      value: 25,
    },
  ],
};

this example filters the data by only showing people with age superior than 25

for full documentation, please refer to DataStateFilter

Example

Code

import CustomListView from "@components/custom-list-view/CustomListView";
import { Avatar } from "@tag/tag-components-react-v4";

const Demo = () => {
  const initialDataState = {
    filter: [
      {
        id: "age",
        fieldType: "integer",
        filterFn: "gt",
        value: 25,
      },
    ],
  };

  const data = [
    { name: "John", age: 21, gender: "M" },
    { name: "Alice", age: 28, gender: "F" },
    { name: "Bob", age: 34, gender: "M" },
    { name: "Clara", age: 22, gender: "F" },
    { name: "Evelyn", age: 25, gender: "F" },
  ];

  return (
    <CustomListView
      data={data}
      initialDataState={initialDataState}
      renderItem={(element) => (
        <div className="person-info">
          <span>
            <Avatar
              src={
                element.gender == "M"
                  ? "https://images.pexels.com/photos/2287252/pexels-photo-2287252.jpeg"
                  : "https://images.pexels.com/photos/1239288/pexels-photo-1239288.jpeg"
              }
            />
          </span>
          <span className="person-title">
            <strong>{element.name}</strong> (age : {element.age})
          </span>
        </div>
      )}
    />
  );
};

Result

Alice (age : 28)

Bob (age : 34)