pam-grid 1.0.9 → 1.1.0

package/README.md

@@ -0,0 +1,228 @@
+# 📊 PMS Grid (PamGrid)
+
+A powerful, flexible, and extensible **React Data Grid** built with modern patterns and inspired by enterprise systems.
+
+PMS Grid is designed for **large-scale applications (ERP, CRM, Admin Panels)** and provides advanced features like:
+
+- Fixed headers & pinned columns
+- Column resizing & reordering
+- Row selection & bulk actions
+- Grouping & aggregation
+- Expandable rows
+- Client-side & server-side support
+- Advanced filtering & faceted filters
+- Support Bootstrap classes
+
+---
+
+## 🚀 Features
+
+### 🔹 Core
+- ⚡ High performance rendering
+- 🔍 Global search (debounced)
+- 📄 Pagination (client & server)
+- 🔃 Sorting (asc/desc/reset)
+- 📱 Responsive layout
+
+---
+
+### 🔹 Advanced Grid Features
+
+#### 📌 Column Features
+- Resize columns (drag)
+- Reorder columns (drag & drop)
+- Show / Hide columns
+- Pin columns (left / right)
+
+#### 📌 Row Features
+- Row selection (single / multi)
+- Bulk selection (checkbox)
+- Expandable rows
+- Row actions (buttons / dropdown)
+
+#### 📌 Grouping & Aggregation
+- Group by column
+- Custom group labels
+- Aggregation (sum, avg, etc.)
+
+#### 📌 Filtering
+- Global search
+- Advanced column filters
+- Faceted filters (API or static)
+- Switch-based filters
+
+#### 📌 UI Features
+- Fullscreen mode
+- Sticky headers
+- Empty states
+- Loading overlay
+- Tooltips
+
+---
+
+## How to install   (Required 18 version of react-js)
+
+```bash
+
+npm install pam-grid
+
+```
+#### How To use:
+ Three most importances keys in lib.
+ 1. Columns
+ 2. Hook,
+ 3. Component (Main Component)
+```bash
+
+1. Columns first should define
+const userColumns = [
+  {
+    key: "name",
+    title: "Name",
+    sortable: true,
+    width: 200,
+    ....,
+    ...,
+  },
+  {
+    key: "age",
+    title: "Age",
+    sortable: true,
+  },
+  ......,
+];
+
+type
+export  GridColumn {
+  key: keyof T | (string & {});
+  title: string;
+
+  width?: number;
+  maxWidth?: number;
+  minWidth?: number;
+  className?: string;
+
+  sortable?: boolean;
+  groupable?: boolean;
+  align?: string; // start,end,center,between,around
+  // used for grouping value
+  groupByValue?: (row: T) => GroupKey;
+
+  // used for group header display
+  groupLabel?: (value: GroupKey, items: T[]) => React.ReactNode;
+  pinned?: PinnedPosition;
+  visible?: boolean;
+  order: number;
+  enableAdvancedFilter?: boolean | { type: AdvancedFilterType };
+  originalKey?: string;
+  nestedPath?: string;
+  aggregate?: (vals: number[]) => string;
+  onCellClick?: (row: T, column: GridColumn<T>) => void;
+  render?: (row: T) => React.ReactNode;
+
+  facetedFilter?: FacetedFilter;
+}
+
+```
+
+```bash
+
+import { PamGrid, useGridCore } from "pam-grid";
+// 2. useGridCore()
+
+const grid = useGridCore({
+    columns: userColumns,
+    serverMode: true,     // define which mode
+    initialPageSize: 20,
+    addNewRecord: {
+      label: "Add New User",
+      name: "New",
+      onClick: () => { // provided callback fun },
+    },
+  });
+     
+  // if server side , This hook return  functions and states, help for calling api with filter update state
+    1.Function: (if server side)
+       i.  grid.setServerRows(data);
+       ii. grid.setServerTotal(no_of_data);
+    2.State ( state mainly use for get latest state of filtering )
+        const {sortBy,advanceFilters,groupBy,facetFilters,debouncedSearch} = grid;
+        above filters state as itself object gernerally needed key(column name) eg. sortBy.key
+
+//3. PamGrid
+/* PamGrid take some props,
+   1.columns
+   2.grid
+   3.loading
+   4.isFetching
+   5.features : {
+         search: true,
+          aggregation:true,
+          selection: true,
+          grouping: true,
+          pinning: true,
+          pagination: true,
+          resizing: true,
+          reorder: true,
+          fullScreen:true,
+          columnVisibility: true,
+          pageSizeSelector: true,
+          actions: [
+            {
+              label: "string",
+              icon: "string",
+              onlyIcon:true,
+              onClick: (row) => { },
+              isVisible: boolean
+            },
+            .....
+            ]
+
+        renderExpanded={(row) =>  <MyComponent props={row}>}
+   }
+
+   // Finally render 
+
+     <PamGrid
+          columns={userColumns}
+          grid={grid}
+          loading={isLoading}
+          isFetching={isFetching && !isLoading}
+          isDropdown
+          customeDiv={
+            <div className="col-6 col-sm-4 col-md-2 my-1">
+         
+            <DatePicker
+              name="date"
+              control={control}
+              placeholder="DD-MM-YYYY"
+              className="w-100"
+              maxDate={new Date()}
+            />
+        </div>
+          }
+          features={{
+            search: true,
+            selection: true,
+            pinning: true,
+            pagination: true,
+            resizing: true,
+            reorder: true,
+            columnVisibility: true,
+            pageSizeSelector: true,
+            expand: true,
+            actions: [
+              {
+                label: "Edit",
+                icon: "bx bx-edit text-primary cursor-pointer",
+                onClick: (row) => onEdit?.(row),
+              },
+            ],
+          }}
+          renderExpanded={(row) => <UserDetails id={row?.id} />}
+        />
+
+*/
+
+    
+```

package/dist/index.css

@@ -27441,7 +27441,6 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
   z-index: 6;
   background: #fff;
   border-bottom: 1px solid #dee2e6;
-  font-weight: 600;
   box-shadow: inset 0 -1px 0 #dee2e6;
 }
 .pms-grid td.pinned,
@@ -27458,7 +27457,7 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
   right: 0;
   z-index: 8;
   background: #fff;
-  box-shadow: -1px 0 1px rgba(0, 0, 0, 0.08);
+  border-left: 1px solid #e4e6e8;
 }
 .pms-grid tbody tr:hover {
   background-color: #e9f5ff;
@@ -27662,6 +27661,9 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
 .cursor-resize {
   cursor: e-resize;
 }
+.col-resize {
+  cursor: col-resize;
+}
 .cursor-grab {
   cursor: grab;
 }