T
TanStack•2y ago
eastern-cyan

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
}
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>
    }
  }
},
...
{
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?
1 Reply
eastern-cyan
eastern-cyanOP•2y ago
So I see that accessorFn on ColumnDef says "The accessor function to use when extracting the value for the column from each row." and that getValue from the Cell says "Returns the value for the cell, accessed via the associated column's accessor key or accessor function.", but I cannot seem to get them to play along. If I do this just for a sanity check 
{
  accessorKey: 'percentChange',
  header: 'Change',
  cell: ({ getValue }) => {
    // const change: number = Number(getValue() as number).toFixed(2);
    const change = getValue()
    if (change as number > 0) {
      <Text fz='sm' fw={600} c='green'>{`${change}%`}</Text>
    } else {
      <Text fz='sm' fw={600} c='red'>{`${change}%`}</Text>
    }
  },
  accessorFn: (row, index) => {
    console.log(row.percentChange.toFixed(2))
  }
},
{
  accessorKey: 'percentChange',
  header: 'Change',
  cell: ({ getValue }) => {
    // const change: number = Number(getValue() as number).toFixed(2);
    const change = getValue()
    if (change as number > 0) {
      <Text fz='sm' fw={600} c='green'>{`${change}%`}</Text>
    } else {
      <Text fz='sm' fw={600} c='red'>{`${change}%`}</Text>
    }
  },
  accessorFn: (row, index) => {
    console.log(row.percentChange.toFixed(2))
  }
},
the console.log() at the end has access to the type of percentageChange thus letting me do toFixed() on it. I guess I'm just missing something.

Did you find this page helpful?