react-icons/fa#FaSearch JavaScript Examples

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="product-list__button" to={`/product/view/${value}`}>
      <FaSearch className="product-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="product-list__button" to={`/product/update/${value}`}>
      <FaEdit className="product-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="product-list__button" to={`/product/remove/${value}`}>
      <FaTrash className="product-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton}
      {editButton}
      {removeButton}
    </span>
  );
}

export function Search() {
  const [searchTerm, setSearchTerm] = React.useState('');
  const { search } = useLocation();
  const c = queryString.parse(search)?.c || '';

  const handleSubmit = e => {
    e.preventDefault();

    if (c) {
      navigate(
        `/all-products?s=${encodeURIComponent(
          searchTerm
        )}&c=${encodeURIComponent(c)}`
      );
    } else {
      navigate(`/all-products?s=${encodeURIComponent(searchTerm)}`);
    }
  };

  return (
    <SearchForm onSubmit={handleSubmit}>
      <Input
        value={searchTerm}
        onChange={e => setSearchTerm(e.currentTarget.value)}
        placeholder="Search"
      />
      <Button>
        <FaSearch />
      </Button>
    </SearchForm>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="producttype-list__button" to={`/producttype/view/${value}`}>
      <FaSearch className="producttype-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="producttype-list__button" to={`/producttype/update/${value}`}>
      <FaEdit className="producttype-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="producttype-list__button" to={`/producttype/remove/${value}`}>
      <FaTrash className="producttype-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

export default function NoteSearchInput({ setSearchQuery, noSearchResults ,isGridView }) {
    return (
        <NoteSearchContainer isGridView={isGridView}>
            <NoteSearchInputDiv noSearchResults={noSearchResults}>
                <FaSearch />
                <SearchNoteInput type="text" placeholder="Search here.." onChange={(e) => setSearchQuery(e.target.value)} />
                <NoSearchResultFeedback>
                    <span>{noSearchResults && "no results"}</span>
                </NoSearchResultFeedback>
            </NoteSearchInputDiv>
        </NoteSearchContainer>
    );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="provider-list__button" to={`/producttype/view/${value}`}>
      <FaSearch className="provider-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="provider-list__button" to={`/producttype/update/${value}`}>
      <FaEdit className="provider-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="provider-list__button" to={`/producttype/remove/${value}`}>
      <FaTrash className="provider-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="provider-list__button" to={`/provider/view/${value}`}>
      <FaSearch className="provider-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="provider-list__button" to={`/provider/update/${value}`}>
      <FaEdit className="provider-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="provider-list__button" to={`/provider/remove/${value}`}>
      <FaTrash className="provider-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

SearchForm = ({ displaySpan }) => {
    const [user, updateUser] = useState("");
    const history = useHistory();

    const onFormSubmit = async (event, user) => {
        event.preventDefault();

        // If value of user is not blank then only go to next page
        if (user) {
            history.push(`/user/${user}`);
        }
    };

    return (
        <Form onSubmit={(e) => onFormSubmit(e, user)} displaySpan={displaySpan}>
            <Span> ~ $ git --view </Span>
            <Input
                value={user}
                onChange={(e) => updateUser(e.target.value)}
                type='text'
                placeholder='Enter Github Username'
            />
            <Button>
                <FaSearch />
            </Button>
        </Form>
    );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="product-list__button" to={`/product-type/view/${value}`}>
      <FaSearch className="product-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="product-list__button" to={`/product-type/update/${value}`}>
      <FaEdit className="product-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="product-list__button" to={`/product-type/remove/${value}`}>
      <FaTrash className="product-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton}
      {editButton}
      {removeButton}
    </span>
  );
}

renderToolbar = ({ value }) => {
  let viewButton = (
    <Link className="store-list__button" to={`/store/view/${value}`}>
      <FaSearch className="store-list__button-icon" />
    </Link>
  );

  let editButton = (
    <Link className="store-list__button" to={`/store/update/${value}`}>
      <FaEdit className="store-list__button-icon" />
    </Link>
  );

  let removeButton = (
    <Link className="store-list__button" to={`/store/remove/${value}`}>
      <FaTrash className="store-list__button-icon" />
    </Link>
  );

  return (
    <span>
      {viewButton} {editButton} {removeButton}
    </span>
  );
}

BannerHosting= () => {
  return (
    <BannerSectionWrapper>
      <img src={imgHero1} alt="img" className="section-particle one"/>
      <ParticleComponent />
      <Container fullWidthSM>
        <Row Vcenter={true}>
          <Col lg={6}>
            <SectionTitle
              className="section-title"
              UniWidth="100%"
            >
              <h4>Save up to <span>99%</span> with our holiday Deals</h4>
              <h1>
                We provide the best web hosting  
                 solution around the world
              </h1>
              <p>
              join with us by one click and build beautifull apps <br/>
                for your startsup, company
              </p>
            </SectionTitle>
            <div className="domain-search-block">
              <div className="search-box">
                <input type='text' placeholder='Search domain' />
                <Button className="src-btn">
                  <FaSearch />
                </Button>
              </div>
              <div className="domain-extention-block">
                <span className="com">
                  .com
                </span>
                <span className="org">
                  .org
                </span>
                <span className="net">
                  .net
                </span>
                <span className="dev">
                  .dev
                </span>
                <span className="xyz">
                  .xyz
                </span>
              </div>
            </div>
          </Col>
          <Col lg={6}>
            <div className="hero-img-block">
              <img src={imgHero2} alt="img" />
            </div>
          </Col>
        </Row>
      </Container>
    </BannerSectionWrapper>
  );
}

Component = () => {
  let data = { nodes };

  const chakraTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(chakraTheme);

  const [search, setSearch] = React.useState('');

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  data = {
    nodes: data.nodes.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
  };

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ];

  return (
    <div>
      <Stack spacing={10}>
        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaSearch style={{ color: '#4a5568' }} />}
          />
          <Input placeholder="Search Task" value={search} onChange={handleSearch} />
        </InputGroup>
      </Stack>
      <br />

      <Box p={3} borderWidth="1px" borderRadius="lg">
        <CompactTable columns={COLUMNS} data={data} theme={theme} />
      </Box>

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </div>
  );
}

