# 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:** 12\
**Page:** 1

<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 5, 2023, 7:55am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/1 "2023-04-05T07:55:07Z")

</div>

Hello,

I want to ask, how do I configure my Search UI in tabular format?

 ![Screenshot 2023-04-05 at 3.54.13 PM](https://us1.discourse-cdn.com/elastic/original/3X/8/b/8be79ebd42ec5d4cedb251b0c3af59b3e971fbec.jpeg)

Thank you.

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [April 5, 2023, 10:50am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/2 "2023-04-05T10:50:24Z")

</div>

Hi there,

You should be able to override the display in the List component via `view` prop. [Results | Elastic docs](https://docs.elastic.co/search-ui/api/react/components/results#view-customization)

---

<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 6, 2023, 3:24am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/3 "2023-04-06T03:24:39Z")

</div>

Hi @joemcelroy ,

Thank you for your reply.

Actually I don't really understand when you mentioned about List component, what I understand is with `view` prop, we able to customize our components.

Can you explain further on how I can customize my components to display data in tabular format from the App Search zip package file?

Thank you for your assistance.

---

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

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [April 11, 2023, 9:59am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/5 "2023-04-11T09:59:17Z")

</div>

Hi there,

You should still be using `Results` component. Look at this codesandbox, notice how ive passed in the `resultView` prop a `OverrideDisplay` component. This component is just printing out the title but you can extend it to do markup that makes it look like a table format.

> **[laughing-sky-9nkxqr - CodeSandbox](https://codesandbox.io/s/laughing-sky-9nkxqr?file=%2Fsrc%2Fpages%2Fapp-search%2Findex.js:7284-7299)**
>
> laughing-sky-9nkxqr by joemcelroy using @elastic/apm-rum, @elastic/apm-rum-react, @elastic/datemath, @elastic/eui, @elastic/react-search-ui, @elastic/react-search-ui-views, @elastic/search-ui, @elastic/search-ui-app-search-connector,...

---

<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 13, 2023, 7:16am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/6 "2023-04-13T07:16:53Z")

</div>

Hello,

Thank you for your reply.

So I've encountered this error when I've tried to do that :

 ![Screenshot 2023-04-13 at 3.14.24 PM](https://us1.discourse-cdn.com/elastic/original/3X/c/0/c0c84108391b1fb57f569c7530788558bc13f7c5.png)

How do you extract the result ?

```auto
const OverrideDisplay = ({ result }) => {
  return <div>{result.title.snippet}</div>;
};

```

Thanks.

---

<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 17, 2023, 4:35am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/7 "2023-04-17T04:35:09Z")

</div>

Hey @joemcelroy ,

So I get to display the data however, how do I get it highlighted back properly as I noticed that it will highlighted the keyword search into `<em></em>`.

So this is the default hightlighted part :

 ![Screenshot 2023-04-17 at 12.28.00 PM](https://us1.discourse-cdn.com/elastic/original/3X/5/4/5485a2b359cbf29fc77b7e8d4a16d62f7e6abd16.png)

When I override it, the blue highlighted part will become `<em></em>`, it broken I guess :

![Screenshot 2023-04-17 at 12.28.13 PM](https://us1.discourse-cdn.com/elastic/original/3X/f/b/fb90366ed7ff4fb8111eccae801485b55767e687.png)

How do I highlighted it back ?

Thanks.

---

<div class="post-metadata">

**Author:** ![joemcelroy](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joemcelroy/32/103757_2.png) [@joemcelroy](https://discuss.elastic.co/u/joemcelroy)\
**Post date:** [April 17, 2023, 8:33am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/8 "2023-04-17T08:33:45Z")

</div>

Hi there,

Need to use dangerouslySetInnerHTML attribute to render the markup. See example in the default component. [search-ui/Result.tsx at main · elastic/search-ui · GitHub](https://github.com/elastic/search-ui/blob/main/packages/react-search-ui-views/src/Result.tsx#L59)

---

<div class="post-metadata">

**Author:** ![ekartzpoot](https://avatars.discourse-cdn.com/v4/letter/e/ce73a5/32.png) [@ekartzpoot](https://discuss.elastic.co/u/ekartzpoot)\
**Post date:** [April 17, 2023, 10:19am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/9 "2023-04-17T10:19:29Z")

</div>

Thank you for your reply.

---

<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 19, 2023, 4:12am UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/10 "2023-04-19T04:12:32Z")

</div>

Hi @joemcelroy ,

Thank you for your reply, I able to apply it and it will emphasize.

 ![Screenshot 2023-04-19 at 12.07.56 PM](https://us1.discourse-cdn.com/elastic/original/3X/4/4/44239bb28202846ea6b55a92dcae0aebbf3674d7.png)

However, how do I configure it to become highlighted instead in itallic?

 ![Screenshot 2023-04-19 at 12.08.08 PM](https://us1.discourse-cdn.com/elastic/original/3X/9/2/92d188c4234235a72a0ef54081d4cdcbfdb4246d.png)

Thank you.

---

<div class="post-metadata">

**Author:** ![ekartzpoot](https://avatars.discourse-cdn.com/v4/letter/e/ce73a5/32.png) [@ekartzpoot](https://discuss.elastic.co/u/ekartzpoot)\
**Post date:** [April 19, 2023, 1:30pm UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/11 "2023-04-19T13:30:25Z")

</div>

Thank you.[.](https://hellodear.in/)

[.](https://teatv.ltd/get-apk/)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 17, 2023, 1:30pm UTC](https://discuss.elastic.co/t/enterprise-app-search-ui-configuration/329384/12 "2023-05-17T13:30:46Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.