React-table: Cannot set `cell.className` v7

[tsujp]

Describe the bug

Cannot set cell.className in strict mode v7 in Cell:.

To Reproduce

const columns = [
  {
    Header: 'test',
    id: 'testid',
    accessor: 'test_property',
    Cell: ({ cell }: any) => {
      cell.className = '123'
      return <>{cell.value}</>
    }
  }
]

Expected behavior

The rendered td now has className of 123.

Desktop (please complete the following information):

• OS macOS Mojave
• Browser Firefox
• Version 70

---

Edit:

I managed to force the className on the props but it still doesn't apply the class. I suppose for now I have to use extra DOM elements just to style the tds I need.

const columns = [
  {
    Header: 'test',
    id: 'testid',
    accessor: 'test_property',
    Cell: ({ cell }: any) => {
      const test: {} = cell.getCellProps()
      cell.getCellProps = () => {
        return {
          ...test,
          className: '123'
        }
      }
      console.log(cell.getCellProps())
      return <>{cell.value}</>
    }
  }
]

The console log of cell.getCellProps()

Object { key: "cell_0_testid", style: {}, className: "123" }

The rendered DOM object, without class="123"

<td class="">whatever</td>

[tannerlinsley]

It's easy to forget with a hook that you control the rendering of your markup 100%. Here is a codesandbox that shows you how to build this into your renderer in a few lines:

https://codesandbox.io/s/tannerlinsleyreact-table-basic-evgp3

[cyberwombat]

@tannerlinsley Would love to see this stuff in the docs. Been at it for hours looking for what the docs say is called the getCellProps hook.

_"You can use the getCellProps hook to extend its functionality."_... I read that as: use a hook called getCellProps to extend the functionality of the getCellProps function.

The sandbox clarifies it all.

[taochu]

@tannerlinsley I'm getting a Property 'className' does not exist on type 'ColumnInstance<any>'. at cell.column.className when following the sandbox. Any idea on why that's happening?

[z1m1n]

@tannerlinsley I'm getting a Property 'className' does not exist on type 'ColumnInstance<any>'. at cell.column.className when following the sandbox. Any idea on why that's happening?

Temporary fix className: (cell.column as any).className