gbs-add-block 0.0.63 → 0.0.64

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.63)
+# GBS Building Blocks 2.0 (v0.0.64)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.63)
+## What's New 🎉 (Ver 0.0.64)
 
 - Updated for bug fixes.
 - New component "Skeleton" & "Navbar" Added.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/datagrid/context/GridContext.tsx

@@ -87,7 +87,7 @@ export const GridProvider: React.FC<{
     onSelectRow,
     isFetching,
     tableHeaderStyle = "text-left px-2 py-4 bg-zinc-200 dark:bg-zinc-800",
-    gridContainerClass = "flex flex-col min-w-screen rounded-md overflow-hidden",
+    gridContainerClass = "flex flex-col rounded-md overflow-hidden",
     gridColumnStyleSelectAll = "px-4 text-xs",
     gridColumnStyle = "p-2 text-xs",
     rowChange = () => {},

package/source/components/datagrid/index.tsx

@@ -9,7 +9,7 @@
  */
 
 import { GridMemoised as GridComponent } from "./layout";
-import React, { memo } from "react";
+import { memo } from "react";
 
 const Grid = memo(GridComponent, (prevProps, nextProps) => {
   // Custom comparison function

package/source/components/datagrid/layout/GridBody.tsx

@@ -148,7 +148,14 @@ const GridBody = () => {
                   </td>
                 )}
                 {workingColumns.map((column, colIndex) => (
-                  <td key={colIndex} className={gridColumnStyle}>
+                  <td
+                    key={colIndex}
+                    className={gridColumnStyle}
+                    style={{
+                      width: column.width ? `${column.width}px` : "auto",
+                      maxWidth: column.width ? `${column.width}px` : "auto",
+                    }}
+                  >
                     {renderCell(rowData, column, rowIndex)}
                   </td>
                 ))}

package/source/components/datagrid/layout/GridPagination.tsx

@@ -23,7 +23,7 @@ const Pagination = () => {
   } = useGridPagination();
 
   return (
-    <div className="flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-white dark:bg-zinc-900 gap-2 md:gap-4">
+    <div className="flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">
       <div className="flex flex-1 space-x-1">
         <button onClick={goToFirstPage} disabled={currentPage === 0}>
           <Icon

package/source/components/datagrid/layout/GridToolbar.tsx

@@ -27,7 +27,34 @@ const GridToolbar = () => {
   }
 
   return (
-    <div className="flex bg-white dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+    <div className="flex bg-zinc-100 dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+      {/* Search input */}
+      {enableSearch && (
+        <div className="flex">
+          <input
+            type="search"
+            value={searchParam}
+            onChange={handleSearchInput}
+            placeholder="Search..."
+            className="outline-none p-2 text-xs rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-200"
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === "Enter") {
+                handleSearch(searchParam);
+              }
+            }}
+          />
+          <button
+            className="rounded-lg w-10 flex items-center justify-center cursor-pointer"
+            onClick={() => handleSearch(searchParam)}
+          >
+            <Icon
+              elements={search}
+              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+            />{" "}
+          </button>
+        </div>
+      )}
+
       {/* Export buttons */}
       {(enableExcelExport || enablePdfExport) && (
         <div className="flex space-x-2">
@@ -59,33 +86,6 @@ const GridToolbar = () => {
           )}
         </div>
       )}
-
-      {/* Search input */}
-      {enableSearch && (
-        <div className="flex">
-          <input
-            type="search"
-            value={searchParam}
-            onChange={handleSearchInput}
-            placeholder="Search..."
-            className="outline-none p-2 text-xs font-normal  rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-100"
-            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-              if (event.key === "Enter") {
-                handleSearch(searchParam);
-              }
-            }}
-          />
-          <button
-            className="rounded-lg w-10 flex items-center justify-center "
-            onClick={() => handleSearch(searchParam)}
-          >
-            <Icon
-              elements={search}
-              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
-            />{" "}
-          </button>
-        </div>
-      )}
     </div>
   );
 };