Component = () => {
  let data = { nodes };

  const mantineTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(mantineTheme);

  const [search, setSearch] = React.useState('');

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  data = {
    nodes: data.nodes.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
  };

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ];

  return (
    <>
      <Group mx={10}>
        <TextInput
          placeholder="Search Task"
          value={search}
          icon={<FaSearch />}
          onChange={handleSearch}
        />
      </Group>

      <CompactTable columns={COLUMNS} data={data} theme={theme} />

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}

Component = () => {
  let data = { nodes };

  const materialTheme = getTheme(DEFAULT_OPTIONS);
  const theme = useTheme(materialTheme);

  const [search, setSearch] = React.useState('');

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  data = {
    nodes: data.nodes.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
  };

  const COLUMNS = [
    { label: 'Task', renderCell: (item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item) => item.type },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item) => item.nodes?.length },
  ];

  return (
    <>
      <Stack spacing={10}>
        <TextField label="Search Task" value={search} icon={<FaSearch />} onChange={handleSearch} />
      </Stack>
      <br />

      <CompactTable columns={COLUMNS} data={data} theme={theme} />

      <br />
      <DocumentationSee anchor={'Features/' + key} />
    </>
  );
}

Navbar = (props) => {
  const [searchText, setSearchText] = useState("");
  const [open, setOpen] = useState(false);
  const [openProfile, setOpenProfile] = useState(false);

  return (
    <>
      <nav className={classes.Navbar}>
        <div className={classes.NavContent}>
          <Title title="Devagram" />
          <div className={classes.Search}>
            <input
              type="text"
              value={searchText}
              onChange={setSearchText}
              name="search"
              required
              placeholder="Search"
              aria-labelledby="label-search"
            />
            <Link to="#">
              <FaSearch size="1.2em" style={{ color: "#aaa" }} />
            </Link>
          </div>
          <div className={classes.Options}>
            <div className={classes.Option}>
              <Link to="#">
                <FaInbox style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/feeds">
                <FaCompass style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/connect">
                <FaUsers style={{ color: "black" }} />
              </Link>
            </div>
            <div className={classes.Option}>
              <Link to="/jobsAndHack">
                <AiFillCode style={{ color: "black" }} />
              </Link>
            </div>
            <div
              className={classes.Option}
              onClick={() => setOpenProfile(!openProfile)}
            >
              <CgProfile style={{ color: "black", cursor: "pointer" }} />
            </div>
            <div
              className={(classes.Option, classes.Burger)}
              onClick={() => setOpen(!open)}
            >
              <FaHamburger style={{ color: "black", cursor: "pointer" }} />
            </div>
          </div>
        </div>
        <div
          className={[
            classes.ProfileOptions,
            openProfile ? classes.Open : "",
          ].join(" ")}
        >
          <div className={classes.ProfileOption}>
            <NavLink to="/dashboard" activeClassName={classes.selected}>
              <FaHome />
              <span>Home</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="#" activeClassName={classes.selected}>
              <FaSearch />
              <span>Search</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="#" activeClassName={classes.selected}>
              <FaPlus />
              <span>Create Post</span>
            </NavLink>
          </div>
          <div className={classes.ProfileOption}>
            <NavLink to="/profile" activeClassName={classes.selected}>
              <FaUser />
              <span>Profile</span>
            </NavLink>
          </div>
        </div>
        <div
          className={[classes.SmallScreen, open ? classes.Open : ""].join(" ")}
        >
          <div className={classes.SmallOption}>
            <Link to="/dashboard">
              <FaHome style={{ color: "black" }} />
              <span>Home</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="#">
              <FaInbox style={{ color: "black" }} />
              <span>Inbox</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/feeds">
              <FaCompass style={{ color: "black" }} />
              <span>Explore-feeds</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/connect">
              <FaUsers style={{ color: "black" }} />
              <span>Connect</span>
            </Link>
          </div>
          <div className={classes.SmallOption}>
            <Link to="/jobsAndHack">
              <AiFillCode style={{ color: "black" }} />
              <span>jobs-hackathons</span>
            </Link>
          </div>
        </div>
      </nav>
    </>
  );
}

