@bcgov-sso/common-react-components 1.31.0 → 1.31.1

package/dist/cjs/types/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const TABLE_BACKGROUND_COLOR = "#ededed";
 export declare const TABLE_ROW_ACTIVE_COLOR = "#4950FA";
 export declare const TABLE_ROW_HOVER_COLOR = "#fdb913";
@@ -31,8 +31,10 @@ export interface TableProps {
     defaultPageSize?: number;
     enableGlobalSearch?: boolean;
     globalSearchPlaceholder?: string;
+    globalSearchStyle?: React.CSSProperties;
     enablePagination?: boolean;
     pageSizeOptions?: number[];
+    noDataFoundText?: string;
 }
-declare const Table: ({ variant, columns, data, readOnly, onRowSelect, defaultPageSize, enableGlobalSearch, globalSearchPlaceholder, enablePagination, pageSizeOptions, }: TableProps) => JSX.Element;
+declare const Table: ({ variant, columns, data, readOnly, onRowSelect, defaultPageSize, enableGlobalSearch, globalSearchPlaceholder, globalSearchStyle, enablePagination, pageSizeOptions, noDataFoundText, }: TableProps) => JSX.Element;
 export default Table;

package/dist/esm/index.js

@@ -15993,29 +15993,6 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-const Wrapper = styled.div `
-  width: 100%;
-  position: relative;
-`;
-const Icon$2 = styled.i `
-  position: absolute;
-  right: 0.5em;
-  top: 0.5em;
-  color: grey;
-`;
-const Input$2 = styled.input `
-  width: 100%;
-  border: 2px solid #606060;
-  padding: 0.3em 0.5em;
-  border-radius: 0.25em;
-`;
-function SearchBar(props) {
-    return (React__default.createElement(Wrapper, null,
-        React__default.createElement(Input$2, Object.assign({ type: "text", maxLength: 100 }, props)),
-        React__default.createElement(Icon$2, null,
-            React__default.createElement(FontAwesomeIcon, { icon: faMagnifyingGlass }))));
-}
-
 function _typeof$2(o) {
   "@babel/helpers - typeof";
 
@@ -20852,7 +20829,7 @@ var inputStyle = function inputStyle(isHidden) {
     width: '100%'
   }, spacingStyle);
 };
-var Input = function Input(props) {
+var Input$1 = function Input(props) {
   var cx = props.cx,
     value = props.value;
   var _cleanCommonProps = cleanCommonProps(props),
@@ -20874,7 +20851,7 @@ var Input = function Input(props) {
     disabled: isDisabled
   }, innerProps)));
 };
