I have encountered an alignment issue with the ant design table while listing out my data. The columns are aligned to the right, but the titles for all columns should be aligned to the left by default. You can view the image illustrating this problem using this link: Ant design table alignment issue.
The misalignment of some titles may be caused by small width, which is adjustable. However, the major concern is that all titles are aligned to the right, except for column 1 'Round'.
Below is a snippet of my code:
const tableColumns = [
{
title: 'Round',
dataIndex: 'round',
width: 80,
},
{
title: 'Date',
dataIndex: 'date',
width: 100,
},
// Other column definitions go here...
];
const tableData = [
{
round: "Round 1",
date: "10-10-2021",
price: '0.05 USDC',
raiseSize: "1000000 SHI",
// Other data entries go here...
},
// Additional data entries go here...
];
To display the table, I use the following code:
<Table style={{marginTop:'20px'}} columns={tableColumns} dataSource={tableData} align='center' size="middle" />