T
TanStack•3y ago
like-gold

How to add unit text to the end of a cell that is a number, while not having that text affect filter

Lets say I have a table with fields name age and weight. I would like to add years and lbs to the end of the age and weight fields respectfully, but I don't want the text to affect the sort and filter functionality I have in react tables. So both sort and filter should essentially only be looking at the numbers not the appended text.
12 Replies
deep-jade
deep-jade•3y ago
I think you can just set cell on the column config.
like-gold
like-goldOP•3y ago
I did that for the name field, but when I did that It seemed that I lost the sort functionality I am trying now It worked! thank you so much!!!!!!! One of my fileds is crashing the code tho #### In the below code the object with the Name header crashes the code unless I remove the accessor field. I find this weird because without it I cannot get the sort functionality. Event weirder is that it works fine for all the other objects. Any ideas? Scroll down for more info 
  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "first_name",
        Cell: ({ row }: any) =>{
          // `${row.original.first_name} ${row.original.last_name}`,
          console.log(row.original)
         return `${row.original.first_name} name`
        },
      },
      {
        Header: "Age",
        accessor: "age",
        Filter: RangeSliderAge,
        filter: "between",
        Cell: ({ row }: any) => `${row.original.age} years`,
      },
      {
        Header: "WAR",
        accessor: "adjustedRating",
        Filter: RangeSliderWar,
        filter: "between",
        Cell: ({ row }: any) => `${row.original.adjustedRating} WAR`,
      },
      {
        Header: "Weight",
        accessor: "most_recent_weigh_in",
        Filter: RangeSliderWeight,
        filter: "between",
        Cell: ({ row }: any) => `${row.original.most_recent_weigh_in} lbs`,
      },
    ],
    []
  );
  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "first_name",
        Cell: ({ row }: any) =>{
          // `${row.original.first_name} ${row.original.last_name}`,
          console.log(row.original)
         return `${row.original.first_name} name`
        },
      },
      {
        Header: "Age",
        accessor: "age",
        Filter: RangeSliderAge,
        filter: "between",
        Cell: ({ row }: any) => `${row.original.age} years`,
      },
      {
        Header: "WAR",
        accessor: "adjustedRating",
        Filter: RangeSliderWar,
        filter: "between",
        Cell: ({ row }: any) => `${row.original.adjustedRating} WAR`,
      },
      {
        Header: "Weight",
        accessor: "most_recent_weigh_in",
        Filter: RangeSliderWeight,
        filter: "between",
        Cell: ({ row }: any) => `${row.original.most_recent_weigh_in} lbs`,
      },
    ],
    []
  );
And actually it seems even this breaks my code, but my accessor label is correct: 
      {
        Header: "Name",
        accessor: "first_name",
      },
      {
        Header: "Name",
        accessor: "first_name",
      },
like-gold
like-goldOP•3y ago
this is the error I get in both cases
No description
like-gold
like-goldOP•3y ago
In order to get the code to not crash I must do this: 
      {
        Header: "Name",
        Cell: ({ row }: any) => {
          return `${row.original.first_name} ${row.original.last_name}`;
        },
      },
      {
        Header: "Name",
        Cell: ({ row }: any) => {
          return `${row.original.first_name} ${row.original.last_name}`;
        },
      },
In this case sort feature doesen't work tho
multiple-amethyst
multiple-amethyst•3y ago
shouldn't this be like this? 
    {
        Header: "Name",
        accessor: ({ row }: any) => {
          return `${row.first_name} ${row.last_name}`;
        }
        Cell: (cell) => {
          return `${cell.getValue()}`; // This will be "row.firstname row.lastname"
        },
      },
    {
        Header: "Name",
        accessor: ({ row }: any) => {
          return `${row.first_name} ${row.last_name}`;
        }
        Cell: (cell) => {
          return `${cell.getValue()}`; // This will be "row.firstname row.lastname"
        },
      },
Similar case using column helper in docs (Basic react example) 
 columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
    footer: info => info.column.id,
  }),
 columnHelper.accessor(row => row.lastName, {
    id: 'lastName',
    cell: info => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
    footer: info => info.column.id,
  }),
and without columnHelper (filters example for React) 
 {
            accessorFn: row => `${row.firstName} ${row.lastName}`,
            id: 'fullName',
            header: 'Full Name',
            cell: info => info.getValue(),
            footer: props => props.column.id,
            filterFn: 'fuzzy',
            sortingFn: fuzzySort,
          },
 {
            accessorFn: row => `${row.firstName} ${row.lastName}`,
            id: 'fullName',
            header: 'Full Name',
            cell: info => info.getValue(),
            footer: props => props.column.id,
            filterFn: 'fuzzy',
            sortingFn: fuzzySort,
          },
and about the unit I think you can do something like this 
 {
    accessorFn: row => row.weight,
// or
//  accessor: 'weight',
// this depends on your data structure as well
    id: 'weight',
    header: 'Weight',
    cell: info => <span>info.getValue() lbs<span>,
 },
 {
    accessorFn: row => row.weight,
// or
//  accessor: 'weight',
// this depends on your data structure as well
    id: 'weight',
    header: 'Weight',
    cell: info => <span>info.getValue() lbs<span>,
 },
like-gold
like-goldOP•3y ago
Thank you so much for taking the time to help me Unfortunately the solution crashes my code with a renderer error 
      {
        Header: "Name",
        accessor: ({ row }: any) =>
          `${row.original.first_name} ${row.original.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
      {
        Header: "Name",
        accessor: ({ row }: any) =>
          `${row.original.first_name} ${row.original.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
Also I have updated my working code since I asked this . 
      {
        Header: "Name",
        Cell: ({ row }: any) => {
          return (
            <Link to={`/wrestlerProfile/${row.original.wrestler_id}`}>
              {row.original.first_name} {row.original.last_name}
            </Link>
          );
        },
      },
      {
        Header: "Name",
        Cell: ({ row }: any) => {
          return (
            <Link to={`/wrestlerProfile/${row.original.wrestler_id}`}>
              {row.original.first_name} {row.original.last_name}
            </Link>
          );
        },
      },
multiple-amethyst
multiple-amethyst•3y ago
try adding id to the column 
{
        Header: "Name",
        id: "name",
        accessor: ({ row }: any) =>
          `${row.original.first_name} ${row.original.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
{
        Header: "Name",
        id: "name",
        accessor: ({ row }: any) =>
          `${row.original.first_name} ${row.original.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
or try removing .original 
{
        Header: "Name",
        id: "name",
        accessor: ({ row }: any) =>
          `${row.first_name} ${row.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
{
        Header: "Name",
        id: "name",
        accessor: ({ row }: any) =>
          `${row.first_name} ${row.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
like-gold
like-goldOP•3y ago
Unfortunately that didn't work either. I really really appreciate you taking the time to try and help me with this I am totally lost on this one. Which is weird because this seems like a simple thing
multiple-amethyst
multiple-amethyst•3y ago
maybe try recreating the table in sandbox to isolate the problem Is it still the same problem?
like-gold
like-goldOP•3y ago
Ya code crashes whenever I add an accessor to the object with the Header Name
multiple-amethyst
multiple-amethyst•3y ago
it might be due to the "name" being keyword, but not sure or rather property of some objects
like-gold
like-goldOP•3y ago
Ok I will try that which solution should I try with this new key? Unfortunately this also breaks 
      {
        Header: "Wrestler Name",
        id: "wrestler_name",
        accessor: ( row : any) =>
          `${row.original.first_name} ${row.original.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
      {
        Header: "Wrestler Name",
        id: "wrestler_name",
        accessor: ( row : any) =>
          `${row.original.first_name} ${row.original.last_name}`,
        Cell: (cell: any) => {
          return `${cell.getValue()}`;
        },
      },
It breaks if I remove original as well

Did you find this page helpful?