How to convert timestamp firestore to date string and display in antd table

Question

First, i have antd table and datasource from firestore with some fields and include timestamp field. my data is good running and show it in antd table, the problem is only timestamp value not show.

this is the code

get data

useEffect(() => {
  const unsub = //some code
  //some code
  //some code
  .onSnapshot((querySnapshot) => {
   let list = []
   querySnapshot.forEach((doc) => {
      list.push({
      id: doc.id,
      ...doc.data(),
      })
   })
   setData(list)
   setLoading(false)
   })

   return () => {
      unsub()
   }
},[])

data structure

[{id: '1', name: 'Gie', timestamp: {seconds: 1651770000, nanoseconds: 0}, {id: '2', name: 'Yud', timestamp: {seconds: 1652370000, nanoseconds: 0}]

timestamp format is automaticly from firestore timestamp field

antd table

<TableData
 pagination={{
     position: ['bottomRight'],
     pageSize: 10,
     total: 0,
     showTotal: (total) => `Total ${total} item`,
 }}
 onChange={handleTable}
 columns={userColumns}
 dataSource={filterTable == null ? data : filterTable}
 rowKey={(record) => record.id}
 rowSelection={rowSelection}
 loading={loading}
 size="middle"
 />

antd table usercolumn

const userColumns = [
        {//other column
         //other column
        },
        {
            title: 'Timestamp',
            dataIndex: 'timestamp',
            key: 'timestamp',
            width: '12%',
            renderCell: (params) => {
                return 
                <div>{params.timestamp.toDate()}</div> //doesnt work and not show anything
            },
            sorter: (a, b) => a.timestamp - b.timestamp,
            sortOrder: sortedInfo.columnKey === 'timestamp' && sortedInfo.order,
        },
]

another code im trying and not work

{new Date(params.timestamp).toDateString()}

{new Date(params.timestamp).toLocaleDateString('id-ID')}

{new Date(params.timestamp.seconds * 1000).toLocaleDateString('id-ID')}

but when i try convert with map is work perfectly

const date = data.map((item) => {timestamp: new Date(item.timestamp.seconds * 1000).toLocaleDateString('id-ID')})

console.log(date) //output : 5/6/2022

Answer 1

UPDATE FIXED

i don't know why antd table cant convert timestamp directly in renderCell or render. so i choose to set data from firestore like this.

useEffect(() => {
  const unsub = //some code
  //some code
  //some code
  .onSnapshot((querySnapshot) => {
   let list = []
   querySnapshot.forEach((doc) => {
      list.push({
      id: doc.id,
      name: doc.data().name,
      timestamp: doc.data().timestamp,
      dateString: new Date(doc.data().timestamp.seconds * 1000).toLocaleDateString('id-ID')
      })
   })
   setData(list)
   setLoading(false)
   })

   return () => {
      unsub()
   }
},[])

userColumn

const userColumns = [
            {//other column
             //other column
            },
            {
                title: 'Date',
                dataIndex: ['dateString', 'timestamp'],
                key: 'timestamp',
                width: '12%',
                render: (e, params) => {
                    return 
                    <div>{params.dateString}</div>
                },
                sorter: (a, b) => a.timestamp - b.timestamp,
                sortOrder: sortedInfo.columnKey === 'timestamp' && sortedInfo.order,
            },
    ]

Answer 2

It's hard to tell without knowing what you're passing into the actual <Table /> component. Check the content that is being passed to the column with the timestamp dataIndex is correct.

I have a feeling that your data looks like

{
    ....
    timestamp: "",
    ...
}

In which case, it should be params.toDate() instead of params.timestamp.toDate().