Hello,
I want to ask, how do I configure my Search UI in tabular format?
Thank you.
Hi there,
You should be able to override the display in the List component via view prop. Results | Elastic docs
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.
Hello @joemcelroy ,
So I found this discussion post and the situation is same with me.
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.
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.
Hello,
Thank you for your reply.
So I've encountered this error when I've tried to do that :
How do you extract the result ?
const OverrideDisplay = ({ result }) => {
return <div>{result.title.snippet}</div>;
};
Thanks.
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 :
When I override it, the blue highlighted part will become <em></em>, it broken I guess :
How do I highlighted it back ?
Thanks.
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
Thank you for your reply.
Hi @joemcelroy ,
Thank you for your reply, I able to apply it and it will emphasize.
However, how do I configure it to become highlighted instead in itallic?
Thank you.
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.