Using react-table, accessing data nested in object

Question

I'm creating a table using react-table and Typescript. Now I'm having some difficulty in accessing the data I get returned from my API. I'm just using Google Books API. Now I've created a table component, which receives some data which is an array with objects. Now these objects contain nested data which I have defined in a Books interface, in which I only include the data I need from the API response.

Below is my Book interface:

export interface Book {
  id: number;
  isbn: {
    volumeInfo: {
      industryIdentifiers: {
        type: string;
        identifier: string;
      }[];
    };
  };
  title: {
    volumeInfo: {
      title: string;
    };
  };
  authors: {
    volumeInfo: {
      authors: string[];
    };
  };
  publishedDate: {
    volumeInfo: {
      publishedDate: string[];
    };
  };
}

I've created an array where I've defined my columns using documentation from react-table:

import { Book } from "./home.types";

const columnHelper = createColumnHelper<Book>();

const columns = [
  columnHelper.accessor("id", {
    header: () => "ID",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("isbn", {
    header: () => "ISBN",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("title", {
    header: () => "Title",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("authors", {
    header: () => "Authors",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("publishedDate", {
    header: () => "Date of publication",
    cell: (info) => info.getValue(),
  }),
];

The issue I'm experiencing is that the data is being loaded in the table, but all other data isn't, and I don't really see why. I'm pointing to the locations of the data in the response I'm feeding my table.

I think I'm just not clearly seeing it, can anyone point me in the right direction?

score 1 · Answer 1 · answered Nov 01 '22 at 22:03

If you're saying you cannot access the values in the nested objects (i.e you want to display the value of title.volumeInfo.title), you would do something like the below. From your example, you are simply providing React Table with an object and it won't know how you want to display it.

const columns = [
  columnHelper.accessor("title.volumeInfo.title", {
    header: () => "Title",
    cell: (info) => info.getValue(),
  })
 // other columns here...
];

Take this with a grain of salt though, I don't use the columnHelper approach and just use the static column configuration. Based on what you provided, you can probably use it as well. Makes it a lot more maintainable/readable, and it avoids all of the useless callbacks.

const columns = useMemo(
  () => [
    {
      header: 'Title',
      accessorKey: 'title.volumneInfo.title'
    },
    // other columns here...
  ],
  [] // put any updater dependencies in the second array if you need
);

score 0 · Answer 2 · answered Mar 04 '23 at 12:49

0

You can follow this method if you like. Though the headline says v7.I've answered for v8

Rendering React Table [v7] results in [object Object]

answered Mar 04 '23 at 12:49

johir Haque Dipok

99
11

Using react-table, accessing data nested in object

2 Answers2