function SearchInput(props) {
  const [text, setText] = React.useState("")
  const [focused, setFocused] = React.useState(false)

  const data = useStaticQuery(graphql`
    query LayoutQuery {
      site {
        siteMetadata {
          title
          texts {
            searchPlaceholderText
          }
        }
      }
      articles: allMarkdownRemark {
        nodes {
          id
          fields {
            slug
            collection {
              icon
            }
          }
          frontmatter {
            title
            description
          }
          headings {
            # depth
            value
          }
          # excerpt(format: PLAIN)
        }
      }
    }
  `)

  const items = data.articles.nodes

  const fuse = React.useMemo(
    () =>
      new Fuse(items, {
        shouldSort: true,
        tokenize: true,
        threshold: 0.6,
        location: 0,
        distance: 100,
        minMatchCharLength: 1,
        keys: [
          "frontmatter.title",
          "frontmatter.description",
          "headings.value",
        ],
      }),
    [items]
  )

  const [inputItems, setInputItems] = React.useState(data.articles.nodes)

  const combobox = useCombobox({
    items: inputItems,
    onInputValueChange: ({ inputValue }) => {
      setInputItems(fuse.search(inputValue).map((node) => node.item))
    },
    itemToString: (node) => (node ? node.frontmatter.title : ""),
    onSelectedItemChange: ({ selectedItem }) => {
      navigate(selectedItem.fields.slug)
    },
  })

  return (
    <div sx={{ position: "relative" }} {...combobox.getComboboxProps()}>
      <label
        htmlFor="search"
        {...combobox.getLabelProps({
          htmlFor: "search",
        })}
        sx={{
          position: "absolute",
          left: "18pt",
          top: "0",
          bottom: "0",
          display: "flex",
          alignItems: "center",
          cursor: "text",
        }}
      >
        <FaSearch color={focused ? "#828A97" : "rgba(255,255,255,0.9)"} />
      </label>
      <input
        id="search"
        type="text"
        value={text}
        autoFocus
        onChange={(event) => setText(event.target.value)}
        placeholder={data.site.siteMetadata.texts.searchPlaceholderText}
        autoComplete="off"
        sx={{
          backgroundColor: "rgba(255,255,255,0.2)",
          transition: "background .4s, box-shadow .2s",
          width: "100%",
          padding: "20px 32px 21px 56px",
          background: "rgba(255,255,255,0.1)",
          border: "none",
          outline: "none",
          color: "searchTextColor",
          fontSize: "18px",
          lineHeight: "18px",
          borderRadius: 2,
          "&:focus": {
            backgroundColor: "white",
            boxShadow: "0 10px 20px rgba(0,0,0,0.14)",
            color: "searchTextFocusColor",
          },
          "::placeholder": {
            color: "searchTextPlaceholderColor",
          },
          "&:focus::placeholder": {
            color: "searchTextFocusPlaceholderColor",
          },
        }}
        {...combobox.getInputProps({
          id: "search",
          onFocus: () => setFocused(true),
          onBlur: () => setFocused(false),
        })}
      />
      <div
        {...combobox.getMenuProps()}
        sx={{
          position: "absolute",
          left: 0,
          right: 0,
          top: "calc(20px + 21px + 18px)",
          alignItems: "center",
          cursor: "text",
          background: "white",
          color: "comboboxColor",
          zIndex: 4,
          borderBottomLeftRadius: 2,
          borderBottomRightRadius: 2,
          boxShadow: "0 3px 8px 0 rgba(0,0,0,0.03)",
        }}
      >
        {combobox.isOpen &&
          inputItems.map((node, index) => {
            // skip drafts and "hidden" articles (ones without a collection)
            if (!node.fields || !node.fields.collection) return null

            const icon = jsx(
              icons[node.fields.collection.icon],
              { sx: { color: "iconColor" }, size: "2rem" },
              null
            )
            return (
              <Link
                key={node.id}
                to={node.fields.slug}
                sx={{
                  display: "flex",
                  pl: 3,
                  pr: 5,
                  py: 3,
                  textDecoration: "none",
                  background:
                    combobox.highlightedIndex === index ? "#E5E5E5" : "initial",
                  "&:hover": {
                    textDecoration: "none",
                  },
                }}
                {...combobox.getItemProps({ item: node, index })}
              >
                <div
                  sx={{
                    display: ["none", "flex"],
                    alignItems: "center",
                    pr: 3,
                  }}
                >
                  {icon}
                </div>
                <div sx={{ flex: "auto" }}>
                  <h3 sx={{ my: 0, fontSize: 3 }}>{node.frontmatter.title}</h3>
                  <p
                    sx={{
                      my: 0,
                      color: "articleDescriptionColor",
                      fontSize: [1, 2],
                    }}
                  >
                    {node.frontmatter.description}
                  </p>
                </div>
              </Link>
            )
          })}
      </div>
    </div>
  )
}

