React table filtering and column date sorting
can someone help me with column sorting and month filtering in react/tanstack table
7 Replies
exotic-emerald•14mo ago
post your table code, the relevant parts
actually check out my post
see if it helps
plain-purpleOP•14mo ago
ok pal
const columns = [
{
accessorKey: "post_time",
header: ({ column }) => (
<TableDateSortHeader column={column} label="Post Date" />
),
cell: ({ row }) => <TableDateCell row={row} value="post_time" />,
sortingFn: (rowA, rowB, columnId) => {
const dateA = new Date(rowA.getValue(columnId));
const dateB = new Date(rowB.getValue(columnId));
return dateA - dateB;
},
},
];
{
"_id": "66850e67fdb8138a51efede1",
"createdAt": "Wed, 03 Jul 2024 14:10:07 GMT",
"createdBy": "EMP0011",
"image_url": "https://reactnative-photos.s3.ap-south-1.amazonaws.com/photo-1709828593321-48973262f23e.jpeg",
"insta_post_id": "17860517765180544",
"message": "This is the automated post",
"org_name": "SBI",
"post_time": "Wed, 03 Jul 2024 14:46:00 GMT",
"status": "Posted",
"user_insta_id": "17841463326821368"
},
<section className="relative grow">
<div
className={blue-header absolute z-10 mx-auto ml-1 mt-2 flex h-[3rem] w-[99%] items-center justify-between px-8}
>
<TableHeadings />
<div className="ml-2 flex gap-2">
<Calendar /> // this is the month select component
<PlusButton className="" onClick={() => setIsOpen(true)}>
New Post
</PlusButton>
<NewPost isOpen={isOpen} setIsOpen={setIsOpen} />
</div>
</div>
<Table
inputType="month"
heading="aaa"
className="grow"
columns={columns}
data={data}
/>
</section>
conscious-sapphire•14mo ago
Hi @Ryuu did you found a solution ?
plain-purpleOP•14mo ago
No dude, done column filtering using tanstack tables default way. But done the month filtering by filtering the data and state which keeps month name
conscious-sapphire•14mo ago
I was working with Timestamp, so i parsed the data to Date on all items and formatted the display value on the cell render, so the tanstack hook works with the data values (Date value in this case) and make the sorting based on that. Seems that it should work
adverse-sapphire•14mo ago
hi, can you share you code, i'm running with a similar problem but it is with
DateRangeplain-purpleOP•14mo ago
ok, I will try my friend.
If possible please share that code part