使用 Tanstack Table 在 React 中使列可编辑

Question

我有一个用户表，它在 Tanstack 表中填充和显示数据。有些列具有排序功能。现在我正在尝试使某些列可编辑。例如：状态列需要可通过填充状态的下拉菜单进行编辑，角色列需要可编辑为文本。

代码片段：

import { ColumnDef } from '@tanstack/react-table'
import { Button } from 'flowbite-react'
import Link from 'next/link'
import { I_UserPublic } from 'app/models/user.types'

// This type is used to define the shape of our data.
export type UserDescriptor = {
    id: string;
    firstName: string;
    lastName: string;
    userName: string;
    email: string;
    phone: string;
    title: string;
    organization: string;
    cocom: string;
    base: string;
    role: string[];
    status: string;
}

export const columns: ColumnDef<I_UserPublic>[] = [
    {
        accessorKey: "firstName",
        header: "First Name",
        enableResizing: true,
    },
    {
        accessorKey: "lastName",
        header: "Last Name",
    },
    {
        accessorKey: "userName",
        header: "Username",
    },
    {
        accessorKey: "email",
        header: ({ column }) => {
            return (
                <span className="flex justify-between">
                    Email
                    <Link className="" href="#" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
                        <svg className="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 4v16M7 4l3 3M7 4 4 7m9-3h6l-6 6h6m-6.5 10 3.5-7 3.5 7M14 18h4"/>
                        </svg>
                    </Link>
                </span>
            )
        },
    },
    {
        accessorKey: "phone",
        header: "Phone",
    },
    {
        accessorKey: "function",
        header: "Function Area",
    },
    {
        accessorKey: "organization",
        header: ({ column }) => {
            return (
                <span className="flex justify-between">
                    Branch
                    <Link className="mx-4" href="#" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
                        <svg className="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 4v16M7 4l3 3M7 4 4 7m9-3h6l-6 6h6m-6.5 10 3.5-7 3.5 7M14 18h4"/>
                        </svg>
                    </Link>
                </span>
            )
        },
    },
    {
        accessorKey: "cocom",
        header: ({ column }) => {
            return (
                <span className="flex justify-between">
                    COCOM
                    <Link className="mx-4" href="#" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
                        <svg className="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 4v16M7 4l3 3M7 4 4 7m9-3h6l-6 6h6m-6.5 10 3.5-7 3.5 7M14 18h4"/>
                        </svg>
                    </Link>
                </span>
            )
        },
    },
    {
        accessorKey: "base",
        header: ({ column }) => {
            return (
                <span className="flex justify-between">
                    Base
                    <Link className="" href="#" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
                        <svg className="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 4v16M7 4l3 3M7 4 4 7m9-3h6l-6 6h6m-6.5 10 3.5-7 3.5 7M14 18h4"/>
                        </svg>
                    </Link>
                </span>
            )
        },
    },
    {
        accessorKey: "role",
        header: ({ column }) => {
            return (
                <span className="flex justify-between">
                    User Role
                    <Link className="" href="#" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
                        <svg className="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 4v16M7 4l3 3M7 4 4 7m9-3h6l-6 6h6m-6.5 10 3.5-7 3.5 7M14 18h4"/>
                        </svg>
                    </Link>
                </span>
            )
        },
    },
    {
        accessorKey: "status",
        header: ({ column }) => {
            return (
                <span className="flex justify-between">
                    User Status
                    <Link className="" href="#" onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
                        <svg className="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 4v16M7 4l3 3M7 4 4 7m9-3h6l-6 6h6m-6.5 10 3.5-7 3.5 7M14 18h4"/>
                        </svg>
                    </Link>
                </span>
            )
        },
    },
]

accessorKey 是从另一个文件中提取的，我在该文件中使用了用于填充的硬编码数据。

我尝试使用 tanstack 表中的标签将其设为下拉列表或编辑，但似乎无法弄清楚。只是希望能够编辑填充的数据，因为这将用作用户表单来更改基于状态和角色。

Answer 1

您可以使用列配置中的

cell

属性指定如何呈现单元格，如下所示：

cell: (info) => info.getValue()

。因此，如果您想在“角色”列中呈现受控文本输入，您可以执行以下操作：

    {
      accessorKey: "role",
      cell: (info) => {
        return <input type="text" value={info.getValue()} onChange={handleChange}/>
      },
    },

其中

handleChange

更新传入表中的数据