SeideBar = () => {
  return (
    <BlogSideBarWrapper>
      <div className="sidebar-widgets">
        <div className="search-box">
          <input type="text" placeholder="Search here..." />
          <Button>
            <FaSearch />
          </Button>
        </div>
      </div>

      <div className="sidebar-widgets recent-post">
        <div className="widgets-title">
          <h3>Latest Post</h3>
        </div>
        <div className="recent-post-block">
          <img src={WdThumb1} alt="prime-app" />
          <div className="recent-post-content-block">
            <Link to="#">
              <h3> Now led tedious shy. </h3>
            </Link>
            <div className="post-meta-block">
              By: <Link to="#">Admin</Link>
              <Link to="#">Aug 07, 2020</Link>
            </div>
          </div>
        </div>

        <div className="recent-post-block">
          <img src={WdThumb2} alt="prime-app" />
          <div className="recent-post-content-block">
            <Link to="#">
              <h3> Now led tedious shy. </h3>
            </Link>
            <div className="post-meta-block">
              By: <Link to="#">Admin</Link>
              <Link to="#">Aug 07, 2020</Link>
            </div>
          </div>
        </div>

        <div className="recent-post-block">
          <img src={WdThumb3} alt="prime-app" />
          <div className="recent-post-content-block">
            <Link to="#">
              <h3> Now led tedious shy. </h3>
            </Link>
            <div className="post-meta-block">
              By: <Link to="#">Admin</Link>
              <Link to="#">Aug 07, 2020</Link>
            </div>
          </div>
        </div>

        <div className="recent-post-block">
          <img src={WdThumb1} alt="prime-app" />
          <div className="recent-post-content-block">
            <Link to="#">
              <h3> Now led tedious shy. </h3>
            </Link>
            <div className="post-meta-block">
              By: <Link to="#">Admin</Link>
              <Link to="#">Aug 07, 2020</Link>
            </div>
          </div>
        </div>
      </div>

      <div className="sidebar-widgets catagorie">
        <div className="widgets-title">
          <h3>Categories</h3>
        </div>
        <ul>
          <li>
            <Link to="#">
              <span>Development</span>
              <em>(20)</em>
            </Link>
          </li>
          <li>
            <Link to="#">
              <span>Technology</span>
              <em>(12)</em>
            </Link>
          </li>
          <li>
            <Link to="#">
              <span>Testing</span>
              <em>(7)</em>
            </Link>
          </li>
          <li>
            <Link to="#">
              <span>Tech</span>
              <em>(11)</em>
            </Link>
          </li>
          <li>
            <Link to="#">
              <span>Block</span>
              <em>(14)</em>
            </Link>
          </li>
          <li>
            <Link to="#">
              <span>App</span>
              <em>(18)</em>
            </Link>
          </li>
        </ul>
      </div>
      <div className="sidebar-widgets tags">
        <div className="widgets-title">
          <h3>Tags</h3>
        </div>
        <ul>
          <li>
            <Link to="#">Development</Link>
          </li>
          <li>
            <Link to="#">Technology</Link>
          </li>
          <li>
            <Link to="#">Testing</Link>
          </li>
          <li>
            <Link to="#">App Landing</Link>
          </li>
          <li>
            <Link to="#">App Landing</Link>
          </li>
          <li>
            <Link to="#">Science</Link>
          </li>
        </ul>
      </div>
    </BlogSideBarWrapper>
  );
}

