Accessing the Results array, not individual results

[learning_bear]

Sorry for this noob question. Learning JS, React and Elastic all in one go is not that easy. Would appreciate some help here.

I have set up an index in a local Enterprise Search cluster and I can connect to it using a simple React project based on Search UI library. Basically I am able to list all the individual results matching to my query using the simple following basic App().

function App() {
  return (
      <SearchProvider config={configurationOptions}>
        <div className="App">
          <Layout
              header={<SearchBox autocompleteSuggestions={true}/>}
              bodyContent={<Results titleField="BookTitle" />}
          />
        </div>
      </SearchProvider>
  );
}

Now my question:

The code above lists all the results one-by-one, basically maps each element of the array to a div element. THis is fine. But I would like to have render this array as such in the form of a table. Therefore I need to access the Results array and do my thing with it and return one element, not as many elements as the number of matching results.

A link to a working example would be super helpful.

[maryna.cherniavska]

I understand that you're using the Search UI library, right? I think that the second example from the Search UI Docs, the one that's called a headless option, is what you want. The example is also about the <div>, but it gives you access to the result array and the <div> can be replaced with whatever you need - <td>, <li> etc.