-var Input$1 = Input;
+var Input$1$1 = Input$1;
 
 var multiValueCSS = function multiValueCSS(_ref, unstyled) {
   var _ref$theme = _ref.theme,
@@ -21085,7 +21062,7 @@ var components = {
   GroupHeading: GroupHeading,
   IndicatorsContainer: IndicatorsContainer,
   IndicatorSeparator: IndicatorSeparator,
-  Input: Input$1,
+  Input: Input$1$1,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu$1$1,
   MenuList: MenuList,
@@ -23791,6 +23768,29 @@ var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
+const Wrapper = styled.div `
+  width: 100%;
+  position: relative;
+`;
+const Icon$2 = styled.i `
+  position: absolute;
+  right: -0.5em;
+  top: 0.5em;
+  color: grey;
+`;
+const Input = styled.input `
+  width: 100%;
+  border: 2px solid #606060;
+  padding: 0.3em 0.5em;
+  border-radius: 0.25em;
+`;
+function SearchBar(props) {
+    return (React__default.createElement(Wrapper, null,
+        React__default.createElement(Input, Object.assign({ type: "text", maxLength: 100 }, props)),
+        React__default.createElement(Icon$2, null,
+            React__default.createElement(FontAwesomeIcon, { icon: faMagnifyingGlass }))));
+}
+
 const TABLE_BACKGROUND_COLOR = '#ededed';
 const TABLE_ROW_ACTIVE_COLOR = '#4950FA';
 const TABLE_ROW_HOVER_COLOR = '#fdb913';
@@ -23802,12 +23802,13 @@ const StyledTable = styled.table `
   width: 100%;
   -webkit-box-shadow: none;
   background-color: ${TABLE_BACKGROUND_COLOR};
-  padding: 0.1em 0.6em;
+  padding: 0 0.6em;
   box-shadow: none;
   text-align: left;
   border-collapse: separate;
   border-spacing: 0 ${TABLE_ROW_SPACING}px;
   color: black;
+  margin-bottom: 0.5em;
 
   & thead {
     font-size: 16px;
@@ -23865,7 +23866,7 @@ const StyledTable = styled.table `
     overflow: hidden;
   }
 `;
-const Table = ({ variant = 'default', columns = [], data = [], readOnly = false, onRowSelect = (rowData) => { }, defaultPageSize = 5, enableGlobalSearch = true, globalSearchPlaceholder = 'Search all columns...', enablePagination = true, pageSizeOptions = [5, 10, 20, 30, 40, 50], }) => {
+const Table = ({ variant = 'default', columns = [], data = [], readOnly = false, onRowSelect = (rowData) => { }, defaultPageSize = 5, enableGlobalSearch = true, globalSearchPlaceholder = 'Search all columns...', globalSearchStyle = {}, enablePagination = true, pageSizeOptions = [5, 10, 20, 30, 40, 50], noDataFoundText = 'No data found', }) => {
     const [selectedRow, setSelectedRow] = useState();
     const [pagination, setPagination] = React__default.useState({
         pageIndex: 0,
@@ -23900,9 +23901,9 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
         }
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-            enableGlobalSearch && (React__default.createElement("div", { style: { width: '20%', marginTop: '1em' } },
-                React__default.createElement(SearchBar, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (e) => setGlobalFilter(String(e.target.value)), placeholder: globalSearchPlaceholder, style: { height: '30px' } }))),
+        React__default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' } },
+            enableGlobalSearch && (React__default.createElement("div", { style: { padding: '0.5em 0' } },
+                React__default.createElement(SearchBar, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (e) => setGlobalFilter(String(e.target.value)), placeholder: globalSearchPlaceholder, style: globalSearchStyle }))),
             React__default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end', flexWrap: 'wrap', padding: '0.5em 0', gap: '0.5em' } }, table.getHeaderGroups().map((headerGroup) => headerGroup.headers.map((header) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
                 return header.column.getCanFilter() && (React__default.createElement("div", { key: header.id },
@@ -23933,21 +23934,22 @@ const Table = ({ variant = 'default', columns = [], data = [], readOnly = false,
                                 desc: React__default.createElement(FontAwesomeIcon, { icon: faSortUp }),
                             }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : React__default.createElement(FontAwesomeIcon, { icon: faSort })))));
             }))))),
-            React__default.createElement("tbody", null, table.getRowModel().rows.map((row) => (React__default.createElement("tr", { key: row.id, onClick: () => {
+            React__default.createElement("tbody", null, table.getRowModel().rows.length === 0 ? (React__default.createElement("tr", { key: "no-data" },
+                React__default.createElement("td", { style: { textAlign: 'center' }, colSpan: columns.length }, noDataFoundText))) : (table.getRowModel().rows.map((row) => (React__default.createElement("tr", { key: row.id, onClick: () => {
                     onRowClick(row);
-                }, className: row.id === (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.id) ? 'active' : '' }, row.getVisibleCells().map((cell) => (React__default.createElement("td", { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))),
+                }, className: row.id === (selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.id) ? 'active' : '' }, row.getVisibleCells().map((cell) => (React__default.createElement("td", { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext()))))))))),
             React__default.createElement("tfoot", null, table.getFooterGroups().map((footerGroup) => (React__default.createElement("tr", { key: footerGroup.id }, footerGroup.headers.map((header) => (React__default.createElement("th", { key: header.id }, header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext()))))))))),
-        enablePagination && (React__default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', padding: '0.5em 0' } },
+        enablePagination && (React__default.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
             React__default.createElement("div", { style: { display: 'flex', gap: '0.5em' } },
                 React__default.createElement(Button, { onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }, "Prev"),
                 React__default.createElement(Button, { onClick: () => table.nextPage(), disabled: !table.getCanNextPage() }, "Next")),
-            React__default.createElement("div", null,
+            React__default.createElement("div", { style: { position: 'relative', zIndex: 999 } },
                 React__default.createElement(StateManagedSelect$1, { defaultValue: {
                         label: `${table.getState().pagination.pageSize} per page`,
                         value: table.getState().pagination.pageSize,
                     }, options: pageSizeOptions.map((value) => ({ value, label: `${value} per page` })), onChange: (e) => {
                         table.setPageSize(Number(e.value));
-                    } }))))));
+                    }, menuPosition: "fixed" }))))));
 };
 
 function _typeof$1(obj) {