GlobalFilter with custom filter

[rotem443]

`
import React from "react";
import { useTable, useFilters, useGlobalFilter } from "react-table";

    const data = [
      { firstName: "jane", lastName: "doe", age: 20 },
      { firstName: "john", lastName: "smith", age: 21 }
    ];

    const columns = [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName",
            filter: "globalFilter"
          },
          {
            Header: "Last Name",
            accessor: "lastName",
            filter: "text"
          }
        ]
      },
      {
        Header: "Other Info",
        columns: [
          {
            Header: "Age",
            accessor: "age",
            filter: "text"
          }
        ]
      }
    ];


    const GlobalFilter = ({
      preGlobalFilteredRows,
      globalFilter,
      setGlobalFilter
    }) => {
      const count = preGlobalFilteredRows && preGlobalFilteredRows.length;

      return (
        <span>
          Search:{" "}
          <input
            value={globalFilter || ""}
            onChange={e => {
              setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
            }}
            placeholder={`${count} records...`}
            style={{
              border: "0"
            }}
          />
        </span>
      );
    };

    const Table = ({ columns, data }) => {

      const filterTypes = React.useMemo(
        () => ({
          globalFilter: (rows, id, filterValue) => {
            
            console.log(rows)

            return rows.filter(row => {
              const rowValue = row.values[id];
              return rowValue !== undefined
                ? String(rowValue)
                    .toLowerCase()
                    .startsWith(String(filterValue).toLowerCase())
                : true;
            });
          }
        }),
        []
      );


      const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        state,
        visibleColumns,
        preGlobalFilteredRows,
        setGlobalFilter
      } = useTable(
        {
          columns,
          data,
          globalFilter: filterTypes,
        },
        useGlobalFilter
      );

      return (
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
            <tr>
              <th
                colSpan={visibleColumns.length}
                style={{
                  textAlign: "left"
                }}
              >
                <GlobalFilter
                  preGlobalFilteredRows={preGlobalFilteredRows}
                  globalFilter={state.globalFilter}
                  setGlobalFilter={setGlobalFilter}
                />
              </th>
            </tr>
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      );
    };

    export default function App() {
      return (
        <div className="App">
          <Table columns={columns} data={data} />
        </div>
      );
    }

`

I'm trying to add a custom filter to the globalFilter, and no matter what I'm trying to do its doesn't seem to work, any help? Or any working code would be lovely, thanks!
Thanks!

[ardiz90]

I'm trying to do the same thing without success...+1 request of help!

[ardiz90]

Solved! you were really close to the solution!

const Table = ({ columns, data }) => {

const globalFilter =
(rows, columns, filterValue) => {

    console.log(flatRows)

    return rows.filter(row => {
      const rowValue = row.values["firstName"];
      return rowValue !== undefined
        ? String(rowValue)
            .toLowerCase()
            .startsWith(String(filterValue)
            .toLowerCase()
            )
        : true;
    });
  }

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
flatRows,
prepareRow,
state,
visibleColumns,
preGlobalFilteredRows,
setGlobalFilter
} = useTable(
{
columns,
data,
globalFilter,
//filterTypes,
//manualGlobalFilter: true
},
useGlobalFilter
);

[chancecardona]

This worked. To specify the more exact problem I was having, I just needed to set a custom filter function for the GlobalFilter. Simply adding const globalFilter = customFilterFunction; (defined elsewhere) and passing globalFilter into the initial object prop for useTable was enough to do this. Thank you!