我已经在JS中创建了一个小片段，告诉你如何做到这一点。这只是一个逻辑的例子。当然，你必须修改它，使其适用于React。基本上，您可以用正确的JSX元素替换HTML-Elements。
但你会明白

const tasks = [{
    name: 'task1',
    status: 'new'
  },
  {
    name: 'task2',
    status: 'progress'
  },
  {
    name: 'task3',
    status: 'completed'
  },
  {
    name: 'task4',
    status: 'progress'
  },
  {
    name: 'task5',
    status: 'new'
  }
];

const newTasks = [];
const inProgressTasks = [];
const completedTasks = [];

for (let task of tasks)  {
  switch (task.status) {
    case "new":
      newTasks.push(task);
      break;
    case "progress":
      inProgressTasks.push(task);
      break;
    case "completed":
      completedTasks.push(task);
      break;
  }
}

const numTableRows = Math.max(newTasks.length, inProgressTasks.length, completedTasks.length);

const rows = [];

for (let n = 0; n < numTableRows; n++) {
  cellNewTask = newTasks[n]?.name ?? '-';
  cellInProgressTask = inProgressTasks[n]?.name ?? '-';
  cellCompletedTask = completedTasks[n]?.name ?? '-';

  rows.push([cellNewTask, cellInProgressTask, cellCompletedTask]);
}

console.log(rows);

// Now you just need to loop over the rows with React and render the Table