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
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,
},
]
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().