Ant design tables not displaying its style properties in Jhipster 7.3.1

Question

I tried using Ant design table to display data on a component, but the table didn't show except the text. What type of data-table can I use with crud functionalities that will merge well with my jhipster version..

See the codes

       import { Table } from 'antd';
       const [gridData, setGridData] = useState([]);


         useEffect(() => {
         loadData();
        }, []);

        const loadData = async () => {
        const response = await axios.get(apiUrl);
        setGridData(response.data);
      };

        const modifiedData = gridData.map(({ ...item }) => ({
        ...item,
         key: item.id,
         }));

       const columns = [
      { title: 'ID', dataIndex: 'id' },
      { title: 'Name', dataIndex: 'name', editable: true },
       ];

       return (
          <>
    <h2>Hello</h2>
    <Table columns={columns} dataSource={modifiedData} bordered />
     </>
    );
    };

Answer 1

I added this line of code in my App.scss file. It made the Application sense the presence of the package.

     @import '~antd/dist/antd.css';