Column Filters Outside the Table

[surnr]

I have created a Tanstack Table where I need 2 Dropdown filters for 2 specific columns

For example:
I have a table with first name, last name, and status as columns. I have the last name and status filter dropdown outside the table, How can I implement this?

Here is my actual code:

import {
  ColumnFiltersState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";

export default function DataTable({ tableData, columns }: any) {
  const data = useMemo(() => tableData, []);
  const [sorting, setSorting] = useState([]);
  const [globalFilter, setGlobalFilter] = useState("");
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);

  const handleCustomerOnChange = (e: any) => {
    setColumnFilters((prev) => ({
      ...prev,
      "customerId.name": e.target.value,
    }));
  };

  const handleOrderStatusOnChange = (e: any) => {
    setColumnFilters((prev) => ({ ...prev, orderStatus: e.target.value }));
  };

  const table = useReactTable({
    data,
    columns,
    enableFilters: true,
    enableColumnFilters: true,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting: sorting,
      columnFilters: columnFilters,
      globalFilter: globalFilter,
    },
    onSortingChange: (newSorting: any) => setSorting(newSorting),
    onColumnFiltersChange: setColumnFilters,
    onGlobalFilterChange: setGlobalFilter,
  });

  return (
    <>
            <select
              onChange={handleOrderStatusOnChange}
            >
              <option defaultChecked value="all">
                All
              </option>
              {DefaultOrderStatus.map((status: any) => (
                <option value={status} key={status}>
                  {status}
                </option>
              ))}
            </select>
   
            <select
              onChange={handleCustomerOnChange}
              className="p-2 bg-white dark:bg-gray-700 rounded-md"
              defaultValue={""}
            >
              <option defaultChecked value="all">
                All
              </option>
              {uniqueCustomerNames.map((customerName: any) => (
                <option value={customerName} key={customerName}>
                  {customerName}
                </option>
              ))}
            </select>
              <DebouncedInput
                type="text"
                required
                value={globalFilter}
                onChange={(value) => setGlobalFilter(String(value))}
              />
         
        <table>
          <thead>
            {table.getHeaderGroups().map((headerGroup) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <th
                    key={header.id}
                    colSpan={header.colSpan}
                  >
                    {header.isPlaceholder ? null : (
                      <div
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                        {{
                          asc: " 🔼",
                          desc: " 🔽",
                        }[header.column.getIsSorted() as string] ?? null}
                      </div>
                    )}
                  </th>
                ))}
              </tr>
            ))}
          </thead>

          <tbody>
            {table.getRowModel().rows.length ? (
              table.getRowModel().rows.map((row) => (
                <tr
                  key={row.id}
                >
                  {row.getVisibleCells().map((cell) => (
                    <td key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </td>
                  ))}
                </tr>
              ))
            ) : (
              <tr className="text-center text-lg h-32">
                <td colSpan={columns.length}>No Record Found!</td>
              </tr>
            )}
          </tbody>
        </table>
    </>
  );
}

[julienmiclo]

Hello,
you can check this code for faceted filter : https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx

Shadecn have great examples. https://ui.shadcn.com/examples/tasks

Regards,