v7 - How to add global filter with select

[byurhannurula]

Hi, I want to build table with global filters (select menu) but all examples are with column level filter or global search filter

How can I extend my code with global filter

I want something like this select menu

Here is my code
Table.js

/* eslint-disable no-nested-ternary */
/* eslint-disable react/jsx-key */
import React from 'react';
import { useTable, useSortBy, useFilters, useGlobalFilter } from 'react-table';

import { TableWrapper } from './styles';

function Table({
  data,
  columns,
  sorting = false,
  filters = false,
  maxRowsPerPage = 10,
}) {
  const extras = [];
  if (filters) extras.push(useFilters, useGlobalFilter);
  if (sorting) extras.push(useSortBy);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    ...extras,
  );

  // Render the UI for your table
  return (
    <TableWrapper>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th
                  {...column.getHeaderProps(
                    sorting && column.getSortByToggleProps(),
                  )}
                >
                  {column.render('Header')}
                  {sorting && (
                    <span>
                      {column.isSorted
                        ? column.isSortedDesc
                          ? ' ⬇'
                          : ' 🔼'
                        : ''}
                    </span>
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {!rows || rows.length < 1 ? (
            <tr className="no-data">
              <td aria-colspan={columns.length} colSpan={columns.length}>
                <p>Not found any data!</p>
              </td>
            </tr>
          ) : (
            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>
    </TableWrapper>
  );
}

export { Table };

and page itself

const DashboardPage = () => {
  const columns = useMemo(
    () => [
      {
        Header: 'Project',
        accessor: 'project',
      },
      {
        Header: 'Type',
        accessor: 'type',
      },
      {
        Header: 'Due Date',
        accessor: 'dueDate',
      },
      {
        Header: 'Updated',
        accessor: 'updated',
      },
      {
        Header: 'Status',
        accessor: 'status',
        Cell: StatusCell,
        filter: 'includes',
      },
      {
        Header: 'Progress',
        accessor: 'progress',
      },
      {
        Header: 'Project Manager',
        accessor: 'projectManager',
      },
      {
        Header: 'Score',
        accessor: 'score',
      },
      {
        Header: 'Actions',
        accessor: 'actions',
        disableSortBy: true,
      },
    ],
    [],
  );

  const data = useMemo(() => [], []);

  return (
    <DashboardPageWrapper>
      <Row className="table-header">
        <h2>Dashboard</h2>
        <Button variant="primary" icon="plus">
          Create Project
        </Button>
      </Row>
      <Card className="card table-card">
        <CardHeader>
          <h3>Projects</h3>
          <select name="" id="">
            <option value="">All</option>
            {filterOptions.map((option) => (
              <option key={option.id} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </CardHeader>
        <CardBody>
          <Table columns={columns} data={data} sorting filters />
        </CardBody>
      </Card>
    </DashboardPageWrapper>
  );
};

[webdevike]

I am looking for something similar did you ever figure this out by chance?

[byurhannurula]

Hi, I've made something I don't know if it's the best solution but works for me
Basically I filter the data based on the selected filter and set it to another variable

// set rowdata from api
const [rowData, setRowData] = useState([]);
// set filtered data on filter change
const [filteredRowData, setFilteredRowData] = useState(null);

// Trigger this function on change the value of Dropdown  
// Update four your needs
const handleFilter = (e) => {
    if (e !== null && e?.value !== 'All') {
      setFilteredRowData(rowData.filter((item) => item.status === e?.value));
    } else {
      setFilteredRowData(rowData);
    }
};

<Table
   data={filteredRowData !== null ? filteredRowData : rowData}
   columns={columns}
   sorting
   filters
   pagination
/>

[webdevike]

That's smart! Thanks for sending this.

[byurhannurula]

YW! I hope it helps you :)

[ShivamMishra30]

Is there any other solution?

[nagoorkalima]

Hats off coder