# Enterprise App Search UI Configuration

**URL:** <https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [April 5, 2023, 7:55am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384 "2023-04-05T07:55:07Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![aisyaharifin](https://avatars.discourse-cdn.com/v4/letter/a/b9e5f3/32.png) [@aisyaharifin](https://discuss.elastic.co/u/aisyaharifin)\
**Post date:** [April 11, 2023, 4:23am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/4 "2023-04-11T04:23:22Z")

</div>

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](https://discuss.elastic.co/t/how-do-i-view-all-my-data-in-a-table-instead-of-json/241819/5):
>
> Here's another post where I talk a bit about customizing views: [Reference UI - how to modify what's displayed (React newbie)](https://discuss.elastic.co/t/reference-ui-how-to-modify-whats-displayed-react-newbie/199471/2) 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](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 :

 ![Screenshot 2023-04-10 at 8.15.33 AM](https://us1.discourse-cdn.com/elastic/original/3X/f/5/f5140bd83e72d180f9515f34203e293bd21bc045.png)

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.

```auto
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.

 ![Screenshot 2023-04-10 at 10.42.15 AM](https://us1.discourse-cdn.com/elastic/original/3X/3/a/3a9d5b1bb0ab8a5a9047dabdad29b908aa837128.png)  
 ![UI Default](https://us1.discourse-cdn.com/elastic/original/3X/e/c/ec0e2d1bb87e89fc529b685d11a7cb540c63d22f.jpeg)

Thank you for your assistance.

---

_[View the full topic](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384)._