@@ -421,7 +432,7 @@ export default function PmsGrid({
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
- {[10, 25, 50, 100].map((n) => (
+ {[25, 50, 100].map((n) => (
diff --git a/src/services/pmsGrid/PmsHeaderOption.jsx b/src/services/pmsGrid/PmsHeaderOption.jsx
index 69e59af3..e3b7e8c4 100644
--- a/src/services/pmsGrid/PmsHeaderOption.jsx
+++ b/src/services/pmsGrid/PmsHeaderOption.jsx
@@ -129,15 +129,30 @@ const PmsHeaderOption = ({
className="dropdown-menu shadow rounded-3 py-2 show"
style={pinStyle}
>
-
-
-
+
+ {!pinned && }
+
+ No Pin
+
+
+
+
+ {pinned === "left" && (
+
+ )}
+
+ Pin Left
+
+
+
+
+ {pinned === "right" && (
+
+ )}
+
+ Pin Right
+
+
)}
diff --git a/src/services/pmsGrid/pms-grid.css b/src/services/pmsGrid/pms-grid.css
index 5066ca4d..0eadc437 100644
--- a/src/services/pmsGrid/pms-grid.css
+++ b/src/services/pmsGrid/pms-grid.css
@@ -214,4 +214,43 @@
box-shadow: -2px 0 3px rgba(0, 0, 0, 0.08);
+}
+
+
+
+/* Skeleton Loader */
+
+.loading-skeleton {
+ color: transparent;
+ appearance: none;
+ -webkit-appearance: none;
+ background-color: #eee;
+ border-color: #eee;
+
+ &::placeholder {
+ color: transparent;
+ }
+}
+@keyframes loading-skeleton {
+ from {
+ opacity: .4;
+ }
+ to {
+ opacity: 1;
+ }
+}
+.loading-skeleton {
+ pointer-events: none;
+ animation: loading-skeleton 1s infinite alternate;
+
+ img {
+ filter: grayscale(100) contrast(0%) brightness(1.8);
+ }
+ h1, h2, h3, h4, h5, h6,
+ p, li,
+ .btn,
+ label,
+ .form-control {
+ @extend %loading-skeleton;
+ }
}
\ No newline at end of file
diff --git a/src/services/pmsGrid/useGridCore.js b/src/services/pmsGrid/useGridCore.js
index 4038f7cd..7fdb388f 100644
--- a/src/services/pmsGrid/useGridCore.js
+++ b/src/services/pmsGrid/useGridCore.js
@@ -1,4 +1,11 @@
-import { useState, useMemo, useCallback, useEffect,useLayoutEffect } from "react";
+import { error } from "pdf-lib";
+import {
+ useState,
+ useMemo,
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+} from "react";
/*
options:
@@ -7,13 +14,12 @@ import { useState, useMemo, useCallback, useEffect,useLayoutEffect } from "react
- initialPageSize
*/
-
export function useGridCore({
data,
serverMode = false,
fetcher,
rowKey = "id",
- initialPageSize = 5,
+ initialPageSize = 20,
columns = [],
}) {
const [page, setPage] = useState(1);
@@ -40,6 +46,7 @@ export function useGridCore({
const [totalRows, setTotalRows] = useState(data ? data.length : 0);
const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
const [serverRows, setServerRows] = useState([]);
/* ---------------- SEARCH (DEBOUNCE) ---------------- */
@@ -62,7 +69,9 @@ export function useGridCore({
const q = search.toLowerCase();
filtered = filtered.filter((r) =>
Object.values(r).some((v) =>
- String(v ?? "").toLowerCase().includes(q)
+ String(v ?? "")
+ .toLowerCase()
+ .includes(q)
)
);
}
@@ -121,6 +130,8 @@ export function useGridCore({
setServerRows(resp?.rows || []);
setTotalRows(resp?.total ?? resp?.rows?.length ?? 0);
+ } catch (err) {
+ setError(err);
} finally {
setLoading(false);
}
@@ -140,18 +151,18 @@ export function useGridCore({
}, [serverMode, fetchServer]);
/* ---------------- ADVANCED FILTER API ---------------- */
- const setColumnAdvanceFilter = useCallback((columnKey, filter) => {
+ const setColumnAdvanceFilter = useCallback((column, filter) => {
setAdvanceFilters((prev) => {
if (!filter) {
const copy = { ...prev };
- delete copy[columnKey];
+ delete copy[column];
return copy;
}
return {
...prev,
- [columnKey]: {
- columnKey,
+ [column]: {
+ column,
...filter,
},
};
@@ -235,8 +246,9 @@ export function useGridCore({
totalRows,
totalPages,
- // loading
+ // loading & error
loading,
+ error,
// search
search,
@@ -279,13 +291,6 @@ export function useGridCore({
};
}
-
-
-
-
-
-
-
export function useDropdownPosition(btnRef, menuRef, isOpen, level = 0) {
const [style, setStyle] = useState({});
@@ -348,4 +353,3 @@ export function useDropdownPosition(btnRef, menuRef, isOpen, level = 0) {
return style;
}
-