Global filter is not working with custom cell

  {
    Header: 'Client Name ',
    Footer: 'Last Name',
   
    accessor: (props) => (
      <>
        <div class="text-sm text-gray-900">{props.clientname}</div>
        <div class="text-sm text-gray-600">{props.country}</div>
        <div class="text-sm text-gray-400">{props.clientstatus}</div>
      </>
    ),
  },

With custom cell (like above) global filter is not working

if i change code above to following(below) then global filter work with this cell

  {
    Header: 'Client Name ',
    Footer: 'Last Name',
   accessor: 'clinetname"
  },

is there any way to make global filter work with custom cell ?

[IHIutch]

Coming back here, it does look like you can achieve this by making your accessor an array, like so:

{
        Header: 'Client ',
        accessor: (props) => ([props.name, props.country]),
        Cell: ({ value }) => {
          const [ clientname, country ] = value
          return (
            <>
              <div class="text-sm text-gray-900">{clientname}</div>
              <div class="text-sm text-gray-600">{country}</div>
            </>
        )},
      },

[wbolduc]

accessor should not return components like that

https://react-table.tanstack.com/docs/api/useTable#column-options “The data returned by an accessor should be primitive and sortable.”