MUI-datatable Moving filters outside of table

Question

Fairly New to react here so not sure if the MUIdatatable allows this but Is it possible to move filters outside of the MUI datatable like the example shown here -

https://codesandbox.io/s/muidatatables-custom-toolbar-rvmcj?file=/index.js

Can Name, Title & Location also be rendered above and interact with the table?

Below is an example component I have rendering and it has the filter option but I would prefer to have it like the codesandbox example, sitting above.

import React from "react";
import MUIDataTable from "mui-datatables";

class Example extends React.Component {

render() {

const columns = [
  {
    name: "Name",
    options: {
      filter: true,
      filterList: ['Franky Miles'],
      customFilterListOptions: { render: v => `Name: ${v}` },
      filterOptions: {
        names: ['a', 'b', 'c', 'Business Analyst']
      },
    }
  },
  {
    name: "Title",
    options: {
      filter: true,
      filterList: ['Business Analyst'],
      customFilterListOptions: { render: v => `Title: ${v}` },
      filterType: 'textField' // set filterType's at the column level
    }
  },
  {
    name: "Location",
    options: {
      filter: false,
    }
  },
  {
    name: "Age",
    options: {
      customBodyRenderLite: (dataIndex) => {
        let val = data[dataIndex][3];
        return val;
      },
      filter: true,
      customFilterListOptions: { render: v => `Age: ${v}` },
    }
  },
  {
    name: "Salary",
    options: {
      filter: true,
      customFilterListOptions: { render: v => `Salary: ${v}` },
      sort: false
    }
  }
];
const data = [
  ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
  ["Business Analyst", "Business Consultant", "Dallas",  55, 200000],
  ["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
  ["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
  ["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
  ["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
  ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
  ["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
  ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
  ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
  ["Harper White", "Attorney", "Pittsburgh", 52, 420000],
  ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
  ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
  ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
  ["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
  ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000],
  ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
  ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
  ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
  ["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
  ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
  ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
  ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
  ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
  ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
  ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
  ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
  ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
  ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
  ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
];

const options = {
  filter: true,
  onFilterChange: (changedColumn, filterList) => {
    console.log(changedColumn, filterList);
  },
  selectableRows: 'multiple',
  filterType: 'dropdown',
  responsive: 'vertical',
  rowsPerPage: 10,
};

return (
  <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
);

}

}

export default Example;

Answer 1

I understand that I am too late to answer.. but just to help someone else who reaches here finding an answer to this.

answer: https://codesandbox.io/s/muidatatables-custom-toolbar-forked-0izyt

Here I have applied only one filter of "Business Analyst" to Title column. Its a play ground and you may apply more filters as desired.

The "columns" array needs to be updated to contain options.filterList to apply filters from outside datatables.

  // const columns = ["Name", "Title", "Location"];
  const columns = [
    { name: "Name" },
    { name: "Title", options: { filterList: ["Business Analyst"] } },
    { name: "Location" }
  ];