Resource List Table

Introduction

The ResourceListTable component is a general table that can be used to display a collection of FHIR resources. Each resource is represented by a row and each property is represented by a column. This component is useful to display a list of a patient's medical history, surgical history, or medications.

The headerToCellDisplay property is used to render a given cell value. Cells can be rendered using a custom render function, or dynamically by passing in a FHIRPath.

Examples

Edit code

Usage

ResourceListTable

The below represents a situation where the Medications component utilizes the ResourceListTable to display a list of medications.

1import React, { useState } from "react";
2import { ResourceListTable } from "@commure/components-core";
3
4const Medications = ({ resources }) => {
5  const [selectedMedication, setSelectedMedication] = useState(undefined);
6
7  const selectMedication = resource => {
8    setSelectedMedication(resource);
9  };
10
11  return (
12    <ResourceListTable
13      resources={resources}
14      onRowClick={selectMedication}
15      headerToCellDisplay={{
16        Medication: "medication",
17        Note: "dosage[0].text",
18        Dose: ["dosage[0].doseAndRate.dose"]
19      }}
20    />
21  );
22};
23
24export default Medications;

API Reference

ResourceListTable

Prop Name	Required?	Type	Description
className	false	string	ClassName to apply to the HTML table.
headerToCellDisplay	false	object	An object that maps the header name to how to display cells in that column. Returns either a FHIRPath string that accesses and renders the field at that FHIRPath, or a custom function that takes the resource and renders a component.
onRowClick	false	Function	A function called when the row is clicked -- if this is passed, the table row will become interactive on hover by default.
resources	true	Array	An array of resources for the table to display.
tableProps	false	object	Props to spread to the inner HTMLTable component.

See Also

FHIRPath Specification