How to format date in ant table?

Question

I have a table with 6 columns, one of these columns is a date, The default display format of the date is 2020-04-30T21:30:07.000Z I want to change it to 30-04-2020.

export const columns = [
    { title: `ID`, dataIndex: `invoice_id`},
    { title: `Invoice Number`, dataIndex: `invoice_number` },
    { title: `Amount`, dataIndex: `invoice_amount`},
    { title: `Store Name`, dataIndex: `store_name`},
    { title: `Supplier Name`, dataIndex: `supplier_name`},
    { title: `Creation Date`, dataIndex: `invoice_date`,},
  ]

<Table bordered columns={columns} dataSource={invoices_list} />

I believe there should be a way to pass date format to the columns. I looked into the ant table documentations but didn't find a solution.

Answer 1

After looking into the antd documentation (https://ant.design/components/table/#API) it doesn't seems to have a property to handle your case. You should duplicate your column invoices_date to invoices_date_printabble which will have the good format to be printed.

invoices_list.map(el => {
    let date = new Date(el.invoices_date)
    el.invoices_date_printabble = date.getDay()+"/"+date.getMonth()+"/"+date.getFullYear()
})

And now your list is printable.

export const columns = [
    { title: `ID`, dataIndex: `invoice_id`},
    { title: `Invoice Number`, dataIndex: `invoice_number` },
    { title: `Amount`, dataIndex: `invoice_amount`},
    { title: `Store Name`, dataIndex: `store_name`},
    { title: `Supplier Name`, dataIndex: `supplier_name`},
    { title: `Creation Date`, dataIndex: `invoices_date_printabble`},
  ]

<Table bordered columns={columns} dataSource={invoices_list} />