export default function SearchBox() {
  return (
    <>
      <div className="search-box">
        <button className="search-button">
          <FaSearch color="#D8D8D8" size="15px" />
        </button>
        <input
          id="search"
          type="text"
          name="search"
          placeholder="Search goods"
        />
        <select id="categories-search" name="categories-search">
          <option value="" selected>
            Category
          </option>
          <option value="#">Desktop</option>
            <option value="#">Smartphone</option>
            <option value="#">Watches</option>
            <option value="#">Games</option>
            <option value="#">Laptop</option>
            <option value="#">Keyboards</option>
            <option value="#">TV & Video</option>
            <option value="#">Accessories</option>
        </select>
      </div>
      <style jsx>{`
        .search-box {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding-left: 12px;
          padding-right: 12px;
          height: 42px;
          background: #ffffff;
          border: 2px solid #f5f5f5;
          box-sizing: border-box;
          border-radius: 4px;
        }
        .search-box .search-button {
          display: flex;
          align-items: center;
          background: none;
          border: none;
          height: 100%;
        }
        .search-box .search-button:focus {
          outline: none;
        }
        .search-box .search-button:hover {
          opacity: 40%;
        }
        .search-box input {
          width: 75%;
          height: 100%;
          border: none;
          padding-left: 8px;
        }
        .search-box input:focus {
          outline: none;
        }
        .search-box select {
          align-self: flex-end;
          max-width: 120px;
          height: 100%;
          text-transform: uppercase;
          font-style: normal;
          font-weight: 900;
          font-size: 10px;
          letter-spacing: 1px;
          color: #b2b2b2;
          border: none;
          background: none;
        }
        .search-box select:focus {
          outline: none;
        }
      `}</style>
    </>
  );
}

