Dates as Column Headers in Table Ant Design

Question

I have a Table like this:

How to create the table above to a result like below using ant design:

I tried to search to create table like this but i don't see it.Please let me know if you have done it. I thank you very much if you find something about this table.

Answer 1

Here is my solution to your problem, I hope it helps:

const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    // Call API to get data
    fetch("your-api-endpoint")
      .then((response) => response.json())
      .then((data) => {
        //update data
        setDataSource(data);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }, []);

  const convertData = (data) => {
    const transformedData = {};

    data.forEach((item) => {
      const { date, product_id, inventory } = item;

      if (!transformedData[product_id]) {
        transformedData[product_id] = {
          product_id: product_id,
        };
      }

      transformedData[product_id][date] = inventory;
    });
    console.log("transformedData", transformedData);
    return Object.values(transformedData);
  };
  const getColumns = (data) => {
    if (data.length === 0) {
      return [];
    }

    const columns = Object.keys(data[0]).map((key) => ({
      title: key,
      dataIndex: key,
      key: key,
    }));

    return columns;
  };

  const transformedData = convertData(dataSource);

  const columns = getColumns(transformedData);

  return <Table rowKey="key" dataSource={transformedData} columns={columns} />;

if solve your problems, then reply the result