英文:
Tanstack react-table create column from two accessor keys
问题
You can achieve this by modifying the accessorFn in your column definition. Here's the translated code:
import { ColumnDef } from "@tanstack/react-table";
import { Reminder } from "@prisma/client";
export const columns: ColumnDef<
Omit<Reminder, "updatedAt" | "createdAt" | "id" | "userId"> & {
recurring: boolean;
}
>[] = [
{
accessorFn: (frequency: string, date: string) => {
// Combine recurringString and recurringDigit into one entity here
return `${frequency} ${date}`;
},
header: '每次'
}
];
This code will create a column called '每次' (Chinese for 'Every') that combines the frequency (recurringString) and date (recurringDigit) into one entity.
英文:
Is there any way to create a column from tanstack/react-table using two accessor keys? The data I'm receiving comes in this form:
model Reminder {
id String @id @default(auto()) @map("_id") @db.ObjectId
userId String @db.ObjectId
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
recurringDigit String?
recurringString String?
priority String
title String
description String?
location String?
user User @relation(fields: [userId], references: [id], onDelete: Cascade )
}
And I'd like to create one column called 'Every' that combines both recurringString and recurringDigit into one entity, this is what I have, not working at all:
import { ColumnDef } from "@tanstack/react-table";
import { Reminder } from "@prisma/client";
export const columns: ColumnDef<
Omit<Reminder, "updatedAt" | "createdAt" | "id" | "userId"> & {
recurring: boolean;
}
>[] = [
{
accessorFn: (frequency: string, date: string) => string,
header: 'Every'
}
];
答案1
得分: 1
找到解决方案！
您可以执行以下操作：
只需提供反引号并在其中执行您想要的逻辑，然后返回该结果：
{
id: "Every",
accessorFn: (row) => `${row.recurringDigit} ${row.recurringString}`,
}
希望对任何人有所帮助。
英文:
Found the solution!
You can do the following:
Just provide backticks and do whatever logic you want inside them and return that result:
{
id: "Every",
accessorFn: (row) => `${row.recurringDigit} ${row.recurringString}`,
}
Hope this helps anyone
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论