@pequity/squirrel 8.5.2 → 9.0.0

package/dist/es/chunks/p-table-header-cell.js

@@ -1,12 +1,8 @@
-import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, normalizeStyle, normalizeClass, toDisplayString } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, renderSlot, createVNode, normalizeStyle, normalizeClass, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./p-icon.js";
 import { _ as _sfc_main$1 } from "./p-info-icon.js";
-const _hoisted_1 = { class: "flex items-center overflow-hidden" };
+const _hoisted_1 = { class: "flex items-center gap-x-1 overflow-hidden" };
 const _hoisted_2 = ["title"];
-const _hoisted_3 = {
-  key: 0,
-  class: "relative ml-1 mr-auto h-3 w-3 shrink-0"
-};
 const DEFAULT_CLASSES = `text-xs font-semibold line-clamp-2 break-words hyphens-auto whitespace-normal max-h-10 shrink`;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -31,18 +27,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
-          class: normalizeClass([DEFAULT_CLASSES, _ctx.textClass, textColorClass.value, { "mr-auto": !_ctx.tooltipText }]),
+          class: normalizeClass([DEFAULT_CLASSES, _ctx.textClass, textColorClass.value]),
           style: normalizeStyle(style.value),
           title: _ctx.text,
           "data-p-table-header-text": ""
         }, toDisplayString(_ctx.text), 15, _hoisted_2),
