React разделить значения столбцов таблицы на разные строки

#reactjs #antd

#reactjs #antd

Вопрос:

У меня есть таблица со столбцами, и в основном данные, которые я отправляю, в некоторых столбцах есть другой массив. Если это массив, мне нужно разделить его на отдельные строки.

 import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const columns = [
  {
    title: "Classes",
    dataIndex: "classes"
  },
  {
    title: "Grades",
    dataIndex: "grades"
  },
  {
    title: "Credentials",
    dataIndex: ["classMap", "Teacher with credentials"]
  },
  {
    title: "No Credentials",
    dataIndex: ["classMap", "Teacher no credentials"]
  }
];

const data = [
  {
    key: "1",
    classes: ["Chinese", "Italian"],
    grades: ["98", "64"],
    classMap: {
      "Teacher with credentials": ["School board cred", "Teaching school"],
      "Teacher no credentials": ["no credentials"]
    }
  }
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} pagination={false} />,
  document.getElementById("container")
);
 

Я сделал этот пример. Если вы посмотрите в codepen, данные, допустим, для классов находятся в одной строке. Мне нужно, чтобы они были разделены на отдельные строки

Комментарии:

1. Пожалуйста, добавьте код CSS

2. @OrAssayag нет css, он просто использует таблицы дизайна antd

3. где ссылка на codepen? @CHris905

4. codesandbox.io/s/multiple-sorter-antd485-forked-j9piw @macphilips

5. codesandbox.io/s/multiple-sorter-antd485-forked-j9piw @OrAssayag