@popmenu/table 0.22.0 → 0.23.0

package/build/components/GlobalFilter/GlobalFilter.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { GlobalFilterProps } from './GlobalFilterProps';
+export declare const GlobalFilter: (props: GlobalFilterProps) => JSX.Element;

package/build/components/GlobalFilter/GlobalFilterProps.d.ts

@@ -0,0 +1,7 @@
+import { OutlinedTextFieldProps } from '@material-ui/core/TextField';
+export interface GlobalFilterProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    /** the value of global filter from table instance */
+    value: string;
+    /** the setter for value of global filter from table instance */
+    setValue: (value: string) => void;
+}

package/build/components/GlobalFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { GlobalFilter } from './GlobalFilter';
+export { GlobalFilterProps } from './GlobalFilterProps';

package/build/components/Table/TableProps.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Cell, Column, TableInstance, UsePaginationOptions } from 'react-table';
+import { GlobalFilterProps } from '../GlobalFilter';
 export interface TableProps {
     /** Configurations for each individual column. */
     columns: Array<Column & {
@@ -17,6 +18,8 @@ export interface TableProps {
     fullHeight?: boolean;
     /** Styles the table to take up its containers full width. */
     fullWidth?: boolean;
+    /** Enables global filter as search. */
+    searchable?: boolean;
     /** Enables sortability for columns. */
     sortable?: boolean;
     /** Sets loading state. When true, Will render a CircularProgress when true and not rows.  */
@@ -25,6 +28,8 @@ export interface TableProps {
     emptyMessage?: string;
     /** An image to be displayed with the empty message. */
     EmptyImage?: () => React.ReactNode;
+    /** Props applied to the global search input component. Extends [TextField props](https://v4.mui.com/api/text-field/). */
+    GlobalFilterProps?: Omit<GlobalFilterProps, 'value' | 'setValue'>;
     /** Callback for managing pagination events. */
     onPaginate?: (pageIndex: number, instance: TableInstance) => void;
     /** Callback for managing pagination events. */

package/build/index.es.js

@@ -3,9 +3,10 @@ import React__default, { forwardRef, createElement, useMemo, useState } from 're
 import { useTable } from 'react-table/src/hooks/useTable.js';
 import { usePagination } from 'react-table/src/plugin-hooks/usePagination.js';
 import { useSortBy } from 'react-table/src/plugin-hooks/useSortBy.js';
+import { useGlobalFilter } from 'react-table/src/plugin-hooks/useGlobalFilter.js';
 import { Pagination } from '@material-ui/lab';
 import '@material-ui/lab/Alert';
-import { makeStyles, Paper as Paper$1, Link as Link$1, Box, useTheme as useTheme$1 } from '@material-ui/core';
+import { makeStyles, Paper as Paper$1, Link as Link$1, Box, useTheme as useTheme$1, TextField, InputAdornment } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiIconButton from '@material-ui/core/IconButton';
 import MuiTypography from '@material-ui/core/Typography';
@@ -137,20 +138,20 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$3k;
+var _path$2O;
 
-function _extends$3B() { _extends$3B = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3B.apply(this, arguments); }
+function _extends$32() { _extends$32 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$32.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3B({
+  return /*#__PURE__*/React.createElement("svg", _extends$32({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3k || (_path$3k = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _path$2O || (_path$2O = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z"
   })));
 }
@@ -715,57 +716,75 @@ var TableHeader = function (props) {
     return React__default.createElement("thead", __assign$1({}, restProps), children);
 };
 
-var _path$3K;
+var _path$4w;
 
-function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
+function _extends$4M() { _extends$4M = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4M.apply(this, arguments); }
 
-function SvgMore(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3$({
+function SvgChevronDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4M({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3K || (_path$3K = /*#__PURE__*/React.createElement("path", {
-    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
+    height: "1em"
+  }, props), _path$4w || (_path$4w = /*#__PURE__*/React.createElement("path", {
+    d: "M4 6l4 4 4-4"
   })));
 }
 
-var _path$2X;
+var _path$4v;
 
-function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
+function _extends$4L() { _extends$4L = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4L.apply(this, arguments); }
 
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3b({
+function SvgChevronUp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4L({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2X || (_path$2X = /*#__PURE__*/React.createElement("path", {
-    d: "M4 6l4 4 4-4"
+    height: "1em"
+  }, props), _path$4v || (_path$4v = /*#__PURE__*/React.createElement("path", {
+    d: "M12 10L8 6l-4 4"
   })));
 }
 
-var _path$2W;
+var _path$3c;
 
-function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
+function _extends$3s() { _extends$3s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3s.apply(this, arguments); }
 
-function SvgChevronUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3a({
+function SvgMore(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3s({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2W || (_path$2W = /*#__PURE__*/React.createElement("path", {
-    d: "M12 10L8 6l-4 4"
+    height: "1em"
+  }, props), _path$3c || (_path$3c = /*#__PURE__*/React.createElement("path", {
+    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.334A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
+  })));
+}
+
+var _path$32;
+
+function _extends$3i() { _extends$3i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3i.apply(this, arguments); }
+
+function SvgSearch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3i({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    fill: "none",
+    width: "1em",
+    height: "1em"
+  }, props), _path$32 || (_path$32 = /*#__PURE__*/React.createElement("path", {
+    d: "M7.333 12.667A5.333 5.333 0 107.333 2a5.333 5.333 0 000 10.667zM14 14l-2.9-2.9"
   })));
 }
 
@@ -856,28 +875,6 @@ var TableCell = function (props) {
     return (React__default.createElement("td", __assign$1({ className: root }, restProps), children));
 };
 
-var useTableStyles = makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        root: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return ({
-                display: fullWidth ? 'flex' : 'inline-flex',
-                flexDirection: 'column',
-            });
-        },
-        table: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return (__assign$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
-        },
-        tableWrap: function () { return ({
-            maxWidth: '100%',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-        }); },
-    });
-});
-
 var filterProps = function (props) {
     props.icon; props.action; var filteredProps = __rest$1(props, ["icon", "action"]);
     return filteredProps;
@@ -931,17 +928,54 @@ var makeColumns = function (config) {
     return memoizedColumns;
 };
 
+var GlobalFilter = function (props) {
+    var value = props.value, setValue = props.setValue, restProps = __rest$1(props, ["value", "setValue"]);
+    var onChange = restProps.onChange, InputProps = restProps.InputProps, cleanRestProps = __rest$1(restProps, ["onChange", "InputProps"]);
+    var handleChange = function (e) {
+        setValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (React__default.createElement(TextField, __assign$1({ variant: "outlined", value: value, onChange: handleChange, InputProps: __assign$1({ startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                React__default.createElement(Icon, { icon: SvgSearch }))) }, InputProps) }, cleanRestProps)));
+};
+
+var useTableStyles = makeStyles(function (_a) {
+    var typography = _a.typography;
+    return ({
+        root: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return ({
+                display: fullWidth ? 'flex' : 'inline-flex',
+                flexDirection: 'column',
+            });
+        },
+        table: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return (__assign$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
+        },
+        tableWrap: function () { return ({
+            maxWidth: '100%',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+        }); },
+    });
+});
+
 /* eslint-disable react/jsx-key */
 var Table = function (props) {
+    // Setup
     var actionColumnId = 'table-actions-column';
-    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, fullHeight = props.fullHeight, _a = props.paginationOptions, paginationOptions = _a === void 0 ? {} : _a, _b = props.tableOptions, tableOptions = _b === void 0 ? {} : _b, onPaginate = props.onPaginate;
+    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, fullHeight = props.fullHeight, GlobalFilterProps = props.GlobalFilterProps, _a = props.paginationOptions, paginationOptions = _a === void 0 ? {} : _a, _b = props.tableOptions, tableOptions = _b === void 0 ? {} : _b, searchable = props.searchable, onPaginate = props.onPaginate;
     var theme = useTheme$1();
     var classes = useTableStyles(props);
     var columns = useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
     var initialPaginationState = paginationOptions.initialState, restPaginationOptions = __rest$1(paginationOptions, ["initialState"]);
     var initialState = __assign$1({}, initialPaginationState);
-    var instance = useTable(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useSortBy, usePagination);
-    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, rows = instance.rows;
+    var instance = useTable(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useGlobalFilter, useSortBy, usePagination);
+    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, rows = instance.rows, state = instance.state, setGlobalFilter = instance.setGlobalFilter;
+    // Aliases
     var isPaginated = pageCount > 1;
     var isEmpty = rows.length === 0;
     var lineHeightRem = parseFloat(theme.typography[tableConstants.tableTypography].lineHeight);
@@ -952,6 +986,7 @@ var Table = function (props) {
     var bodyHeight = instance.state.pageSize * cellHeight;
     var footerHeight = 88;
     var minHeight = headerHeight + bodyHeight + footerHeight;
+    // Handlers
     var handlePagination = function (_e, pageNumber) {
         var pageIndex = pageNumber - 1;
         if (onPaginate) {
@@ -962,6 +997,8 @@ var Table = function (props) {
         }
     };
     return (React__default.createElement(Box, { className: classes.root, minHeight: fullHeight ? minHeight : 'unset' },
+        searchable && (React__default.createElement(Box, null,
+            React__default.createElement(GlobalFilter, __assign$1({ value: state.globalFilter, setValue: setGlobalFilter }, GlobalFilterProps)))),
         React__default.createElement(Box, { className: classes.tableWrap },
             React__default.createElement("table", __assign$1({ className: classes.table }, getTableProps()),
                 React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default.createElement(TableHeaderCell, __assign$1({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign$1(__assign$1({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),