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.