ehscan-react-table 0.0.18 → 0.0.20

package/dist/elements/Table.js

@@ -102,7 +102,7 @@ export const Table = ({ columns, rows, sortOrder, setSortOrder, cellComponents,
         const { tag, search, title, width } = col;
         const colTitle = title !== undefined ? title : tag;
         const thWidth = width !== undefined ? `${width}px` : "30px";
-        return (_jsx("th", { style: { "--custom-width": thWidth }, children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { children: colTitle }) })] }) }));
+        return (_jsx("th", { style: { "--custom-width": thWidth }, children: _jsxs("div", { className: styles.headcolcell, children: [_jsx(HeadColSort, { tag: tag }), _jsx("div", { className: styles.headcolcellmain, children: search ? _jsx(HeadSearchBar, { content: colTitle, tag: tag }) : _jsx("div", { onClick: () => setOpenCol(tag), children: colTitle }) })] }) }));
     };
     const HeadCols = () => {
         return (_jsxs(_Fragment, { children: [columns.map((col, i) => {

package/dist/elements/table.module.css

@@ -170,10 +170,12 @@ input.headsearch:focus {
 
 input.headsearch {
   color: var(--ext-tab-input-clr, white);
+  font-weight: var(--ext-tab-input-font-weight, 400);
 }
 
 input.headsearch::placeholder {
   color: var(--ext-tab-input-clr, white);
+  font-weight: var(--ext-tab-input-font-weight, 400);
   opacity: 1;
 }
 
@@ -203,15 +205,27 @@ svg.removesearchsvg{
     background: transparent;
     border-radius: var(--ext-search-wrapper-padding, 4px);
     height: var(--ext-search-wrapper-height, 25px);
+    --input-padding: 1px 5px 3px 0;
 }
 
-.searchwrapper:hover{
-    background: rgba(0,0,0,0.2);
-}
 
 .focused {
     border: var(--ext-search-wrapper-focused-border, 1px dashed white);
     color: white;
+    --input-padding: 1px 5px 3px 5px;
+}
+
+input.headsearch {
+    border: none;
+    border-radius: 4px;
+    width: 98%;
+    padding: var(--input-padding);
+    box-sizing: border-box;
+    background-color: transparent;
+}
+
+.searchwrapper:hover{
+    background: rgba(0,0,0,0.2);
 }
 
 svg {
@@ -239,15 +253,6 @@ svg {
     color: var(--ext-table-cell-clr, lightslategrey);
 }
 
-input.headsearch {
-    border: none;
-    border-radius: 4px;
-    width: 98%;
-    padding: 1px 6px 3px 6px;
-    box-sizing: border-box;
-    background-color: transparent;
-}
-
 input.headsearch:hover {
     border: none;
     cursor: pointer;
@@ -265,10 +270,13 @@ input.headsearch:focus {
 }
 
 .headcolcellmain{
+    color: var(--ext-tab-input-clr, white);
+    font-weight: var(--ext-tab-input-font-weight, 400);
+    line-height: 1.5;
     flex: 1;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
 }
 
 .deftabletr > td, .trstickyhead > th {
@@ -312,6 +320,7 @@ input.headsearch:focus {
 
 .headsearchwrapper {
     position: relative;
+    width: 100%;
 }
 
 .sort-col {
@@ -322,11 +331,11 @@ input.headsearch:focus {
     position: fixed;
     margin-left: 6px;
     margin-top: 0;
-    font-size: var(--ext-table-header-font-size, 50%);
+    font-size: var(--ext-table-header-font-size, 55%);
     background-color: var(--ext-table-header-bkc-clr, darkgoldenrod);
     color: var(--ext-table-header-clr, darkslategrey);
     border-radius: 4px;
-    padding: 2px 5px;
+    padding: 0 5px;
     opacity: 0;
     transition: opacity 0.3s ease, margin-top 0.3s ease;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-table",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",