📊 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)

npm install pam-grid

How To use:

Three most importances keys in lib.

1. Columns
2. Hook,
3. Component (Main Component)

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;
}

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} />}
        />

*/