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

Usage

ResourceListTable

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

import React, { useState } from "react";
import { ResourceListTable } from "@commure/components-core";
const Medications = ({ resources }) => {
const [selectedMedication, setSelectedMedication] = useState(undefined);
const selectMedication = resource => {
setSelectedMedication(resource);
};
return (
<ResourceListTable
resources={resources}
onRowClick={selectMedication}
headerToCellDisplay={{
Medication: "medication",
Note: "dosage[0].text",
Dose: ["dosage[0].doseAndRate.dose"]
}}
/>
);
};
export default Medications;

API Reference

ResourceListTable

Prop NameRequired?TypeDescription
classNamefalsestringClassName to apply to the HTML table.
headerToCellDisplayfalseobjectAn 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.
onRowClickfalseFunctionA function called when the row is clicked -- if this is passed, the table row will become interactive on hover by default.
resourcestrueArrayAn array of resources for the table to display.
tablePropsfalseobjectProps to spread to the inner HTMLTable component.

See Also

FHIRPath Specification