diff --git a/src/ItemTable.js b/src/components/ItemTable/ItemTable.js similarity index 65% rename from src/ItemTable.js rename to src/components/ItemTable/ItemTable.js index 14f59c6..dbd01ea 100644 --- a/src/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types' import MaterialTable from "material-table"; -function ItemTable(props) { +export default function ItemTable({ setActiveItem, setSidebarOpen }) { const columns = [ { title: 'Queue', field: 'queue', filterPlaceholder: "Ex: \"ME\"" }, @@ -12,9 +13,9 @@ function ItemTable(props) { { title: 'Status', field: 'status', filterPlaceholder: "Ex: \"Wating for Reply\"" }, { title: 'Priority', field: 'priority', filterPlaceholder: "Ex: \"covid\"" }, { title: 'Last Updated', field: 'lastUpdated', filterPlaceholder: "Ex: \"07-27-20 12:54 PM\"" }, - // { title: 'Department', field: 'department', filterPlaceholder: "Ex: \"Business Office\"" }, - // { title: 'Building', field: 'building', filterPlaceholder: "Ex: \"KNOY\"" }, - // { title: 'Date Received', field: 'dateReceived', filterPlaceholder: "Ex: \"07-20-20 03:32 AM\"" }, + { title: 'Department', field: 'department', filterPlaceholder: "Ex: \"Business Office\"" }, + { title: 'Building', field: 'building', filterPlaceholder: "Ex: \"KNOY\"" }, + { title: 'Date Received', field: 'dateReceived', filterPlaceholder: "Ex: \"07-20-20 03:32 AM\"" }, ] const [data, setData] = useState([]) @@ -40,11 +41,16 @@ function ItemTable(props) { title={"Demo Table"} options={options} onRowClick={(event, rowData) => { - props.setActiveItem(rowData); - props.setSidebarOpen(true); + setActiveItem(rowData); + setSidebarOpen(true); }} /> ); } -export default ItemTable; +ItemTable.propTypes = { + /** Function to set active item on row click. */ + "setActiveItem": PropTypes.func.isRequired, + /** Function to toggle sidebar on row click. */ + "setSidebarOpen": PropTypes.func.isRequired +} diff --git a/src/components/ItemTable/ItemTable.md b/src/components/ItemTable/ItemTable.md new file mode 100644 index 0000000..5600233 --- /dev/null +++ b/src/components/ItemTable/ItemTable.md @@ -0,0 +1,4 @@ +The ItemTable is a modified version of [material-table](https://material-table.com/) the primary view for webqueue2. It displays metadata for items of selected queues and allows for filtering. By default, it is pre-configured to fetch data the webqueue2 API. +```jsx + +``` \ No newline at end of file diff --git a/src/components/ItemTable/index.js b/src/components/ItemTable/index.js new file mode 100644 index 0000000..ff33a40 --- /dev/null +++ b/src/components/ItemTable/index.js @@ -0,0 +1,3 @@ +import ItemTable from "./ItemTable"; + +export default ItemTable; \ No newline at end of file