Can anyone provide insights on: Kanban?

[natejacobson]

Can Smart Kanban be used inside modals or dialogs in React?

[Markov]

Hi,

Yes, you can use it. Here’s an example with our Smart.Kanban and Smart.Window for Modal.

import React, { useState, useRef } from 'react';
import { Kanban } from 'smart-webcomponents-react/kanban';
import { Window } from 'smart-webcomponents-react/window';

export default function KanbanInWindow() {
  const [isOpen, setIsOpen] = useState(false);
  const kanbanRef = useRef(null);

  const dataSource = [
    { label: 'Task 1', status: 'todo' },
    { label: 'Task 2', status: 'done' }
  ];

  const columns = [
    { label: 'To Do', dataField: 'todo' },
    { label: 'Done', dataField: 'done' }
  ];

  // Refresh Kanban when window opens to ensure proper layout
  const onWindowOpen = () => {
    if (kanbanRef.current) {
      kanbanRef.current.refresh();
    }
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Kanban Window</button>

      <Window
        opened={isOpen}
        onClose={() => setIsOpen(false)}
        onOpen={onWindowOpen}
        header="Kanban in Smart.Window"
        style={{ width: '600px', height: '500px' }}
        showCloseButton
        modal
      >
        <Kanban
          ref={kanbanRef}
          dataSource={dataSource}
          columns={columns}
          style={{ height: '100%', width: '100%' }}
        />
      </Window>
    </>
  );
}

Hope this helps

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts