Where is the proper place to transform data for a column of the table?

[ErikAGriffin]

Presently the data for our table is returned from an api, and included in the table as thus:

const data = useMemo(() => apiData, [apiData]);

// ...

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
  columns,
  data
});

One of our columns contains a date value in a Timestamped format. We want to transform this timestamp into a humanized "x Days Ago" string. I'm curious where is the recommended place to do the data transformation? Should it be right from the start in the useMemo hook?

Something like:

  const data = useMemo(() => {
    return apiData.map(obj => {
      obj.updated_at = humanizeDaysAgo(obj.updated_at);
      return obj;
    });
  }, [apiData]);

or is there a more fitting / performant place to do this transformation? It is possible for additional data to be added to apiData via ajax.

Thanks for any insight!

[elaverack]

Just started using this package, but I would write a separate function to do that before you pass the data into useMemo just for readability. Also, I don't think you need to write [apiData], what goes between the brackets is any parameters you would feed into a function that generates the data.

For example:
const letterCount = useMemo(() => computeLetterCount(word), [word]);

However, I have not been able to get data generated from such a function to work in useTable afterwards.

[tannerlinsley]

If this is something that is purely presentational and doesn't change the core data you are putting in to the table, you can use a custom Cell renderer for the column:

columns = [{
  accessor: 'updated_at',
  Cell: ({ value }) => humanizeDaysAgo(value)
}]

Dunzo!

[gplatt]

This works well for me but I'm struggling to make a date range filter on an updated_at column. Some pointers on getting your NumberRangeColumnFilter to work with dates would be great.

[ncoughlin]

Create a couple of date conversion functions to convert your dates to numerical values that can be sorted.
For example into unix timestamps, or YYYYmmDD. The number range filters can filter the dates in that format. Then convert back to your desired display format for display.
There are libraries that can help with this, like Luxon.