diff --git a/package-lock.json b/package-lock.json
index 45faa2ed0..2a5d553e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62910,4 +62910,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/packages/paginated-table/src/index.js b/packages/paginated-table/src/index.js
index 964ca31e0..60f50592b 100644
--- a/packages/paginated-table/src/index.js
+++ b/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';
diff --git a/packages/paginated-table/src/table/ClientController.js b/packages/paginated-table/src/table/ClientController.js
index 44d4dec96..83e58a535 100644
--- a/packages/paginated-table/src/table/ClientController.js
+++ b/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 (
<>
diff --git a/packages/paginated-table/src/table/PaginatedTable.js b/packages/paginated-table/src/table/PaginatedTable.js
index 402bdf58b..2b88ae965 100644
--- a/packages/paginated-table/src/table/PaginatedTable.js
+++ b/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}
/>
>
diff --git a/packages/paginated-table/src/table/TableService.js b/packages/paginated-table/src/table/TableService.js
index 0b973c94f..7c1195a14 100644
--- a/packages/paginated-table/src/table/TableService.js
+++ b/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 };
};
diff --git a/packages/paginated-table/src/table/state/Actions.js b/packages/paginated-table/src/table/state/Actions.js
index bd5ddca04..a3055b4b2 100644
--- a/packages/paginated-table/src/table/state/Actions.js
+++ b/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,
+});
diff --git a/packages/paginated-table/src/table/state/Reducer.js b/packages/paginated-table/src/table/state/Reducer.js
index 0e4d02b19..7d501178d 100644
--- a/packages/paginated-table/src/table/state/Reducer.js
+++ b/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;
}
diff --git a/packages/table/src/ExtendedView.js b/packages/table/src/ExtendedView.js
index b007ff956..8c853a8d5 100644
--- a/packages/table/src/ExtendedView.js
+++ b/packages/table/src/ExtendedView.js
@@ -8,6 +8,7 @@ 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,
@@ -15,6 +16,7 @@ const ExtendedView = ({
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 (
+ { (searchInput) && (
+
+ )}
{(download || manageViewColumns) && (
{
+ 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 (
+
+
+ {
+ (table?.searchQuery) && (
+
+
+
+ )
+ }
+
+
+
+ >
+ ),
+ }}
+ />
+
+ );
+};
+
+export default SearchInputView;