@@ -5,12 +5,26 @@ import "./TableHeader.css";
55import NorthIcon from "@mui/icons-material/North" ;
66import SouthIcon from "@mui/icons-material/South" ;
77import LinkIcon from "@mui/icons-material/Link" ;
8+ import PropTypes from "prop-types" ;
9+ import { Component } from "react" ;
810
11+ /**
12+ *
13+ * @param {object } props the props passed down to the component
14+ * @param {Array<Component> } props.children the children of the component
15+ * @param {object } props.config the config object of the application
16+ * @returns {Component } the header of the table containing the column names, the sort icons and ontology links
17+ */
918function TableHeader ( { children, config } ) {
1019 const { sort, setSort, resource } = useListContext ( ) ;
1120 const { variableOntology } = config . queries . filter (
1221 ( query ) => query . id === resource
1322 ) [ 0 ] ;
23+
24+ /**
25+ * Handles the click on a header and sets the sort state accordingly
26+ * @param {string } target the source of the column that was clicked
27+ */
1428 function handleHeaderClick ( target ) {
1529 const newSort = { field : target , order : "DESC" } ;
1630 if ( sort ) {
@@ -34,7 +48,6 @@ function TableHeader({ children, config }) {
3448 sx = { { height : "100%" , "& > *" : { verticalAlign : "middle" } } }
3549 >
3650 < span
37- variant = "span"
3851 role = "button"
3952 className = "header-button"
4053 onClick = { ( ) => handleHeaderClick ( child . props . source ) }
@@ -77,4 +90,9 @@ function TableHeader({ children, config }) {
7790 ) ;
7891}
7992
93+ TableHeader . propTypes = {
94+ children : PropTypes . node ,
95+ config : PropTypes . object . isRequired ,
96+
97+ }
8098export default TableHeader ;
0 commit comments