Filter Table Row with Input query

packages/paginated-table/src/index.js

@@ -13,6 +13,7 @@ export {
   onRowSeclect,
   setTotalRowCount,
   customPaginationAction,
+  onInputSearchQueryChange,
 } from './table/state/Actions';
 export { default as Wrapper, types } from './wrapper/Wrapper';
 export { btnTypes } from './wrapper/components/AddFiles';

packages/paginated-table/src/table/ClientController.js

@@ -26,6 +26,7 @@ const TableController = ((props) => {
     sortBy,
     sortOrder,
     groupBy,
+    searchQuery,
   } = table;
 
   /**
@@ -115,18 +116,38 @@ const TableController = ((props) => {
     return alphaNumericSort(b, a);
   };
 
+  // filter rows based on input serch query
+  const filterBySearchQuery = (rows) => {
+    if (!searchQuery) return rows;
+    const query = searchQuery.toLowerCase();
+    const viewRows = rows.filter((row) => {
+      const rowValues = Object.keys(row)
+        .map((key) => `${row[key]}`.toLowerCase()).join(' ');
+      return rowValues.includes(query);
+    });
+    return viewRows;
+  };
+
   // sort based on row grouping
   // groupBy column name
   const sortedRows = (groupBy) ? sortWithRowGrouping(updateRows)
     : [...updateRows].sort((a, b) => sortRows(a, b));
+
+  // filter by search Query
+  const filterRows = filterBySearchQuery(sortedRows);
+
   const startIndex = page * rowsPerPage;
   const endIndex = startIndex + rowsPerPage;
-  const displayRows = [...sortedRows].slice(startIndex, endIndex);
+  const displayRows = [...filterRows].slice(startIndex, endIndex);
 
   return (
     <>
       <TableView
         {...props}
+        table={{
+          ...table,
+          totalRowCount: filterRows.length,
+        }}
         totalRows={tblRows}
         tableRows={displayRows}
       />

packages/paginated-table/src/table/PaginatedTable.js

@@ -15,6 +15,7 @@ import {
   onColumnViewChange,
   onRowDelete,
   onClearCart,
+  onInputSearchQueryChange,
 } from './state/Actions';
 import { TableContext } from './ContextProvider';
 import reducer from './state/Reducer';
@@ -91,6 +92,7 @@ const PaginatedTable = ({
     customizeColumnViewChange,
     customizeDeleteRow,
     customizeDeleteAllRows,
+    customizeSearchQueryChange,
   } = paginationOptions;
 
   /**
@@ -181,6 +183,15 @@ const PaginatedTable = ({
     }));
   };
 
+  /**
+  * Filter table rows based on Search query
+  */
+  const handleSeachQueryChange = (value) => {
+    dispatch(onInputSearchQueryChange({
+      searchQuery: value,
+    }));
+  };
+
   /**
   * A. client table
   * table data provide by bento app (tblRows)
@@ -200,6 +211,7 @@ const PaginatedTable = ({
           onColumnViewChange={customizeColumnViewChange || handleColumnViewChange}
           onDeleteRow={customizeDeleteRow || onDeleteRow}
           onDeleteAllFiles={customizeDeleteAllRows || onDeleteAllRows}
+          onSearchQueryChange={customizeSearchQueryChange || handleSeachQueryChange}
           themeConfig={themeConfig}
         />
       </>
@@ -232,6 +244,7 @@ const PaginatedTable = ({
         onColumnViewChange={customizeColumnViewChange || handleColumnViewChange}
         onDeleteRow={customizeDeleteRow || onDeleteRow}
         onDeleteAllFiles={customizeDeleteAllRows || onDeleteAllRows}
+        onSearchQueryChange={customizeSearchQueryChange || handleSeachQueryChange}
         themeConfig={themeConfig}
       />
     </>

packages/paginated-table/src/table/TableService.js

@@ -31,12 +31,14 @@ const getPaginatedQueryVariables = (queryVariables, table) => {
     rowsPerPage,
     sortBy,
     sortOrder,
+    searchQuery,
   } = table;
   const offset = page * rowsPerPage;
   variables.offset = offset;
   variables.order_by = sortBy;
   variables.first = rowsPerPage;
   variables.sort_direction = sortOrder;
+  variables.search_query = searchQuery;
   return variables;
 };
 
@@ -54,6 +56,7 @@ export const getTableData = ({ queryVariables, table }) => {
     sortOrder,
     query,
     sortBy,
+    searchQuery = '',
   } = table;
   async function getData() {
     const paginatedqueryVariable = getPaginatedQueryVariables(queryVariables, table);
@@ -78,6 +81,6 @@ export const getTableData = ({ queryVariables, table }) => {
       // cancel the request before component unmounts
       controller.abort();
     };
-  }, [queryVariables, page, rowsPerPage, sortOrder, sortBy]);
+  }, [queryVariables, page, rowsPerPage, sortOrder, sortBy, searchQuery]);
   return { tableData };
 };

packages/paginated-table/src/table/state/Actions.js

@@ -10,6 +10,7 @@ export const actionTypes = {
   CUSTOMIZE_PAGINATION_ACTION: 'CUSTOMIZE_PAGINATION_ACTION',
   ON_ROWS_DELETE: 'ON_ROWS_DELETE',
   ON_ROW_DELETE: 'ON_ROW_DELETE',
+  ON_SEARCH_QUERY_CHANGE: 'ON_SEARCH_QUERY_CHANGE',
 };
 
 export const onColumnViewChange = (columns) => ({
@@ -66,3 +67,8 @@ export const onRowDelete = (value) => ({
   type: actionTypes.ON_ROW_DELETE,
   payload: value,
 });
+
+export const onInputSearchQueryChange = (value) => ({
+  type: actionTypes.ON_SEARCH_QUERY_CHANGE,
+  payload: value,
+});

packages/paginated-table/src/table/state/Reducer.js

@@ -58,6 +58,11 @@ const reducer = (state, action) => {
         deletedRows: payload.deleteRows,
         selectedRows: payload.selectedRows,
       };
+    case actionTypes.ON_SEARCH_QUERY_CHANGE:
+      return {
+        ...state,
+        searchQuery: payload.searchQuery,
+      };
     default:
       return state;
   }

packages/table/src/ExtendedView.js

@@ -8,13 +8,15 @@ import CustomPagination from './pagination/CustomPagination';
 import ManageColumnView from './toolbar/ManageColumnView';
 import defaultTheme from './DefaultThemConfig';
 import DownloadButton from './toolbar/DownloadButtonView';
+import SearchInputView from './toolbar/SearchInputView';
 
 const ExtendedView = ({
   table,
   rows,
   onColumnViewChange,
   onRowsPerPageChange,
   onPageChange,
+  onSearchQueryChange,
   customTheme,
   queryVariables,
   server,
@@ -28,12 +30,19 @@ const ExtendedView = ({
     download = false,
     manageViewColumns = false,
     pagination = false,
+    searchInput = false,
   } = extendedViewConfig;
 
   const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } });
 
   return (
     <ThemeProvider theme={themeConfig}>
+      { (searchInput) && (
+        <SearchInputView
+          onSearchQueryChange={onSearchQueryChange}
+          table={table}
+        />
+      )}
       {(download || manageViewColumns) && (
         <Toolbar
           className="downloadAndColumnView"

packages/table/src/TableView.js

@@ -38,6 +38,7 @@ const TableView = ({
   onColumnViewChange,
   onDeleteRow,
   onDeleteAllFiles,
+  onSearchQueryChange,
   themeConfig = {},
   queryVariables,
   server,
@@ -50,6 +51,7 @@ const TableView = ({
       onColumnViewChange={onColumnViewChange}
       onRowsPerPageChange={onRowsPerPageChange}
       onPageChange={onPageChange}
+      onSearchQueryChange={onSearchQueryChange}
       numSelected={table?.selectedRows?.length || 0}
       customTheme={themeConfig.extendedView}
       queryVariables={queryVariables}

packages/table/src/toolbar/SearchInputView.js

@@ -0,0 +1,67 @@
+/* eslint-disable jsx-quotes */
+import React, { useEffect, useState } from 'react';
+import {
+  InputAdornment,
+  TextField,
+  Box,
+} from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import ClearIcon from '@material-ui/icons/Clear';
+
+const SearchInputView = ({
+  onSearchQueryChange,
+  table,
+}) => {
+  const [searchText, setSearchText] = useState('');
+  const handleChange = (event) => {
+    setSearchText(event.target.value);
+    if (event.key === 'Enter') {
+      onSearchQueryChange(event.target.value);
+    }
+  };
+
+  const handleClick = () => {
+    onSearchQueryChange('');
+    setSearchText('');
+  };
+
+  // update input search query
+  useEffect(() => {
+    if (table?.searchQuery) {
+      setSearchText(table?.searchQuery);
+    }
+  }, [table?.searchQuery]);
+
+  return (
+    <Box id='table_serach_input'>
+      <TextField
+        size='small'
+        variant='outlined'
+        onChange={handleChange}
+        onKeyDown={handleChange}
+        value={searchText}
+        InputProps={{
+          endAdornment: (
+            <>
+              {
+                (table?.searchQuery) && (
+                  <InputAdornment
+                    position='end'
+                    onClick={handleClick}
+                  >
+                    <ClearIcon />
+                  </InputAdornment>
+                )
+              }
+              <InputAdornment position='start'>
+                <SearchIcon onClick={handleChange} />
+              </InputAdornment>
+            </>
+          ),
+        }}
+      />
+    </Box>
+  );
+};
+
+export default SearchInputView;