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?

Bobby Tables · Accepted Answer · 2022-11-01 22:03:53Z

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

johir Haque Dipok · Accepted Answer · 2023-03-04 12:49:00Z

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 4, 2023 at 12:49

johir Haque Dipok

3594 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using react-table, accessing data nested in object

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related