Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Dates as Column Headers in Table Ant Design

I have a Table like this:

enter image description here

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

enter image description here

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Just do some data transforms on the columns and dataSource props.

    import { Table } from 'antd';

export const App = () => {
  const dataSource = [
    { id: 1, date: '2/1/2017', product_id: 1, inventory: 180 },
    { id: 2, date: '9/1/2017', product_id: 1, inventory: 167 },
    { id: 3, date: '16/1/2017', product_id: 1, inventory: 320 },
    { id: 4, date: '23/1/2017', product_id: 1, inventory: 500 },
    { id: 5, date: '30/1/2017', product_id: 1, inventory: 20 },
  ];

  // const columns = [
  //   { dataIndex: 'id', title: 'ID' },
  //   { dataIndex: 'date', title: 'Date' },
  //   { dataIndex: 'product_id', title: 'Product_id' },
  //   { dataIndex: 'inventory', title: 'Inventory' },
  // ];

  const transformedColumns = [
    { dataIndex: 'product_id', title: 'product_id' },
    ...dataSource.map((v) => ({
      dataIndex: v.date,
      title: v.date,
    })),
  ];
  const transformedDataSource = dataSource.reduce((acc, cur) => {
    acc[cur.date] = cur.inventory;
    acc.product_id = cur.product_id;
    return acc;
  }, {} as any);

  return (
    <Table columns={transformedColumns} dataSource={[transformedDataSource]} />
  );
};

    Output:

    enter image description here

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search