Hi,
Yes, this is possible.
Example with React + React Router + Redux
import { Kanban } from "smart-webcomponents-react/kanban";
import { useSelector, useDispatch } from "react-redux";
import { setCards, setColumnFilter } from "./kanbanSlice";
import { useEffect } from "react";
export default function KanbanPage() {
const dispatch = useDispatch();
const cards = useSelector(state => state.kanban.cards);
const filter = useSelector(state => state.kanban.columnFilter);
// Save state to Redux when card changes
const handleChange = (event) => {
const { type, data } = event.detail;
if (type === "update" || type === "add" || type === "delete") {
dispatch(setCards(data));
}
};
return (
<Kanban
dataSource={cards}
columnProperty="status"
columns={[
{ label: "To Do", dataField: "todo" },
{ label: "In Progress", dataField: "inProgress" },
{ label: "Done", dataField: "done" },
]}
onChange={handleChange}
/>
);
}
The idea is:
Data persistence: Kanban’s dataSource holds all cards; filters or column settings can also be tracked.
State storage options: Redux, Vuex, or React Context.
Local storage: Store JSON data in localStorage.
On navigation:
Save the current state and restore the state when the Kanban component is mounted again
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/
.
