React table can't filtering when change data by 'Cell' option

user_6678345 0
Viewed 819

I have columns array:

  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'),
      },
    ],
    [],
  )

Filter not working for User and Created column. In table I change data by Cell function and changing data is render inside table, but filterGobal method filtering by data. E.g: inside table I have fromat data: 11-11-2021 15-45, but in data (from backend) I have "2021-11-11T15:44:44.787Z"

I thing I have this same problem with User column. In table I have only image and name user. But in data I have object:

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

How I can using globalFilter wit Cell method?

react-table reactjs
1 Answers

I found resolve, I just added accessor e.g:

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

and for User column:

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

Now react-table filters by user.name parameter. If you need add age to column, then you must add to accessor:

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