Reply To: What’s the Angular way to enable row virtualization in Kanban?

[Markov]

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/