TanStackT
TanStack•2y ago•
1 reply
radical-lime

Access types of the cell value

First time really taking a look at tanstack table. I'm trying to get off of muix-data-table potentially to use some of the (should be free features) like row pinning etc.

Currently have a semi working table in my react app working with data the looks like this
export interface TransformedTableRow {
  id: string
  fieldName: string
  prevMonth: number
  currMonth: number
  percentChange: number
}


Within the cells in a specific column I am trying to format the data in a particular way, like in this example:
{
const tableColumns: ColumnDef<TransformedTableRow>[] = [
  accessorKey: 'percentChange',
  header: 'Change',
  cell: ({ getValue }) => {
    const change: number = Number(getValue() as number).toFixed(2);
    if (change > 0) {
      <Text fz='sm' fw={600} c='green'>{`${change}%`}</Text>
    } else {
      <Text fz='sm' fw={600} c='red'>{`${change}%`}</Text>
    }
  }
},
...

I'm getting an error on the const change that Type 'string' is not assignable to type 'number'.. From what could gather I thought the purpose of the createColumnHelper() was supposed to help with this in some sort. But is everything as far as cells are concerned just strings? Might be missing a function somewhere since the documentation is pretty large and I'm just getting started, or if there is a better way to do this? I also obviously tried just using the value from getValue() but that was unknown. Is there a way so the accessor methods just know the type of each cell based off of the ColumnDefs?
Was this page helpful?