How to use custom data object - not array

[zanzlender]

Hello, I have a question... The app I'm currently developing has a requirement for pagination....

My logic is to have a data object where the object's properties match the page. E.g.

const data = {
  1: [ { id: 1, first_name: "Marco", last_name: "Polo" }, .... ],
  2: [ array of users ],
  3:  [ array of users ]
}

However when I try to add that to my table data doesn't get rendered at all....

Accessor:

 const columns = useMemo(
    () => [
      columnHelper.accessor((data) => data[currentPage]?.first_name, {
        id: 'firstName',
        header: () => (
          <TableHeading style={{ minWidth: 150 }}>First name</TableHeading>
        ),
        cell: (data) => {
          console.log('MY DATA', data);
          return <TableData>{data[currentPage]?.getValue()}</TableData>;
        },
      })
   ....

Can someone please tell me what 'm doing wrong...

Also, the code console.log('MY DATA', data); doesn't get printed at all...

And neither of these get printed either...

...
       <tbody>
            {console.log('GTM', table)}
            {table.getRowModel().rows.map((row) => {
              console.log('here2', row);

              return (
                <TableRow key={row.id}>
                  {row.getVisibleCells().map((cell) => {
                    return (
                      <td key={`cell-${cell.id}`}>
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext(),
                          cell.id,
                        )}
                      </td>
                    );
                  })}
                </TableRow>
              );
            })}
          </tbody>
....