I am new to the material-table and wanted to know if there is a way by which we can save the filters in the table after onRowAdd or onRowDelete. I am using a functional-based class as follows:
import "./EditTable.css";
// import MaterialTable from 'material-table'
import MaterialTable from "@material-table/core";
import { Checkbox, Select, MenuItem, Container } from "@material-ui/core";
import axios from "axios";
function EditTable(props) {
const [data, setData] = useState(props.techstacks);
const [filter, setFilter] = useState(true);
const [year, setYear] = useState("all");
const [newSoftwareID, setNewSoftwareID] = useState(0);
const [openMultiEdit, setOpenMultiEdit] = useState(false);
const [selectedToEdit, setSelectedToEdit] = useState([]);
function set_new_software(props) {
console.log(props.newValue.id);
}
const columns = [
{ title: "App/Component", field: "app_componenet_name" },
{
title: "Techstack Category",
field: "techstack_category",
lookup: {
"Host OS": "Host OS",
"Container OS": "Container OS",
Mobile: "Mobile",
Runtime: "Runtime",
"App Containers": "App Containers",
"Queues/Streaming": "Queues/Streaming",
"Spring/Composition Lib": "Spring/Composition Lib",
"Integration Lib": "Integration Lib",
"Caching Lib": "Caching Lib",
Databases: "Databases",
"DB Driver": "DB Driver",
"Security Lib": "Security Lib",
"Log Aggregation": "Log Aggregation",
Logging: "Logging",
"Text Search/repo": "Text Search/repo",
Presentation: "Presentation",
Browser: "Browser",
"Browser addons": "Browser addons",
Misc: "Misc",
},
},
{
title: "Software Name",
field: "techstack_software",
customFilterAndSearch: (term, rowData) =>
rowData.software_name.toLowerCase().includes(term.toLowerCase()),
render: (rowData) => rowData.software_name,
editComponent: (rowData) => (
<SoftwareDropDown
values={props.software_values}
current_software={rowData.rowData.techstack_software_detail}
callback={set_new_software}
rowData={rowData}
onChange={rowData.onChange}
/>
),
},
{ title: "Container Source", field: "container_source" },
{
title: "Disposition",
field: "techstack_software_detail.disposition",
editable: "never",
},
{ title: "Roadmap", field: "roadmap" },
{ title: "EA Comments", field: "EA_comments" },
{ title: "PA Comments", field: "PA_comments" },
];
const handleChange = () => {
setFilter(!filter);
};
const closeMultiEdit = (newValue) => {
setOpenMultiEdit(newValue);
};
useEffect(() => {
setData(props.techstacks);
}, [props.techstacks]);
return (
<div className="App">
<Container maxWidth="lg">
<MaterialTable
title="Techstack Data"
data={data}
columns={columns}
editable={{
onRowAdd: (newRow) =>
new Promise((resolve, reject) => {
axios
.post(
`${process.env.REACT_APP_API_URL}/api/techstacks/`,
{
techstack_product: props.current_product,
app_componenet_name: newRow.app_componenet_name,
techstack_category: newRow.techstack_category,
techstack_software: newRow.techstack_software,
container_source: newRow.container_source,
roadmap: newRow.roadmap,
EA_comments: newRow.EA_comments,
PA_comments: newRow.PA_comments,
},
{
headers: { Accept: "application/json" },
}
)
.then(function (response) {
console.log(response);
const updatedRows = [
...data,
{ id: Math.floor(Math.random() * 100), ...newRow },
];
setData(updatedRows);
})
.catch(function (error) {
alert(error);
reject(error);
})
.finally(function (response) {
props.getSoftwares();
resolve();
});
}),
onRowDelete: (selectedRow) =>
new Promise((resolve, reject) => {
axios
.delete(
`${process.env.REACT_APP_API_URL}/api/techstacks/${selectedRow.id}/`,
{
headers: { Accept: "application/json" },
}
)
.then(function (response) {
const index = selectedRow.tableData.id;
const updatedRows = [...data];
updatedRows.splice(index, 1);
setData(updatedRows);
})
.catch(function (error) {
alert(error);
reject(error);
})
.finally(function (response) {
props.getSoftwares();
resolve();
});
}),
onRowUpdate: (updatedRow, oldRow) =>
new Promise((resolve, reject) => {
axios
.patch(
`${process.env.REACT_APP_API_URL}/api/techstacks/${updatedRow.id}/`,
{
techstack_category: updatedRow.techstack_category,
app_componenet_name: updatedRow.app_componenet_name,
techstack_software: updatedRow.techstack_software,
container_source: updatedRow.container_source,
roadmap: updatedRow.roadmap,
EA_comments: updatedRow.EA_comments,
PA_comments: updatedRow.PA_comments,
},
{
headers: { Accept: "application/json" },
}
)
.then(function (response) {
const updatedRows = [...data];
const updateObjIndex = updatedRows.findIndex(
(x) => x.id === oldRow.tableData.id
);
if (updateObjIndex > -1) {
updatedRows[updateObjIndex] = updatedRow;
setData(updatedRows);
}
})
.catch(function (error) {
alert(error);
reject(error);
})
.finally(function (response) {
props.getSoftwares();
resolve();
});
}),
}}
options={{
filtering: filter,
addRowPosition: "first",
selection: true,
pageSize: 10,
pageSizeOptions: [5, 10, 25, 50, 100],
paging: true,
grouping: true,
}}
actions={[
{
tooltip: "Remove All Selected Items",
icon: "delete",
onClick: (evt, data) => {
const to_delete = [];
console.log(data[0].id);
for (const item in data) {
to_delete.push(data[item].id);
}
alert(`You want to delete ${data.length} rows.`);
const axiosArray = [];
for (let x = 0; x < to_delete.length; x++) {
const newPromise = axios.delete(
`${process.env.REACT_APP_API_URL}/api/techstacks/${to_delete[x]}/`,
{
headers: { Accept: "application/json" },
}
);
axiosArray.push(newPromise);
}
axios
.all(axiosArray)
.then(
axios.spread((...responses) => {
responses.forEach((res) => console.log("Success"));
console.log("submitted all axios calls");
})
)
.catch((error) => {})
.finally(function (response) {
// Hide loading
props.getSoftwares();
});
},
},
]}
/>
</Container>
</div>
);
}
export default EditTable;
When the user selects a filter, adds a row, or updates some record, the table re-renders and the filters are gone. Any help? Thanks