dynamic table with antd from json

dynamic-table-antd-from-json.tsx

import React, { useEffect, useState } from 'react';
import { Table } from 'antd';

// Create the TableComponent
const TableComponent: React.FC = () => {
  const [columns, setColumns] = useState([]);
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch the JSON file dynamically
    fetch('/path/to/dynamicData.json')
      .then((response) => response.json())
      .then((jsonData) => {
        // Extract columns from the JSON data
        const dynamicColumns = extractColumns(jsonData);
        setColumns(dynamicColumns);
        setData(jsonData);
      })
      .catch((error) => console.error('Error fetching JSON:', error));
  }, []);

  // Helper function to extract columns from the JSON data
  const extractColumns = (jsonData) => {
    if (Array.isArray(jsonData) && jsonData.length > 0) {
      const firstRow = jsonData[0];
      return Object.keys(firstRow).map((key) => ({
        title: key,
        dataIndex: key,
        key,
      }));
    }
    return [];
  };

  return <Table columns={columns} dataSource={data} />;
};

export default TableComponent;