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

const change

that

Type 'string' is not assignable to type 'number'.

Type 'string' is not assignable to type 'number'.

. From what could gather I thought the purpose of the

createColumnHelper()

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()

getValue()

but that was unknown. Is there a way so the accessor methods just know the type of each cell based off of the

ColumnDef

ColumnDef

TanStack•3y ago•

1 reply

radical-lime

Access types of the cell value

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

const change

that

Type 'string' is not assignable to type 'number'.

Type 'string' is not assignable to type 'number'.

. From what could gather I thought the purpose of the

createColumnHelper()

createColumnHelper()

getValue()

getValue()

but that was unknown. Is there a way so the accessor methods just know the type of each cell based off of the

ColumnDef

ColumnDef

Access types of the cell value

Similar Threads

Access types of the cell value

Similar Threads

Similar Threads

Similar Threads