Does accessorFn work on the server side and create elements?

[katanazero86]

const statusAccessFn = (row: ApprovalDto) => {
    const status = row.requestItems?.[0]?.status
    return (
      status && (
        <Badge variant='light' color={RequestItemStatusBadgeColor[status as RequestItemStatus]}>
          {RequestItemStatusDisplayName[status as RequestItemStatus]}
        </Badge>
      )
    )
  }


{
        id: 'status',
        header: 'Status',
        accessorFn: row => row.requestItems?.[0]?.status,
        Cell: ({ cell }) => {
          return <>{statusAccessFn(cell.row.original)}</>
        },
        filterVariant: 'multi-select',
        mantineFilterMultiSelectProps: {
          data: Object.values(RequestItemStatus).map(status => ({
            value: status,
            label: RequestItemStatusDisplayName[status],
          })),
        },
        size: 160,
      },
      

I'm using mantine-react-table in Next.js.

I'm getting a hydration error, so when I look into it, I see undefined in the console output for the accessorFn section on the server side, as expected, since there's no data on the server side. However, the console output for the Cell section only shows up in the browser console.

Doesn't Cell work on the server side?

{
        id: 'status',
        header: 'Status',
        accessorFn: row => row.requestItems?.[0]?.status ?? null,
        Cell: ({ cell }) => {
          const status = cell.getValue<string | null>()
          return status ? (
            <Badge variant='light' color={RequestItemStatusBadgeColor[status]}>
              {RequestItemStatusDisplayName[status]}
            </Badge>
          ) : null
        },
        filterVariant: 'multi-select',
        mantineFilterMultiSelectProps: {
          data: Object.values(RequestItemStatus).map(status => ({
            value: status,
            label: RequestItemStatusDisplayName[status],
          })),
        },
        size: 160,
      },

If you modify the code as above, the hydration error will disappear. What does the table column render on the server side?