时间戳

首页 > 解决方案 > 通过“单元格”选项更改数据时反应表无法过滤

reactjs - 通过“单元格”选项更改数据时反应表无法过滤

问题描述

我有列数组：

  const columns = useMemo(
    () => [
      {
        Header: 'User',
        sortType: 'basic',
        accessor: row => row,
        Cell: ({ row }) => (
          <div>
            <img src={row.original.user.image}
            />
            {row.original.user.name}
          </div>
        ),
      },
      {
        Header: 'Description',
        accessor: 'description',
        sortType: 'basic',
        Cell: ({ cell: { value } }) => shortText(value),
      },
      {
        Header: 'Created',
        accessor: 'createdAt',
        sortType: 'basic',
        Cell: ({ cell: { value } }) =>
          moment(value).format('DD-MM-YYYY HH:mm'),
      },
    ],
    [],
  )

过滤器不适用于User和Created列。在表中，我通过Cell函数更改数据，更改数据在表内呈现，但filterGobal方法通过data. 例如：在表内我有 fromat data: 11-11-2021 15-45，但在数据（来自后端）我有"2021-11-11T15:44:44.787Z"

User我觉得我的专栏也有同样的问题。在表中，我只有图像和名称用户。但在data我有对象：

user: {
   id: 1,
   name: "Jack",
   age: 18,
}

我如何使用globalFilter机智Cell方法？

标签： reactjsreact-table

解决方案

我找到了解决方案，我刚刚添加了accessor例如：

{
    Header: 'Created',
    sortType: 'basic',
    accessor: d => moment(d.createdAt).format('DD-MM-YYYY HH:mm'),
},

对于User列：

{
    Header: 'User',
    sortType: 'basic',
    accessor: row => row.user.name,
    Cell: ({ row }) => (
        <div>
        <img src={row.original.user.image}
        />
        {row.original.user.name}
        </div>
    ),
},

现在按参数react-table过滤。user.name如果您需要将年龄添加到列，那么您必须添加到accessor：

accessor: row => `${row.user.name} ${row.user.age}`,

推荐阅读