Align columns and rows for ant design table

Question

I'm using ant design table to list out my datas but the columns are aligned to the right and by default the titles for all the columns should be aligned to the left. Here's the link to the image: Ant design table alignment issue.

Some of the titles are caused by small width but those are adjustable. The problem is that the titles are aligned to the right, except column 1 which is Round.

Here's my code:

const tableColumns = [
        {
            title: 'Round',
            dataIndex: 'round',
            width: 80,
        },
        {
            title: 'Date',
            dataIndex: 'date',
            width: 100,
        },
        {
            title: 'Price',
            dataIndex: 'price',
            width: 70,
        },
        {
            title: 'Raise Size',
            dataIndex: 'raiseSize',
            width: 100,
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            width: 100,
        },
        {
            title: 'Market Cap',
            dataIndex: 'marketCap',
            width: 50,
        },
        {
            title: 'Max Allocation',
            dataIndex: 'maxAllocation',
            width: 50,
        },
        {
            title: 'Filled',
            dataIndex: 'filled',
            width: 100,
        },
        {
            title: 'Status',
            dataIndex: 'status',
            width: 100,
        },
        {
            title: 'Yield',
            dataIndex: 'yieldPer',
            width: 100,
        },
    ];

    const tableData = [
        {
          round: "Round 1",
          date: "10-10-2021",
          price: '0.05 USDC',
          raiseSize: "1000000 SHI",
          amount: "25M",
          marketCap:"10M",
          maxAllocation: "10M",
          filled: "1379%",
          status: "Filled",
          yieldPer:"+223%"
        },
        {
          round: "Round 2",
          date: "17-10-2021",
          price: '0.10 USDC',
          raiseSize: "1000000 SHI",
          amount: "25M",
          marketCap:"20M",
          maxAllocation: "10M",
          filled: "1579%",
          status: "Filled",
          yieldPer:"+203%"
        },
        {
          round: "Round 3",
          date: "28-10-2021",
          price: '0.15 USDC',
          raiseSize: "1000000 SHI",
          amount: "25M",
          marketCap:"30M",
          maxAllocation: "10M",
          filled: "1379%",
          status: "Upcoming",
          yieldPer:""
        },
      ];

And here is where i use the table:

<Table style={{marginTop:'20px'}} columns={tableColumns} dataSource={tableData} align='center' size="middle" />

Answer 1

Looks like align property for Column is something you are looking for:

const tableColumns = [
        {
            title: 'Round',
            dataIndex: 'round',
            width: 80,
        },
        {
            title: 'Date',
            align: 'right', // <--- this way
            dataIndex: 'date',
            width: 100,
        },
...