TaskBoardProps

Premium

Represents the props of the TaskBoard component

Name	Type	Default	Description
card?	React.ComponentType<TaskBoardCardProps>		Represents the TaskBoardCard component. Example: jsx <TaskBoard card={(props) => <div>{props.title}</div>} />
children?	React.ReactNode		The React elements that will be rendered inside the toolbar of the TaskBoard. Example: jsx <TaskBoard> <button>Add Task</button> </TaskBoard>
className?	string | string[]		Specifies a list of CSS classes that will be added to the TaskBoard element. Example: jsx <TaskBoard className="custom-taskboard" />
column?	React.ComponentType<TaskBoardColumnProps>		Represents the TaskBoardColumn component. Example: jsx <TaskBoard column={(props) => <div>{props.title}</div>} />
columnData	TaskBoardColumnModel[]		Specifies the column data from type TaskBoardColumnModel. Example: jsx <TaskBoard columnData={[ { id: 1, title: 'To Do', status: 'todo' }, { id: 2, title: 'In Progress', status: 'inProgress' } ]} />
id?	string		Specifies the id that will be added to the TaskBoard element. Example: jsx <TaskBoard id="taskboard-1" />
onChange	(event: TaskBoardChangeEvent) => void		Represents the onChange event. Triggered after tasks or columns are changed. Example: jsx <TaskBoard onChange={(event) => console.log(event.data)} />
priorities	TaskBoardPriority[]		Specifies the priorities of the task board. Example: jsx <TaskBoard priorities={[ { priority: 'High', color: 'red' }, { priority: 'Low', color: 'green' } ]} />
style?	React.CSSProperties		Represents the styles that are applied to the TaskBoard. Example: jsx <TaskBoard style={{ backgroundColor: 'lightgray' }} />
tabIndex?	number		Specifies the tabIndex that will be added to the TaskBoard Column and Card elements. Example: jsx <TaskBoard tabIndex={0} />
taskData	TaskBoardTaskModel[]		Represents the task data from type TaskBoardTaskModel. Example: jsx <TaskBoard taskData={[ { id: 1, title: 'Task 1', status: 'todo', description: 'Description 1', priority: { priority: 'High', color: 'red' } }, { id: 2, title: 'Task 2', status: 'inProgress', description: 'Description 2', priority: { priority: 'Low', color: 'green' } } ]} />