react动态生成表格合并表头和排序功能

技术栈：react、hooks、antd

具体代码实现如下：

  useEffect(() => {
    // 设置表头
    setColumnList(columns);
    const { score_band = [] } =
      allScoreBandList?.find(
        (item) => item?.subject_id === selectSubjects[0]
      ) || {};
    if (!score_band?.length) return;
    const newColumns = score_band.map((range) => {
      const dataIndex = `range_${range.id}`;
      const { name, id } = range;
      return {
        title: `${name}率`,
        dataIndex: `${dataIndex}`,
        children: [
          {
            title: '人数',
            dataIndex: `${dataIndex}人数`,
            sorter: (a, b) => a[dataIndex] - b[dataIndex],
            render: (_, record) => {
              const { segments = [] } = record;
              const data = segments.find((item) => item.level === id);
              const { num } = data || {};
              return <span>{num || num === 0 ? num : '-'}</span>;
            },
          },
          {
            title: '占比',
            dataIndex: `${dataIndex}占比`,
            sorter: (a, b) => a[dataIndex] - b[dataIndex],
            render: (_, record) => {
              const { segments = [] } = record;
              const data = segments.find((item) => item.level === id);
              const { num_percent } = data || {};
              return (
                <span>
                  {num_percent || num_percent === 0 ? `${num_percent}%` : '-'}
                </span>
              );
            },
          },
          {
            title: '排名',
            dataIndex: `${dataIndex}排名`,
            sorter: (a, b) => a[dataIndex] - b[dataIndex],
            render: (_, record) => {
              const { segments = [] } = record;
              const data = segments.find((item) => item.level === id);
              const { num_percent_rank } = data || {};
              return (
                <span>{num_percent_rank >= 0 ? num_percent_rank : '-'}</span>
              );
            },
          },
        ],
      };
    });
    setColumnList(columns.concat(newColumns));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [allScoreBandList, selectSubjects[0]]);