How can i figured out that in the columnDef, custom cell is passed?

[panbehkar]

Hi there,
I'm using @tanstack/react-table": "^8.5.30
Inside my DataTable component, I need to figure out whether the cell function passed to the columnDef or not!
Because I want to use a different class name if the cell function is passed to the columnDef.

I know it's the wrong way, but I had to fix it temporarily like this:

components/DataTable.tsx

     <div className="table-body">
          {table.getRowModel().rows.map(row => (
            <div className="table-row" key={row.id}>
              {row.getVisibleCells().map(cell => (
                  <div className="table-cell" key={cell.id}>
                    <div className={
                        cell.column.columnDef.cell?.toString().includes('context')
                          ? 'custom-cell-content'
                          : 'cell-content'
                      }
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </div>
                  </div>
                ))}
            </div>
          ))}
        </div>

And my columnDef is like this:

pages/users.tsx

const usersTableColumns = ( users: UsersData ): ColumnDef<UsersTableData>[] => [
  { accessorKey: 'firstName', header: 'First Name' },
  { accessorKey: 'lastName', header: 'Last Name' },
  { accessorKey: 'status', header: 'Status, cell: context => <Badge>{context.getValue()}</Badge>) }
]

How can I get rid of this part of the code:
cell.column.columnDef.cell?.toString().includes('context') ? 'custom-cell-content' : 'cell-content'

Is there any option to check if the cell function is passed?
I mean like this:
cell.column.columnDef.isCustomCell ? 'custom-cell-content' : 'cell-content'

Thank you in advance :)