[v8]: columnVisibility doesn't work when accessorKey is a nested field

[simplecommerce]

Hi,

In my current project, I have a column with the following accessorKey description.en.
I am able to display the data fine because I passed a custom accessorFn that uses an underlying get(column,accessorKey) from lodash to fetch the nested property.

My issue is I can't use this accessorKey with columnVisibility, it won't work.
It does work if I also add a id with a normal string to use to hide the column.

But when using the id, this id is what is being used instead of the accessorKey when I try to filter the table.

Any ideas?

[jdhrivas]

@simplecommerce did you figure this out? I'm having the same issue, I have a column with accessKey "address.city" and I'm trying to hide it by default. I tried passing the full obj like this:

const [columnVisibility, setColumnVisibility] = useState({
address: {
city: false
}
}) 

I also tried this:

const [columnVisibility, setColumnVisibility] = useState({
"address.city": false
}) 

The column still visible.

[simplecommerce]

@simplecommerce did you figure this out? I'm having the same issue, I have a column with accessKey "address.city" and I'm trying to hide it by default. I tried passing the full obj like this:

const [columnVisibility, setColumnVisibility] = useState({
address: {
city: false
}
}) 

I also tried this:

const [columnVisibility, setColumnVisibility] = useState({
"address.city": false
}) 

The column still visible.

I am not sure what I did, I know it works on my end. Have you tried updating to the latest version?
I just did a quick test on my end with a field that is name.en and when I console.log my columnVisibility state, it shows name_en.
So there seems to be a logic handling this. It is possible that this issue was fixed in an update.
My current version is : @tanstack/[email protected].

Oh an btw, I am using item.toggleVisibility to toggle the visibility of the column itself.

if updating to the latest version doesn't work, try also replacing "." for "_" since this is what I see in my console.log.

Let me know if that helps.

[jdhrivas]

That was great advise! Thanks! I console.log my columnVisibility of my view columns component.

and notice the id was "address_city". Now my initial state is set like this and it works!

setColumnVisibility({
      id: false,
      created: false,
      updated: false,
      address_street1: false,
      address_city: false,
      address_state: false,
      address_postal: false,
    })

[ZRktty]

Thanks for clue guys!
In my example the backend returning _count: { products: 0} nested prop.

In columns.tsx I solved it with:

{
    id: "productCount", // must be present if using accessorFn
    accessorFn: (row) => row._count?.products ?? "-",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Products" />
    ),
    size: 100,
    cell: ({ row }) => {
      const count = row.getValue("productCount") as number;
      return (
        <span className="font-medium">{count}</span>
      );
    },
  },