Passing a GraphQL Array through React-Table

Hopefully this isn't too much of an overly basic question (though I think it might be). I've spent a few days trying to figure this out with no luck, I'm new at this.

I'm trying to use GraphQL with Shopify to generate a react-table with a bunch of information from the orders I receive on Shopify. I've gotten as far as being able to generate the data I want, but I can't seem to get it to generate a new row for each piece of data in the array.

As you can see from the image below, I just get '#1001', '#1002' in the same cell. Those are two different orders that I want on individual rows. I'm certain I need to use .map in a fashion and tell the react-table to push data, but nothing I've tried seems to work, and if it does it provides me with two individual rows- but no data in said rows.

I also think the way I'm telling the table to get the data is wrong. I need to use the accessors in my header section to define certain data that I receive from the query. Most of the accessors aren't correct barring orderNumber, Payment, customer. This is because I need to take information from lineItems and distribute it across multiple columns depending on the product. This question isn't really about this headache, but I just wanted to contextualise why some columns are missing accessors.

Here is my query:

import { gql } from '@apollo/client';

const wholesaleOrders = gql`
{
  orders(first: 2, query: "tag:wholesale") {
    edges {
      node {
        id
        unpaid
        fullyPaid
        name
        customer {
          displayName
          defaultAddress {
            company
          }
        }
        lineItems(first: 5) {
          edges {
            node {
              quantity
              name
            }
          }
        }
      }
    }
  }
}
`;

export default wholesaleOrders;

and here is my Table:

import React from 'react'
import styled from 'styled-components'
import { useTable } from 'react-table'

import { graphql, Query } from 'react-apollo';
import { gql, useQuery } from '@apollo/client';

import wholesaleOrders from './QueryData.js'

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI

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

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()} >
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}


function DataTable() {
  const columns = React.useMemo(
    () => [
          {
            Header: 'Order',
            columns: [
              {
                Header: 'Order',
                accessor: 'orderNumber',
              },
              {
                Header: 'Status',
                accessor: 'payment'
              },
              {
                Header: 'Customer',
                accessor: 'customer'
              },
            ],
          },
          {
            Header: 'Wholesale 2kg',
            columns: [
              {
                Header: 'EST',
                accessor: 'lineItems'
              },
              {
                Header: 'TB'
              },
              {
                Header: 'BB'
              },
              {
                Header: 'OTHER'
              },
            ],
          },
          {
            Header: 'Retail and Misc.',
            columns: [
              {
                Header: '250g'
              },
              {
                Header: 'Tea/Chocolate'
              },
              {
                Header: 'Equipment'
              },
              {
                Header: 'After Hours'
              },
              {
                Header: 'Notes'
              },
            ],
          },
        ],
    []
  )


  return (
    <Query
        query={wholesaleOrders}>
    {({ data, loading, error }) => {

      if (loading) return <div>Loading…</div>;
      if (error) return <div>{error.message}</div>;


      console.log(data);

      return (
        <Table
          data={[{orderNumber: data.orders.edges.map(({node}) => node.name )}]}
          columns={columns}
          defaultPageSize={10}
        />
    );
    }}
  </Query>
  )
}

export default DataTable;

and here is the result:

Result

Apologies for how verbose this is, I just wanted to cover all bases.

Thanks!