Create ItemHeaderView component w/o docs

src/components/ItemHeaderView/ItemHeaderView.js

@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import { useTable, useFlexLayout, useFilters } from "react-table";
+import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, useTheme, makeStyles } from "@material-ui/core";
+
+export default function ItemHeaderView({ data }) {
+
+	const theme = useTheme();
+	const useStyles = makeStyles({
+		HeaderCell_root: {
+			paddingBottom: theme.spacing(2),
+			borderBottomWidth: 0
+		},
+		ContentCell_root: {
+			wordBreak: "break-word"
+		},
+		bandedRows: {
+            '&:nth-of-type(even)': {
+                backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
+			}
+		}
+	});
+	const classes = useStyles();
+
+	const columns = useMemo(() => [
+		{ Header: 'Type', accessor: 'type', Cell: ({ value }) => <b>{value}</b> , width: 1 },
+		{ Header: 'Content', accessor: 'content', width: 2 }
+	], []);
+
+	const defaultColumn = {
+		Filter: ({ column: { Header, setFilter } }) => (
+			<TextField
+				label={Header}
+				onChange={ (event) => setFilter(event.target.value) }
+				type="search"
+				size="small"
+				variant="outlined"
+				color="secondary"
+				fullWidth
+			/>
+		)
+	}
+
+	const tableInstance = useTable({ columns, data, defaultColumn }, useFlexLayout, useFilters);
+	const {
+		getTableProps,
+		getTableBodyProps,
+		headerGroups,
+		rows,
+		prepareRow
+	} = tableInstance;
+
+	return (
+		<TableContainer>
+			<Table {...getTableProps} size="small">
+				<TableHead>
+					{headerGroups.map(headerGroup => (
+						<TableRow {...headerGroup.getHeaderGroupProps()}>
+							{headerGroup.headers.map(column => (
+								<TableCell {...column.getHeaderProps()} classes={{ root: classes.HeaderCell_root }}>
+									{column.render('Filter')}
+								</TableCell>
+							))}
+						</TableRow>
+					))}
+				</TableHead>
+				<TableBody {...getTableBodyProps()}>
+					{rows.map( (row) => {
+						prepareRow(row);
+						return (
+							<TableRow {...row.getRowProps()} classes={{ root: classes.bandedRows }}>
+								{row.cells.map( (cell) => (
+									<TableCell {...cell.getCellProps()} classes={{ root: classes.ContentCell_root }}>
+										{cell.render("Cell")}
+									</TableCell>
+								))}
+							</TableRow>
+						);
+					})}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+};
+
+ItemHeaderView.propTypes = {
+	/** An array of object containing header type and content. */
+	"data": PropTypes.array
+};
+
+ItemHeaderView.defaultProps = {
+	"data": []
+}

src/components/ItemHeaderView/index.js

@@ -0,0 +1 @@
+export { default } from "./ItemHeaderView";