动态的ANTD表标题 - RECT

Question

我在这里使用ANTD表，我成功地垂直填充了一个标题，我想水平填充另一个，请参阅图像以进行澄清。

这是我的表列：

const columns = [
  {
    title: 'Days',
    dataIndex: 'date',
    defaultSorter: 'ascend',
    key: 'title',
    sorter: (a, b) => a.date.localeCompare(b.date),
    sortDirections: ['descend', 'ascend'],

    render: (date) => getDayName(new Date(date)),
  },
  {
    title: 'period',
    dataIndex: 'period',
  },
}

数据源或来自API的数据：

  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [query, setQuery] = useState('');

  const fetchData = async () => {
    setLoading(true);
    const { data } = await getTimetable();
    setData(data);
    setLoading(false);
  };
  useEffect(() => {
    fetchData();
  }, []);

渲染表数据：

  <TableContainer columns={columns} rowKey={(record) => record.login.uuid} dataSource={data} />

我想实现的目标：

我现在拥有的：

Answer 1

在 ANTD 表中，列需要按以下格式传递。

const columns = [
{
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
},
// .... rest of the cols
];

因此，要从您获得的响应数据中创建动态列，首先需要创建对象（COLS）作为上述格式，该格式需要通过＆lt; table; table; table; table colums = {forsatedcolsfromresponsedata} 。

因此，在您的情况下，您需要创建列[]如下格式。

let cols = [
{
    title: "Days",
    dataIndex: "date",
    defaultSorter: "ascend",
    key: "title",
    sorter: (a, b) => a.date.localeCompare(b.date),
    sortDirections: ["descend", "ascend"]
    render: (date) => getDayName(new Date(date)),
  },
{
    title: "period 1"
    key: "period 1"
    render: (row) => row.section + " - " + row.subject; // render function for customized data. 
},
{
    title: "period 2"
    key: "period 2"
    render: (row) => row.section + " - " + row.subject; // render function for customized data
},
// .... rest of the 'Period n' cols in the response.
];

使用以下方法，您可以通过传递响应数据来根据需要的格式创建COLS。

假设响应数据仅具有唯一的“周期” ，则此方法工作。

const generateColumns = (data) => {
  let cols = [];
  const days = {
    title: "Days",
    dataIndex: "date",
    defaultSorter: "ascend",
    key: "title",
    sorter: (a, b) => a.date.localeCompare(b.date),
    sortDirections: ["descend", "ascend"]
    render: (date) => getDayName(new Date(date)),
  };
  cols.push(days); // add 'Days' obj to Columns.
  
  // for render: property in cols need to return a function. Here creates that.
  const generateRender = (row) => {
    console.log("gen row----", row);
    return (row) => row.section + " - " + row.subject;
  };

  // create the col objects for each 'Period'. This method works assuming response data has only unique 'Periods'.
  data.map((row) => {

    let period = {}; // for create 'Period' obj for cols.
    period["title"] = row.period;
    period["key"] = row.period;
    period["render"] = generateRender(row); // only need this if you render customized data.
    cols.push(period); // add Current Period obj to Columns.
  });

  return cols;
};

现在，您可以将此方法传递到列 表格中的prop 带有返回动态cols的响应数据。

const App = () => (
  <div>
    <Table columns={generateColumns(data)} dataSource={data} />
  </div>
);

检查此完整演示代码。