Develop with FastTrack

Content from documents in search results can be displayed in a DataGrid table. The content must be extracted and included in search results. To do this, the extract-document-data property can be used in the query options of the application. See Include document extracts in search results for details.

In addition to displaying content from documents, the DataGrid widget can display responses from a /v1/search in a table. Content for each result in the search response is displayed in a table row. For example, consider this /v1/search response payload:

{
    "snippet-format": "snippet",
    "total": 3,
    "start": 1,
    "page-length": 10,
    "selected": "include",
    "results": [
        {
            "index": 1,
            "uri": "/person/1001.json",
            "path": "fn:doc(\"/person/1001.json\")",
            "href": "/v1/documents?uri=%2Fperson%2F1001.json",
            "extracted": {
                "kind": "array",
                "content": [
                    {
                        "envelope": {
                            "entityType": "person",
                            "id": 1001,
                            "firstName": "Nerta",
                            "lastName": "Hallwood",
                            "title": "Marketing Manager",
                            "status": "active",
                            "activities": [
                                {
                                    "description": "Started at Fadeo",
                                    "ts": "2013-06-22"
                                },
                                {
                                    "description": "Promoted",
                                    "ts": "2019-08-15"
                                }
                            ]
                        }
                    }
                ]
            }
        },
        // more results...
    ],
    // more metadata...
}

Content from this payload can be displayed in a React application using this code:

import { useContext } from "react";
import "./App.css";
import { MarkLogicContext, SearchBox, DataGrid } from "ml-fasttrack";
 
function App() {
 
  const context = useContext(MarkLogicContext);
 
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  } 

  const handleClick = (uri) => {
    console.log("Result clicked: " + uri)
  } 
 
  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div>
        <DataGrid
          data={context.searchResponse.results}
          gridColumns={{
            gridColumn: [
              { title: "Index", field: "index" },
              { title: "URI", field: "uri" },
              {
                title: "First Name",
                cell: (props) => (<td>{(<span>{props?.dataItem?.extracted.content[0].envelope.firstName}</span>)}</td>)
              },
              {
                title: "Last Name",
                cell: (props) => (<td>{(<span>{props?.dataItem?.extracted.content[0].envelope.lastName}</span>)}</td>)
              },
              {
                title: "Actions",
                cell: (props) => (
                  <td 
                    onClick={() => handleClick(props?.dataItem?.uri)} 
                    style={{ color: '#0d6efd', cursor: 'pointer' }}
                  >
                    {(<span>{"Click me"}</span>)}
                  </td>
                )
              }
            ]
          }}
          pagerButtonCount={5}
          pageSizeChanger={[1, 2, 5]}
          paginationSize="medium"
          paginationFooter={true}
          showPreviousNext={true}
          showInfoSummary={true}
        />
      </div>
    </div>
  );
}
 
export default App;

In the example:

The example code in Display search results in a table displays a table like this: