Enterprise App Search UI Configuration

[aisyaharifin (Siti Nuraisyah)]

Hello @joemcelroy ,

So I found this discussion post and the situation is same with me.

How do I view all my data in a table instead of json

Here's another post where I talk a bit about customizing views: Reference UI - how to modify what's displayed (React newbie) Also, see the "headless" example from the main page. You can access the raw array of results and do whatever you'd like with it: https://github.com/elastic/search-ui#creating-a-search-experience <SearchProvider config={config}> <WithSearch mapContextToProps={({ results }) => ({ results })} > {({ results }) => { return ( <div> …

And the code snippet I already tried in my code however I couldn't run it as it display this error :

It seems like the code has been outdated, maybe.

Below is my code from the zip package file Search UI App Search, I would like to manipulate the Results component to display in table form. Thus, I changed the bodyContent section and apply the snippet code of above discussion post, but failed.

export default function App() {
  return (
    <SearchProvider config={config}>
      <WithSearch mapContextToProps={({ wasSearched }) => ({ wasSearched })}>
        {({ wasSearched }) => {
          return (
            <div className="App">
              <ErrorBoundary>
                <Layout
                  header={<SearchBox autocompleteSuggestions={true} />}
                  sideContent={
                    <div>
                      {wasSearched && (
                        <Sorting
                          label={"Sort by"}
                          sortOptions={buildSortOptionsFromConfig()}
                        />
                      )}
                      {getFacetFields().map(({field, label}) => (
                         <Facet key={field} field={field} label={label} />
                      ))}
                    </div>
                  }
                  bodyContent={
                    <div>
                      {wasSearched.map(r => (
                      <div key={r.id.raw}>{r.title.raw}</div>
                      ))}
                    </div>
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          );
        }}
      </WithSearch>
    </SearchProvider>
  );
}

I would appreciate it if you could help me in display my Search UI Results in tabular format.

Below image is somewhat I picture my data display would be where from the Search UI Results component, I would like to replace it in a table format.

Thank you for your assistance.