Component = () => {
  const [data, setData] = React.useState({ nodes });

  //* Theme *//

  const chakraTheme = getTheme({
    ...DEFAULT_OPTIONS,
    striped: true,
  });
  const customTheme = {
    Table: `
      --data-table-library_grid-template-columns:  64px repeat(5, minmax(0, 1fr));

      margin: 16px 0px;
    `,
  };
  const theme = useTheme([chakraTheme, customTheme]);

  //* Resize *//

  const resize = { resizerHighlight: '#dee2e6' };

  //* Pagination *//

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 4,
    },
    onChange: onPaginationChange,
  });

  function onPaginationChange(action, state) {
    console.log(action, state);
  }

  //* Search *//

  const [search, setSearch] = React.useState('');

  useCustom('search', data, {
    state: { search },
    onChange: onSearchChange,
  });

  function onSearchChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Filter *//

  const [isHide, setHide] = React.useState(false);

  useCustom('filter', data, {
    state: { isHide },
    onChange: onFilterChange,
  });

  function onFilterChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Select *//

  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSelectChange(action, state) {
    console.log(action, state);
  }

  //* Tree *//

  const tree = useTree(
    data,
    {
      onChange: onTreeChange,
    },
    {
      clickType: TreeExpandClickTypes.ButtonClick,
      treeYLevel: 1,
      treeIcon: {
        margin: '4px',
        iconDefault: null,
        iconRight: <FaChevronRight />,
        iconDown: <FaChevronDown />,
      },
    },
  );

  function onTreeChange(action, state) {
    console.log(action, state);
  }

  //* Sort *//

  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortIcon: {
        iconDefault: null,
        iconUp: <FaChevronUp />,
        iconDown: <FaChevronDown />,
      },
      sortFns: {
        TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
        DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
        TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
        COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
        TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
      },
    },
  );

  function onSortChange(action, state) {
    console.log(action, state);
  }

  //* Drawer *//

  const [drawerId, setDrawerId] = React.useState(null);
  const [edited, setEdited] = React.useState('');

  const handleEdit = (event) => {
    setEdited(event.target.value);
  };

  const handleCancel = () => {
    setEdited('');
    setDrawerId(null);
  };

  const handleSave = () => {
    const node = findNodeById(data.nodes, drawerId);
    const editedNode = { ...node, name: edited };
    const nodes = insertNode(data.nodes, editedNode);

    setData({
      nodes,
    });

    setEdited('');
    setDrawerId(null);
  };

  //* Modal *//

  const [modalOpened, setModalOpened] = React.useState(false);

  //* Custom Modifiers *//

  let modifiedNodes = data.nodes;

  // search
  modifiedNodes = modifiedNodes.filter((node) =>
    node.name.toLowerCase().includes(search.toLowerCase()),
  );

  // filter
  modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;

  //* Columns *//

  const COLUMNS = [
    {
      label: 'Task',
      renderCell: (item) => item.name,
      resize,
      sort: { sortKey: 'TASK' },
      select: {
        renderHeaderCellSelect: () => (
          <Checkbox
            colorScheme="teal"
            isChecked={select.state.all}
            isIndeterminate={!select.state.all && !select.state.none}
            onChange={select.fns.onToggleAll}
          />
        ),
        renderCellSelect: (item) => (
          <Checkbox
            colorScheme="teal"
            style={{ backgroundColor: '#ffffff' }}
            isChecked={select.state.ids.includes(item.id)}
            onChange={() => select.fns.onToggleById(item.id)}
          />
        ),
      },
      tree: true,
    },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      resize,
      sort: { sortKey: 'DEADLINE' },
    },
    { label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      resize,
      sort: { sortKey: 'COMPLETE' },
    },
    {
      label: 'Tasks',
      renderCell: (item) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{item.nodes?.length}</span>
          <IconButton
            aria-label="edit"
            icon={<FaPen />}
            size="xs"
            variant="ghost"
            colorScheme="teal"
            onClick={() => setDrawerId(item.id)}
          />
        </div>
      ),
      resize,
      sort: { sortKey: 'TASKS' },
    },
  ];

  return (
    <>
      <Modal isOpen={modalOpened} onClose={() => setModalOpened(false)}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Not all features included here, but we got ...</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Resize
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Sort
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Search
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Filter
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Select
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Tree
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Drawer on Edit
              </Checkbox>
            </div>
            <div>
              <Checkbox colorScheme="teal" isChecked>
                Pagination
              </Checkbox>
            </div>
          </ModalBody>
        </ModalContent>
      </Modal>

      {/* Form */}

      <HStack m={3}>
        <Button colorScheme="teal" onClick={() => setModalOpened(true)}>
          Features?
        </Button>

        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaSearch style={{ color: '#4a5568' }} />}
          />
          <Input
            placeholder="Search Task"
            value={search}
            onChange={(event) => setSearch(event.target.value)}
          />
        </InputGroup>

        <Checkbox
          style={{ whiteSpace: 'nowrap' }}
          colorScheme="teal"
          isChecked={isHide}
          onChange={(event) => setHide(event.target.checked)}
        >
          Hide Complete
        </Checkbox>
      </HStack>

      {/* Table */}

      <Box p={3} borderWidth="1px" borderRadius="lg">
        <CompactTable
          columns={COLUMNS}
          data={{ ...data, nodes: modifiedNodes }}
          theme={theme}
          layout={{ custom: true }}
          select={select}
          tree={tree}
          sort={sort}
          pagination={pagination}
        />
      </Box>

      <br />
      <HStack justify="flex-end">
        <IconButton
          aria-label="previous page"
          icon={<FaChevronLeft />}
          colorScheme="teal"
          variant="ghost"
          disabled={pagination.state.page === 0}
          onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
        />

        {pagination.state.getPages(modifiedNodes).map((_, index) => (
          <Button
            key={index}
            colorScheme="teal"
            variant={pagination.state.page === index ? 'solid' : 'ghost'}
            onClick={() => pagination.fns.onSetPage(index)}
          >
            {index + 1}
          </Button>
        ))}
        <IconButton
          aria-label="next page"
          icon={<FaChevronRight />}
          colorScheme="teal"
          variant="ghost"
          disabled={pagination.state.page + 1 === pagination.state.getTotalPages(data.nodes)}
          onClick={() => pagination.fns.onSetPage(pagination.state.page + 1)}
        />
      </HStack>

      <Drawer isOpen={drawerId} onClose={handleCancel} placement="right">
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Create your account</DrawerHeader>

          <DrawerBody>
            <Text>Name: </Text>
            <Input
              autoFocus
              value={
                edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name
              }
              onChange={handleEdit}
              data-autofocus
            />
          </DrawerBody>

          <DrawerFooter>
            <Button variant="outline" mr={3} onClick={handleCancel}>
              Cancel
            </Button>
            <Button onClick={handleSave} colorScheme="teal">
              Save
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Component = () => {
  const [data, setData] = React.useState({ nodes });

  //* Theme *//

  const mantineTheme = getTheme({
    ...DEFAULT_OPTIONS,
    striped: true,
    highlightOnHover: true,
  });
  const customTheme = {
    Table: `
      --data-table-library_grid-template-columns:  44px repeat(5, minmax(0, 1fr));

      margin: 16px 0px;
    `,
  };
  const theme = useTheme([mantineTheme, customTheme]);

  //* Resize *//

  const resize = { resizerHighlight: '#dee2e6' };

  //* Pagination *//

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 4,
    },
    onChange: onPaginationChange,
  });

  function onPaginationChange(action, state) {
    console.log(action, state);
  }

  //* Search *//

  const [search, setSearch] = React.useState('');

  useCustom('search', data, {
    state: { search },
    onChange: onSearchChange,
  });

  function onSearchChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Filter *//

  const [isHide, setHide] = React.useState(false);

  useCustom('filter', data, {
    state: { isHide },
    onChange: onFilterChange,
  });

  function onFilterChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Select *//

  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSelectChange(action, state) {
    console.log(action, state);
  }

  //* Tree *//

  const tree = useTree(
    data,
    {
      onChange: onTreeChange,
    },
    {
      clickType: TreeExpandClickTypes.ButtonClick,
      treeYLevel: 1,
      treeIcon: {
        margin: '4px',
        iconDefault: null,
        iconRight: <FaChevronRight />,
        iconDown: <FaChevronDown />,
      },
    },
  );

  function onTreeChange(action, state) {
    console.log(action, state);
  }

  //* Sort *//

  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortIcon: {
        iconDefault: null,
        iconUp: <FaChevronUp />,
        iconDown: <FaChevronDown />,
      },
      sortFns: {
        TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
        DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
        TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
        COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
        TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
      },
    },
  );

  function onSortChange(action, state) {
    console.log(action, state);
  }

  //* Drawer *//

  const [drawerId, setDrawerId] = React.useState(null);
  const [edited, setEdited] = React.useState('');

  const handleEdit = (event) => {
    setEdited(event.target.value);
  };

  const handleCancel = () => {
    setEdited('');
    setDrawerId(null);
  };

  const handleSave = () => {
    const node = findNodeById(data.nodes, drawerId);
    const editedNode = { ...node, name: edited };
    const nodes = insertNode(data.nodes, editedNode);

    setData({
      nodes,
    });

    setEdited('');
    setDrawerId(null);
  };

  //* Modal *//

  const [modalOpened, setModalOpened] = React.useState(false);

  //* Custom Modifiers *//

  let modifiedNodes = data.nodes;

  // search
  modifiedNodes = modifiedNodes.filter((node) =>
    node.name.toLowerCase().includes(search.toLowerCase()),
  );

  // filter
  modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;

  //* Columns *//

  const COLUMNS = [
    {
      label: 'Task',
      renderCell: (item) => item.name,
      resize,
      sort: { sortKey: 'TASK' },
      select: {
        renderHeaderCellSelect: () => (
          <Checkbox
            checked={select.state.all}
            indeterminate={!select.state.all && !select.state.none}
            onChange={select.fns.onToggleAll}
          />
        ),
        renderCellSelect: (item) => (
          <Checkbox
            checked={select.state.ids.includes(item.id)}
            onChange={() => select.fns.onToggleById(item.id)}
          />
        ),
      },
      tree: true,
    },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      resize,
      sort: { sortKey: 'DEADLINE' },
    },
    { label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      resize,
      sort: { sortKey: 'COMPLETE' },
    },
    {
      label: 'Tasks',
      renderCell: (item) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{item.nodes?.length}</span>
          <ActionIcon
            variant="hover"
            color="blue"
            component="button"
            onClick={() => setDrawerId(item.id)}
          >
            <FaPen />
          </ActionIcon>
        </div>
      ),
      resize,
      sort: { sortKey: 'TASKS' },
    },
  ];

  return (
    <>
      <Modal
        opened={modalOpened}
        onClose={() => setModalOpened(false)}
        title="Not all features included here, but we got ..."
      >
        <div>
          <Checkbox label="Resize" checked />
        </div>
        <div>
          <Checkbox label="Sort" checked />
        </div>
        <div>
          <Checkbox label="Search" checked />
        </div>
        <div>
          <Checkbox label="Filter" checked />
        </div>
        <div>
          <Checkbox label="Select" checked />
        </div>
        <div>
          <Checkbox label="Tree" checked />
        </div>
        <div>
          <Checkbox label="Drawer on Edit" checked />
        </div>
        <div>
          <Checkbox label="Pagination" checked />
        </div>
      </Modal>

      {/* Form */}

      <Group mx={10}>
        <Button onClick={() => setModalOpened(true)}>Features?</Button>

        <TextInput
          placeholder="Search Task"
          value={search}
          icon={<FaSearch />}
          onChange={(event) => setSearch(event.target.value)}
        />
        <Checkbox
          label="Hide Complete"
          checked={isHide}
          onChange={(event) => setHide(event.target.checked)}
        />
      </Group>

      {/* Table */}

      <CompactTable
        columns={COLUMNS}
        data={{ ...data, nodes: modifiedNodes }}
        theme={theme}
        layout={{ custom: true }}
        select={select}
        tree={tree}
        sort={sort}
        pagination={pagination}
      />

      <Group position="right" mx={10}>
        <Pagination
          total={pagination.state.getTotalPages(modifiedNodes)}
          page={pagination.state.page + 1}
          onChange={(page) => pagination.fns.onSetPage(page - 1)}
        />
      </Group>

      <Drawer
        opened={drawerId}
        onClose={handleCancel}
        title="Edit"
        padding="xl"
        size="xl"
        position="right"
      >
        <Group grow>
          <TextInput
            label="Name"
            value={edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name}
            onChange={handleEdit}
            data-autofocus
          />
        </Group>
        <Space h="md" />
        <Group grow>
          <Button variant="outline" onClick={handleCancel}>
            Cancel
          </Button>
          <Button onClick={handleSave}>Save</Button>
        </Group>
      </Drawer>
    </>
  );
}