Hide data and show if the user use filter

Hi,

First of all I want to thank you guys for this project.

the table I using is MUIDataTable, how can I hide the data in MUIDataTable ? if the user use the filter the data will appear or show?

Please take a look to this question https://stackoverflow.com/questions/68537306/reactjs-table-with-filter

```
const Logs = () => {
const classes = useStyles();
const [state, setState] = useState([
{
startDate: new Date(),
endDate: null,
key: 'selection'
}
]);

const columns = [
{
name: "dateTime",
label: "Date / Time",
options: {
filter: true,
sort: false,
display: 'true',
filterType: 'custom',
customFilterListOptions: {
render: v => v.map(l => l.toUpperCase()),
update: (filterList, filterPos, index) => {
console.log('update');
console.log(filterList, filterPos, index);
filterList[index].splice(filterPos, 1);
return filterList;
}
},
filterOptions: {
logic: (datetime, filters, row) => {
if (filters.length) return !filters.includes(datetime);
return false;
},
display: (filterList, onChange, index, column) => {
const optionValues = ['Minneapolis', 'New York', 'Seattle'];
return (

setState([item.selection])}
moveRangeOnFirstSelection={false}
ranges={state}
/>

);
}
}
}
},
{
name: "user",
label: "User",
options: {
filter: false,
sort: false,
}
},
{
name: "appCode",
label: "Application Code",
options: {
filter: true,
display: 'true',
filterType: 'custom',
customFilterListOptions: {
render: v => v.map(l => l.toUpperCase()),
update: (filterList, filterPos, index) => {
console.log('update');
console.log(filterList, filterPos, index);
filterList[index].splice(filterPos, 1);
return filterList;
}
},
filterOptions: {
logic: (datetime, filters, row) => {
if (filters.length) return !filters.includes(datetime);
return false;
},
display: (filterList, onChange, index, column) => {
const optionValues = ['Minneapolis', 'New York', 'Seattle'];
return (


Application

selected.join(', ')}
onChange={event => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}}
>
{optionValues.map(item => (

-1}
/>


))}


);
}
}
}
},
{
name: "module",
label: "Module",
options: {
filter: true,
display: 'true',
filterType: 'custom',
customFilterListOptions: {
render: v => v.map(l => l.toUpperCase()),
update: (filterList, filterPos, index) => {
console.log('update');
console.log(filterList, filterPos, index);
filterList[index].splice(filterPos, 1);
return filterList;
}
},
filterOptions: {
logic: (datetime, filters, row) => {
if (filters.length) return !filters.includes(datetime);
return false;
},
display: (filterList, onChange, index, column) => {
const optionValues = ['Minneapolis', 'New York', 'Seattle'];
return (


Module

selected.join(', ')}
onChange={event => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}}
>
{optionValues.map(item => (

-1}
/>


))}


);
}
}
}
},
{
name: "transaction",
label: "Transaction",
options: {
filter: true,
display: 'true',
filterType: 'custom',
customFilterListOptions: {
render: v => v.map(l => l.toUpperCase()),
update: (filterList, filterPos, index) => {
console.log('update');
console.log(filterList, filterPos, index);
filterList[index].splice(filterPos, 1);
return filterList;
}
},
filterOptions: {
logic: (datetime, filters, row) => {
if (filters.length) return !filters.includes(datetime);
return false;
},
display: (filterList, onChange, index, column) => {
const optionValues = ['Minneapolis', 'New York', 'Seattle'];
return (


Transaction Type

selected.join(', ')}
onChange={event => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}}
>
{optionValues.map(item => (

-1}
/>


))}


);
}
}
}
},
{
name: "table",
label: "Table",
options: {
filter: false,
sort: false,
}
},
{
name: "id",
label: "ID",
options: {
filter: false,
sort: false,
}
},
{
name: "record",
label: "Record",
options: {
filter: false,
sort: false,
}
},
];
const data = [
{
dateTime: "July 22, 2021 | 07:34:12 AM",
user: "TestUser",
appCode: "App",
module: "Module",
transaction: "Transaction",
table: "Table",
id: "ID",
record: "Record",
},
];

const options = {
selectableRows: 'none',
print: false,
};

return (
<>








)
}
```