-        _ctx.tooltipText ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          createVNode(_sfc_main$1, { text: _ctx.tooltipText }, null, 8, ["text"])
-        ])) : createCommentVNode("", true),
+        _ctx.tooltipText ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          text: _ctx.tooltipText
+        }, null, 8, ["text"])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "icon"),
         createVNode(_sfc_main$2, {
           icon: _ctx.filterActive ? "ph:funnel-fill" : "si:filter-list-alt-duotone",
           class: normalizeClass([
-            "ml-2 mr-px cursor-pointer rounded-sm",
+            "ml-auto cursor-pointer rounded-sm",
             { hidden: !_ctx.showFilterIcon },
             _ctx.filterActive ? "text-active-blue hover:bg-p-blue-10 hover:text-p-blue-60 hover:ring-1 hover:ring-p-blue-10" : "text-p-gray-60 hover:bg-p-gray-10 hover:text-night hover:ring-1 hover:ring-p-gray-10"
           ]),

package/dist/es/index.js

@@ -11,7 +11,7 @@ import { default as default5 } from "./p-drawer.js";
 import { default as default6 } from "./p-dropdown.js";
 import { _ as _imports_0$1 } from "./chunks/p-dropdown-select.js";
 import { a } from "./chunks/p-dropdown-select.js";
-import { defineComponent, shallowRef, ref, computed, onMounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, withDirectives, unref, toDisplayString, withModifiers, createVNode, createTextVNode, Fragment, renderList, vShow, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, useTemplateRef, onBeforeUnmount, watch, mergeProps, toHandlers, createBlock, withCtx } from "vue";
+import { defineComponent, shallowRef, ref, computed, onMounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, withDirectives, unref, toDisplayString, withModifiers, createVNode, createTextVNode, Fragment, renderList, vShow, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, useTemplateRef, onBeforeUnmount, watch, mergeProps, toHandlers, withCtx, createBlock } from "vue";
 import { formatBytes, getFileExtension } from "./p-file-upload.js";
 import { _ as _sfc_main$4 } from "./chunks/p-icon.js";
 import { useInputClasses } from "./useInputClasses.js";
@@ -881,7 +881,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         "text-color": headerCellTextColor(col)
                       }, { ref_for: true }, col.headerCellAttrs, {
                         onClickFilterIcon: ($event) => _ctx.$emit("click-filter-icon", $event, col)
-                      }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
+                      }), {
+                        icon: withCtx(() => [
+                          renderSlot(_ctx.$slots, `header-cell-icon-${unref(kebabCase)(col.name)}`, { col }, void 0, true)
+                        ]),
+                        _: 2
+                      }, 1040, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
                     ], 2),
                     _ctx.colsResizable && i2 !== 0 && !(i2 === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (openBlock(), createElementBlock("div", {
                       key: 0,
@@ -947,7 +952,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-58c21732"]]);
+const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9bbf6a22"]]);
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1019_75838)'%3e%3cpath%20d='M11.6533%203.37331L8.47329%200.18664C8.41131%200.124154%208.33758%200.074558%208.25634%200.0407122C8.1751%200.00686641%208.08796%20-0.0105591%207.99995%20-0.0105591C7.91194%20-0.0105591%207.82481%200.00686641%207.74357%200.0407122C7.66233%200.074558%207.58859%200.124154%207.52662%200.18664L4.34662%203.37331C4.253%203.46615%204.18902%203.58468%204.16277%203.71388C4.13651%203.84309%204.14916%203.97719%204.19911%204.09921C4.24906%204.22123%204.33407%204.3257%204.44339%204.39941C4.55271%204.47312%204.68144%204.51275%204.81329%204.51331H6.81329C6.83571%204.51054%206.85846%204.51235%206.88016%204.51865C6.90186%204.52494%206.92205%204.53559%206.93951%204.54993C6.95697%204.56427%206.97133%204.58201%206.98172%204.60207C6.99211%204.62214%206.99832%204.6441%206.99995%204.66664V14.9933C6.99995%2015.2585%207.10531%2015.5129%207.29285%2015.7004C7.48038%2015.888%207.73474%2015.9933%207.99995%2015.9933C8.26517%2015.9933%208.51952%2015.888%208.70706%2015.7004C8.8946%2015.5129%208.99995%2015.2585%208.99995%2014.9933V4.66664C8.99995%204.62244%209.01751%204.58004%209.04877%204.54879C9.08002%204.51753%209.12242%204.49997%209.16662%204.49997H11.1666C11.2985%204.49942%2011.4272%204.45978%2011.5365%204.38608C11.6458%204.31237%2011.7308%204.2079%2011.7808%204.08587C11.8307%203.96385%2011.8434%203.82976%2011.8171%203.70055C11.7909%203.57134%2011.7269%203.45282%2011.6333%203.35997L11.6533%203.37331Z'%20fill='%23424E6E'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1019_75838'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
 const _imports_1 = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1019_80096)'%3e%3cpath%20d='M11.6533%203.37331L8.47329%200.18664C8.41131%200.124154%208.33758%200.074558%208.25634%200.0407122C8.1751%200.00686641%208.08796%20-0.0105591%207.99995%20-0.0105591C7.91194%20-0.0105591%207.82481%200.00686641%207.74357%200.0407122C7.66233%200.074558%207.58859%200.124154%207.52662%200.18664L4.34662%203.37331C4.253%203.46615%204.18902%203.58468%204.16277%203.71388C4.13651%203.84309%204.14916%203.97719%204.19911%204.09921C4.24906%204.22123%204.33407%204.3257%204.44339%204.39941C4.55271%204.47312%204.68144%204.51275%204.81329%204.51331H6.81329C6.83571%204.51054%206.85846%204.51235%206.88016%204.51865C6.90186%204.52494%206.92205%204.53559%206.93951%204.54993C6.95697%204.56427%206.97133%204.58201%206.98172%204.60207C6.99211%204.62214%206.99832%204.6441%206.99995%204.66664V14.9933C6.99995%2015.2585%207.10531%2015.5129%207.29285%2015.7004C7.48038%2015.888%207.73474%2015.9933%207.99995%2015.9933C8.26517%2015.9933%208.51952%2015.888%208.70706%2015.7004C8.8946%2015.5129%208.99995%2015.2585%208.99995%2014.9933V4.66664C8.99995%204.62244%209.01751%204.58004%209.04877%204.54879C9.08002%204.51753%209.12242%204.49997%209.16662%204.49997H11.1666C11.2985%204.49942%2011.4272%204.45978%2011.5365%204.38608C11.6458%204.31237%2011.7308%204.2079%2011.7808%204.08587C11.8307%203.96385%2011.8434%203.82976%2011.8171%203.70055C11.7909%203.57134%2011.7269%203.45282%2011.6333%203.35997L11.6533%203.37331Z'%20fill='%23323CEB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1019_80096'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
 const _imports_2 = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1019_75842)'%3e%3cpath%20d='M11.8%2011.8933C11.75%2011.7716%2011.665%2011.6674%2011.5559%2011.5938C11.4467%2011.5203%2011.3183%2011.4807%2011.1866%2011.48H9.18664C9.16473%2011.4828%209.14248%2011.4812%209.12119%2011.4753C9.0999%2011.4694%209.07999%2011.4594%209.06262%2011.4457C9.04525%2011.4321%209.03077%2011.4151%209.02001%2011.3958C9.00926%2011.3765%209.00245%2011.3553%208.99997%2011.3333V1C8.99997%200.734784%208.89462%200.48043%208.70708%200.292893C8.51954%200.105357%208.26519%200%207.99997%200C7.73476%200%207.4804%200.105357%207.29287%200.292893C7.10533%200.48043%206.99997%200.734784%206.99997%201V11.3333C6.99997%2011.3775%206.98241%2011.4199%206.95116%2011.4512C6.9199%2011.4824%206.87751%2011.5%206.83331%2011.5H4.83331C4.70146%2011.5006%204.57273%2011.5402%204.46341%2011.6139C4.35409%2011.6876%204.26908%2011.7921%204.21913%2011.9141C4.16918%2012.0361%204.15653%2012.1702%204.18279%2012.2994C4.20904%2012.4286%204.27302%2012.5472%204.36664%2012.64L7.54664%2015.8267C7.60861%2015.8892%207.68235%2015.9387%207.76359%2015.9726C7.84483%2016.0064%207.93196%2016.0239%208.01997%2016.0239C8.10798%2016.0239%208.19512%2016.0064%208.27636%2015.9726C8.3576%2015.9387%208.43133%2015.8892%208.49331%2015.8267L11.6733%2012.64C11.7677%2012.5431%2011.8303%2012.4198%2011.853%2012.2864C11.8756%2012.153%2011.8571%2012.0159%2011.8%2011.8933Z'%20fill='%23424E6E'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1019_75842'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";

package/dist/es/number.js

@@ -1,8 +1,9 @@
 const toNumberOrNull = (val) => {
-  if (val === "" || val === null || isNaN(Number(val))) {
+  if (val === "" || val === null) {
     return null;
   }
-  return Number(val);
+  const num = Number(val);
+  return isFinite(num) ? num : null;
 };
 export {
   toNumberOrNull

package/dist/squirrel/components/p-table/p-table.vue.d.ts

@@ -57,6 +57,10 @@ declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNull
         [x: `prepend-header-cell-${string}`]: ((props: {
             col: TableCol;
         }) => any) | undefined;
+    } & {
+        [x: `header-cell-icon-${string}`]: ((props: {
+            col: TableCol;
+        }) => any) | undefined;
     } & {
         [x: `subheader-cell-${string}`]: ((props: {}) => any) | undefined;
     } & {

package/dist/squirrel/components/p-table-header-cell/p-table-header-cell.vue.d.ts

@@ -6,7 +6,11 @@ type Props = {
     tooltipText?: string;
     textColor?: string;
 };
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click-filter-icon": (event: Event, filterActive: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onClick-filter-icon"?: ((event: Event, filterActive: boolean) => any) | undefined;
@@ -18,4 +22,10 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
     showFilterIcon: boolean;
     textColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/squirrel.css

@@ -1117,35 +1117,35 @@ to {
   background-image: url("data:image/svg+xml,%3csvg%20width='33'%20height='30'%20viewBox='0%200%2033%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.0143%2029.9524C31.1862%2029.9516%2031.3551%2029.9066%2031.5045%2029.8215C31.6539%2029.7365%2031.7789%2029.6144%2031.8674%2029.4669C31.9558%2029.3195%2032.0048%2029.1517%2032.0095%2028.9799C32.0142%2028.808%2031.9745%2028.6378%2031.8943%2028.4857L16.8943%200.485744C16.8006%200.337008%2016.6708%200.214443%2016.5169%200.129498C16.363%200.0445534%2016.1901%200%2016.0143%200C15.8385%200%2015.6656%200.0445534%2015.5117%200.129498C15.3578%200.214443%2015.228%200.337008%2015.1343%200.485744L0.134286%2028.4857C0.0463617%2028.6353%200%2028.8056%200%2028.9791C0%2029.1526%200.0463617%2029.3229%200.134286%2029.4724C0.221436%2029.6207%200.346313%2029.7432%200.496207%2029.8275C0.6461%2029.9118%200.815658%2029.9549%200.98762%2029.9524H31.0143ZM16.0143%2026.2857C15.6176%2026.2857%2015.2299%2026.1677%2014.9004%2025.9467C14.571%2025.7258%2014.3147%2025.4118%2014.1641%2025.0448C14.0136%2024.6778%2013.9755%2024.2743%2014.0549%2023.8857C14.1342%2023.497%2014.3274%2023.1407%2014.6098%2022.8621C14.8922%2022.5835%2015.251%2022.3951%2015.6407%2022.321C16.0304%2022.2468%2016.4334%2022.2903%2016.7983%2022.4458C17.1633%2022.6012%2017.4737%2022.8617%2017.6903%2023.1941C17.9068%2023.5265%2018.0196%2023.9158%2018.0143%2024.3124C18.0073%2024.8382%2017.7935%2025.3401%2017.4192%2025.7094C17.0448%2026.0787%2016.5401%2026.2858%2016.0143%2026.2857ZM16.0143%209.95241C16.3679%209.95241%2016.707%2010.0929%2016.9571%2010.3429C17.2071%2010.593%2017.3476%2010.9321%2017.3476%2011.2857V18.5791C17.3476%2018.9327%2017.2071%2019.2718%2016.9571%2019.5219C16.707%2019.7719%2016.3679%2019.9124%2016.0143%2019.9124C15.6607%2019.9124%2015.3215%2019.7719%2015.0715%2019.5219C14.8214%2019.2718%2014.681%2018.9327%2014.681%2018.5791V11.2857C14.681%2010.9321%2014.8214%2010.593%2015.0715%2010.3429C15.3215%2010.0929%2015.6607%209.95241%2016.0143%209.95241Z'%20fill='%23F2C94C'%20/%3e%3c/svg%3e");
 }
 
-/*# sourceMappingURL=squirrel.css.map */.p-table[data-v-58c21732] {
+/*# sourceMappingURL=squirrel.css.map */.p-table[data-v-9bbf6a22] {
   color: rgb(var(--color-night));
   height: 1px;
 }
-.p-table th[data-v-58c21732] {
+.p-table th[data-v-9bbf6a22] {
   position: sticky;
   top: 0px;
   z-index: 20;
   padding: 0px;
 }
-.p-table.first-col-fixed th[data-v-58c21732]:first-child {
+.p-table.first-col-fixed th[data-v-9bbf6a22]:first-child {
   left: 0px;
   z-index: 30;
 }
-.p-table.first-col-fixed th:first-child .th-shadow[data-v-58c21732] {
+.p-table.first-col-fixed th:first-child .th-shadow[data-v-9bbf6a22] {
   box-shadow: -1px 1px 5px 4px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px -12px 0px 0px);
 }
-.p-table.last-col-fixed th[data-v-58c21732]:last-child {
+.p-table.last-col-fixed th[data-v-9bbf6a22]:last-child {
   right: 0px;
   z-index: 30;
 }
-.p-table.last-col-fixed th:last-child .th-shadow[data-v-58c21732] {
+.p-table.last-col-fixed th:last-child .th-shadow[data-v-9bbf6a22] {
   box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px 0px 0px -12px);
 }
-[data-v-58c21732] .p-table tr:last-child td {
+[data-v-9bbf6a22] .p-table tr:last-child td {
   border-bottom-width: 0px;
 }
-[data-v-58c21732] .p-table tr:last-child td.td-col-fixed-border-b::after {
+[data-v-9bbf6a22] .p-table tr:last-child td.td-col-fixed-border-b::after {
   height: 0px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.5.2",
+  "version": "9.0.0",
   "packageManager": "pnpm@10.15.1",
   "type": "module",
   "scripts": {
@@ -41,6 +41,7 @@
     "@tanstack/vue-virtual": "^3.8.3",
     "@vuepic/vue-datepicker": "^11.0.1",
     "floating-vue": "^5.2.2",
+    "iconify-icon": "^3.0.0",
     "lodash-es": "^4.17.21",
     "vue": "^3.4.33",
     "vue-currency-input": "^3.1.0",
@@ -54,15 +55,15 @@
     "@playwright/test": "^1.55.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^9.1.4",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-links": "^9.1.4",
-    "@storybook/addon-vitest": "^9.1.4",
-    "@storybook/vue3-vite": "^9.1.4",
+    "@storybook/addon-a11y": "^9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-links": "^9.1.5",
+    "@storybook/addon-vitest": "^9.1.5",
+    "@storybook/vue3-vite": "^9.1.5",
     "@tanstack/vue-virtual": "3.13.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.3.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
@@ -70,8 +71,8 @@
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.34.0",
-    "eslint-plugin-storybook": "^9.1.4",
+    "eslint": "^9.35.0",
+    "eslint-plugin-storybook": "^9.1.5",
     "floating-vue": "5.2.2",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
@@ -86,13 +87,13 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.92.0",
-    "semantic-release": "^24.2.7",
-    "storybook": "^9.1.4",
+    "sass": "^1.92.1",
+    "semantic-release": "^24.2.8",
+    "storybook": "^9.1.5",
     "svgo": "^4.0.0",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.8.3",
-    "vite": "^7.1.4",
+    "typescript": "5.9.2",
+    "vite": "^7.1.5",
     "vitest": "^3.2.4",
     "vue": "3.5.21",
     "vue-currency-input": "3.2.1",
@@ -102,6 +103,6 @@
   },
   "dependencies": {
     "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^3.1.0"
+    "tailwind-variants": "^3.1.1"
   }
 }

package/squirrel/components/p-table/p-table.spec.js

@@ -458,4 +458,30 @@ describe('PTable.vue', () => {
     expect(typeof wrapper.emitted()['col-resize'][0][0]).toBe('number');
     expect(typeof wrapper.emitted()['col-resize'][0][1]).toBe('number');
   });
+
+  it('renders header cell icon slots correctly', async () => {
+    const cols = cloneDeep(columns);
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols },
+      slots: {
+        'header-cell-icon-first-column': `<div class="custom-icon">📊</div>`,
+        'header-cell-icon-second-column': `<span class="icon-span">⚡</span>`,
+      },
+    });
+
+    // Check that the first column has the custom icon
+    const firstColumnIcon = wrapper.find('th[data-col-id="1"] .custom-icon');
+    expect(firstColumnIcon.exists()).toBe(true);
+    expect(firstColumnIcon.text()).toBe('📊');
+
+    // Check that the second column has the custom icon
+    const secondColumnIcon = wrapper.find('th[data-col-id="2"] .icon-span');
+    expect(secondColumnIcon.exists()).toBe(true);
+    expect(secondColumnIcon.text()).toBe('⚡');
+
+    // Check that the third column doesn't have a custom icon (no slot provided)
+    const thirdColumnHeader = wrapper.find('th[data-col-id="3"]');
+    expect(thirdColumnHeader.find('.custom-icon').exists()).toBe(false);
+    expect(thirdColumnHeader.find('.icon-span').exists()).toBe(false);
+  });
 });

package/squirrel/components/p-table/p-table.vue

@@ -48,7 +48,11 @@
                   :text-color="headerCellTextColor(col)"
                   v-bind="col.headerCellAttrs"
                   @click-filter-icon="$emit('click-filter-icon', $event, col)"
-                />
+                >
+                  <template #icon>
+                    <slot :name="`header-cell-icon-${kebabCase(col.name)}`" :col="col"></slot>
+                  </template>
+                </PTableHeaderCell>
               </div>
               <div
                 v-if="colsResizable && i !== 0 && !(i === cols.length - 1 && isLastColFixed)"

package/squirrel/components/p-table-header-cell/p-table-header-cell.spec.js

@@ -20,7 +20,7 @@ describe('PTableHeaderCell.vue', () => {
     const icon = wrapper.findComponent({ name: 'PIcon' });
     const tooltipIcon = await wrapper.findComponent({ name: 'PInfoIcon' });
 
-    expect(wrapper.classes()).toEqual(['flex', 'items-center', 'overflow-hidden']);
+    expect(wrapper.classes()).toEqual(['flex', 'items-center', 'gap-x-1', 'overflow-hidden']);
     expect(icon.exists()).toBe(true);
     expect(icon.classes()).toContain('hidden');
     expect(div.text()).toBe('Test text');
@@ -36,7 +36,6 @@ describe('PTableHeaderCell.vue', () => {
       'shrink',
       'test-class',
       'text-p-gray-60',
-      'mr-auto',
     ]);
     expect(tooltipIcon.exists()).toBe(false);
   });
@@ -78,7 +77,7 @@ describe('PTableHeaderCell.vue', () => {
     const tooltipIcon = await wrapper.findComponent({ name: 'PInfoIcon' });
     const tooltipIconDivElClasses = [...wrapper.find('p-info-icon-stub').element.parentNode.classList];
 
-    expect(tooltipIconDivElClasses).toEqual(['relative', 'ml-1', 'mr-auto', 'h-3', 'w-3', 'shrink-0']);
+    expect(tooltipIconDivElClasses).toEqual(['flex', 'items-center', 'gap-x-1', 'overflow-hidden']);
     expect(tooltipIcon.exists()).toBe(true);
   });
 
@@ -103,4 +102,19 @@ describe('PTableHeaderCell.vue', () => {
     expect(mouseEvent).toBeInstanceOf(MouseEvent);
     expect(active).toBe(false);
   });
+
+  it('renders the icon slot', async () => {
+    const wrapper = createWrapperFor(PTableHeaderCell, {
+      props: {
+        text: 'Test text',
+        textClass: 'test-class',
+        showFilterIcon: false,
+      },
+      slots: { icon: '<div class="icon-slot">Icon</div>' },
+    });
+
+    const iconSlotContent = wrapper.find('div.icon-slot');
+
+    expect(iconSlotContent.exists()).toBe(true);
+  });
 });

package/squirrel/components/p-table-header-cell/p-table-header-cell.stories.js

@@ -1,3 +1,4 @@
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
 import { action } from 'storybook/actions';
 
@@ -50,17 +51,41 @@ export const WithTooltip = {
   },
 };
 
-export const WithBackground = {
+export const WithIconSlot = {
   render: (args) => ({
-    components: { PTableHeaderCell },
+    components: { PTableHeaderCell, PIcon },
     setup() {
-      const onFilterIconClick = action('filter icon clicked');
-
-      return { args, onFilterIconClick };
+      return { args };
     },
+    template: `
+      <div class="w-52">
+        <PTableHeaderCell v-bind="args">
+          <template #icon>
+            ${args.icon}
+          </template>
+        </PTableHeaderCell>
+      </div>
+    `,
+  }),
+  args: {
+    ...Default.args,
+    icon: '<PIcon icon="refresh" width="14" class="text-p-gray-60" />',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows how to use the icon slot to display a custom icon after the header text.',
+      },
+    },
+  },
+};
+
+export const WithBackground = {
+  render: (args) => ({
+    components: { PTableHeaderCell },
     template: `
       <div class="w-52 px-2 py-2 bg-p-blue-10">
-        <PTableHeaderCell v-bind="args" @click-filter-icon="onFilterIconClick" />
+        <PTableHeaderCell v-bind="args" />
       </div>
     `,
   }),

package/squirrel/components/p-table-header-cell/p-table-header-cell.vue

@@ -1,20 +1,17 @@
 <template>
-  <div class="flex items-center overflow-hidden">
-    <div
-      :class="[DEFAULT_CLASSES, textClass, textColorClass, { 'mr-auto': !tooltipText }]"
-      :style="style"
-      :title="text"
-      data-p-table-header-text
-    >
+  <div class="flex items-center gap-x-1 overflow-hidden">
+    <div :class="[DEFAULT_CLASSES, textClass, textColorClass]" :style="style" :title="text" data-p-table-header-text>
       {{ text }}
     </div>
-    <div v-if="tooltipText" class="relative ml-1 mr-auto h-3 w-3 shrink-0">
-      <PInfoIcon :text="tooltipText" />
-    </div>
+
+    <PInfoIcon v-if="tooltipText" :text="tooltipText" />
+
+    <slot name="icon"></slot>
+
     <PIcon
       :icon="filterActive ? 'ph:funnel-fill' : 'si:filter-list-alt-duotone'"
       :class="[
-        'ml-2 mr-px cursor-pointer rounded-sm',
+        'ml-auto cursor-pointer rounded-sm',
         { hidden: !showFilterIcon },
         filterActive
           ? 'text-active-blue hover:bg-p-blue-10 hover:text-p-blue-60 hover:ring-1 hover:ring-p-blue-10'

package/squirrel/utils/number.spec.js

@@ -1,11 +1,21 @@
 import { toNumberOrNull } from '@squirrel/utils/number';
 
 describe('toNumberOrNull', () => {
-  it.each(['', null, 'abc', NaN, {}])('returns null if input is %s', (val) => {
+  it.each(['', null, 'abc', NaN, {}, Infinity, -Infinity])('returns null if input is %s', (val) => {
     expect(toNumberOrNull(val)).toBeNull();
   });
 
-  it('returns a number if input is a valid number', () => {
-    expect(toNumberOrNull(123)).toBe(123);
+  it.each([123, '123', 0, '0', -42, '-42', 3.14, '3.14'])(
+    'returns a number if input is a valid finite number: %s',
+    (val) => {
+      expect(toNumberOrNull(val)).toBe(Number(val));
+    }
+  );
+
+  it('handles edge cases for infinite values', () => {
+    expect(toNumberOrNull('Infinity')).toBeNull();
+    expect(toNumberOrNull('-Infinity')).toBeNull();
+    expect(toNumberOrNull(Number.POSITIVE_INFINITY)).toBeNull();
+    expect(toNumberOrNull(Number.NEGATIVE_INFINITY)).toBeNull();
   });
 });

package/squirrel/utils/number.ts

@@ -7,8 +7,11 @@
  * @returns a number or null
  */
 export const toNumberOrNull = (val: unknown) => {
-  if (val === '' || val === null || isNaN(Number(val))) {
+  if (val === '' || val === null) {
     return null;
   }
-  return Number(val);
+
+  const num = Number(val);
+
+  return isFinite(num) ? num : null;
 };