@pequity/squirrel 7.1.5 → 7.2.0

package/dist/cjs/index.js

@@ -45,12 +45,12 @@ const pSkeletonLoader = require("./p-skeleton-loader.js");
 const pTable$1 = require("./p-table.js");
 const usePTableColResize = require("./usePTableColResize.js");
 const pTableHeaderCell = require("./p-table-header-cell.js");
+const pTableTd = require("./p-table-td.js");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const usePTableRowVirtualizer = require("./usePTableRowVirtualizer.js");
 const pTableFilterIcon = require("./p-table-filter-icon.js");
 const pTableLoader_vue_vue_type_script_setup_true_lang = require("./chunks/p-table-loader.js");
 const pTableSort = require("./p-table-sort.js");
-const pTableTd = require("./p-table-td.js");
 const pTabs_vue_vue_type_script_setup_true_lang = require("./chunks/p-tabs.js");
 const pTextarea_vue_vue_type_script_setup_true_lang = require("./chunks/p-textarea.js");
 const pToggle = require("./p-toggle.js");
@@ -79,7 +79,7 @@ const _hoisted_6$3 = {
   key: 1,
   class: "flex flex-col items-center"
 };
-const _hoisted_7 = { class: "mt-2 text-p-purple-60" };
+const _hoisted_7$1 = { class: "mt-2 text-p-purple-60" };
 const _hoisted_8 = ["accept", "multiple", "disabled"];
 const _hoisted_9 = { class: "max-h-48 overflow-y-auto overflow-x-hidden" };
 const _hoisted_10 = ["title"];
@@ -270,7 +270,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                 width: "32",
                 class: "text-primary"
               }),
-              vue.createElementVNode("div", _hoisted_7, "Drop " + vue.toDisplayString(fileWord.value), 1)
+              vue.createElementVNode("div", _hoisted_7$1, "Drop " + vue.toDisplayString(fileWord.value), 1)
             ])),
             vue.createElementVNode("input", {
               ref_key: "fileInputRef",
@@ -668,7 +668,8 @@ const _hoisted_4$1 = {
   class: "min-w-[80px] bg-gradient-to-r from-white via-p-gray-10 to-p-gray-10"
 };
 const _hoisted_5$1 = { key: 0 };
-const _hoisted_6$1 = { key: 1 };
+const _hoisted_6$1 = { class: "py-2" };
+const _hoisted_7 = { key: 1 };
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "PTable" },
   __name: "p-table",
@@ -682,7 +683,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     virtualizer: { default: () => ({
       paddingTop: 0,
       paddingBottom: 0
-    }) }
+    }) },
+    data: { default: void 0 }
   },
   emits: ["scroll", "click-filter-icon", "col-resize"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -865,8 +867,32 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                 style: vue.normalizeStyle({ height: `${_ctx.virtualizer.paddingTop}px` })
               }, null, 4)
             ])) : vue.createCommentVNode("", true),
-            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
-            _ctx.virtualizer.paddingBottom > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$1, [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.data, (rowData, rowIndex) => {
+                return vue.openBlock(), vue.createElementBlock("tr", {
+                  key: `row-${rowIndex}`
+                }, [
+                  vue.renderSlot(_ctx.$slots, "row", vue.mergeProps({ ref_for: true }, { rowData, rowIndex }), () => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.cols, (col, colIndex) => {
+                      return vue.openBlock(), vue.createBlock(pTableTd, {
+                        key: `cell-${rowIndex}-${colIndex}`,
+                        "col-index": colIndex
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "cell", vue.mergeProps({ ref_for: true }, { col, colIndex, rowData, rowIndex, cellData: rowData[col.name] }), () => [
+                            vue.renderSlot(_ctx.$slots, `cell-${vue.unref(lodashEs.kebabCase)(col.name)}`, vue.mergeProps({ ref_for: true }, { col, rowData, rowIndex, cellData: rowData[col.name] }), () => [
+                              vue.createElementVNode("div", _hoisted_6$1, vue.toDisplayString(rowData[col.name]), 1)
+                            ], true)
+                          ], true)
+                        ]),
+                        _: 2
+                      }, 1032, ["col-index"]);
+                    }), 128))
+                  ], true)
+                ]);
+              }), 128))
+            ], true),
+            _ctx.virtualizer.paddingBottom > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7, [
               vue.createElementVNode("td", {
                 style: vue.normalizeStyle({ height: `${_ctx.virtualizer.paddingBottom}px` })
               }, null, 4)
@@ -877,7 +903,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["__scopeId", "data-v-8560a8de"]]);
+const pTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["__scopeId", "data-v-2a6e864b"]]);
 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";
@@ -1000,11 +1026,11 @@ exports.isFirstColFixedInjectionKey = pTable$1.isFirstColFixedInjectionKey;
 exports.isLastColFixedInjectionKey = pTable$1.isLastColFixedInjectionKey;
 exports.usePTableColResize = usePTableColResize.usePTableColResize;
 exports.PTableHeaderCell = pTableHeaderCell;
+exports.PTableTd = pTableTd;
 exports.usePTableRowVirtualizer = usePTableRowVirtualizer.usePTableRowVirtualizer;
 exports.PFilterIcon = pTableFilterIcon;
 exports.PTableLoader = pTableLoader_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.SORTING_TYPES = pTableSort.SORTING_TYPES;
-exports.PTableTd = pTableTd;
 exports.PTabs = pTabs_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PTextarea = pTextarea_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PToggle = pToggle;

package/dist/cjs/p-table-td.js

@@ -82,5 +82,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pTableTd = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c9978e26"]]);
-module.exports = pTableTd;
+const PTableTd = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-c9978e26"]]);
+module.exports = PTableTd;

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, onBeforeUnmount, watch, mergeProps, toHandlers } 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, onBeforeUnmount, watch, mergeProps, toHandlers, createBlock, withCtx } 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";
@@ -45,15 +45,15 @@ import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionK
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
 import PTableHeaderCell from "./p-table-header-cell.js";
+import PTableTd from "./p-table-td.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
 import { default as default11 } from "./p-table-filter-icon.js";
 import { _ as _19 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
-import { default as default12 } from "./p-table-td.js";
 import { _ as _20 } from "./chunks/p-tabs.js";
 import { _ as _21 } from "./chunks/p-textarea.js";
-import { default as default13 } from "./p-toggle.js";
+import { default as default12 } from "./p-toggle.js";
 import { squirrelTailwindConfig } from "./config.js";
 import { S } from "./chunks/p-btn.types.js";
 import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
@@ -79,7 +79,7 @@ const _hoisted_6$3 = {
   key: 1,
   class: "flex flex-col items-center"
 };
-const _hoisted_7 = { class: "mt-2 text-p-purple-60" };
+const _hoisted_7$1 = { class: "mt-2 text-p-purple-60" };
 const _hoisted_8 = ["accept", "multiple", "disabled"];
 const _hoisted_9 = { class: "max-h-48 overflow-y-auto overflow-x-hidden" };
 const _hoisted_10 = ["title"];
@@ -270,7 +270,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 width: "32",
                 class: "text-primary"
               }),
-              createElementVNode("div", _hoisted_7, "Drop " + toDisplayString(fileWord.value), 1)
+              createElementVNode("div", _hoisted_7$1, "Drop " + toDisplayString(fileWord.value), 1)
             ])),
             createElementVNode("input", {
               ref_key: "fileInputRef",
@@ -668,7 +668,8 @@ const _hoisted_4$1 = {
   class: "min-w-[80px] bg-gradient-to-r from-white via-p-gray-10 to-p-gray-10"
 };
 const _hoisted_5$1 = { key: 0 };
-const _hoisted_6$1 = { key: 1 };
+const _hoisted_6$1 = { class: "py-2" };
+const _hoisted_7 = { key: 1 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{ name: "PTable" },
   __name: "p-table",
@@ -682,7 +683,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     virtualizer: { default: () => ({
       paddingTop: 0,
       paddingBottom: 0
-    }) }
+    }) },
+    data: { default: void 0 }
   },
   emits: ["scroll", "click-filter-icon", "col-resize"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -865,8 +867,32 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ height: `${_ctx.virtualizer.paddingTop}px` })
               }, null, 4)
             ])) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "default", {}, void 0, true),
-            _ctx.virtualizer.paddingBottom > 0 ? (openBlock(), createElementBlock("tr", _hoisted_6$1, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(props.data, (rowData, rowIndex) => {
+                return openBlock(), createElementBlock("tr", {
+                  key: `row-${rowIndex}`
+                }, [
+                  renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, { rowData, rowIndex }), () => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(props.cols, (col, colIndex) => {
+                      return openBlock(), createBlock(PTableTd, {
+                        key: `cell-${rowIndex}-${colIndex}`,
+                        "col-index": colIndex
+                      }, {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "cell", mergeProps({ ref_for: true }, { col, colIndex, rowData, rowIndex, cellData: rowData[col.name] }), () => [
+                            renderSlot(_ctx.$slots, `cell-${unref(kebabCase)(col.name)}`, mergeProps({ ref_for: true }, { col, rowData, rowIndex, cellData: rowData[col.name] }), () => [
+                              createElementVNode("div", _hoisted_6$1, toDisplayString(rowData[col.name]), 1)
+                            ], true)
+                          ], true)
+                        ]),
+                        _: 2
+                      }, 1032, ["col-index"]);
+                    }), 128))
+                  ], true)
+                ]);
+              }), 128))
+            ], true),
+            _ctx.virtualizer.paddingBottom > 0 ? (openBlock(), createElementBlock("tr", _hoisted_7, [
               createElementVNode("td", {
                 style: normalizeStyle({ height: `${_ctx.virtualizer.paddingBottom}px` })
               }, null, 4)
@@ -877,7 +903,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8560a8de"]]);
+const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2a6e864b"]]);
 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";
@@ -996,10 +1022,10 @@ export {
   PTableHeaderCell,
   _19 as PTableLoader,
   _sfc_main as PTableSort,
-  default12 as PTableTd,
+  PTableTd,
   _20 as PTabs,
   _21 as PTextarea,
-  default13 as PToggle,
+  default12 as PToggle,
   P_ICON_ALIASES,
   S as SIZES,
   SORTING_TYPES,

package/dist/es/p-table-td.js

@@ -81,7 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pTableTd = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c9978e26"]]);
+const PTableTd = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c9978e26"]]);
 export {
-  pTableTd as default
+  PTableTd as default
 };

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

@@ -1,100 +1,59 @@
 import { type TableCol } from './p-table.types';
-import PTableHeaderCell from '../p-table-header-cell/p-table-header-cell.vue';
-import { kebabCase } from 'lodash-es';
-type Props = {
-    cols: TableCol[];
-    colsResizable?: boolean;
-    isFirstColFixed?: boolean;
-    isLastColFixed?: boolean;
-    lockScroll?: boolean;
-    subheader?: boolean;
-    virtualizer?: {
-        paddingTop: number;
-        paddingBottom: number;
+declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onScroll?: ((val: Event) => any) | undefined;
+        readonly "onCol-resize"?: ((colIndex: number, width: number) => any) | undefined;
+        readonly "onClick-filter-icon"?: ((val: Event, col: any) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onScroll" | "onClick-filter-icon" | "onCol-resize"> & {
+        cols: TableCol[];
+        colsResizable?: boolean;
+        isFirstColFixed?: boolean;
+        isLastColFixed?: boolean;
+        lockScroll?: boolean;
+        subheader?: boolean;
+        virtualizer?: {
+            paddingTop: number;
+            paddingBottom: number;
+        };
+        data?: T[];
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        tbodyElement: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    }>): void;
+    attrs: any;
+    slots: {
+        [x: `prepend-header-cell-${string}`]: ((props: {
+            col: TableCol;
+        }) => any) | undefined;
+        [x: `subheader-cell-${string}`]: ((props: {}) => any) | undefined;
+        [x: `cell-${string}`]: ((props: {
+            col: TableCol;
+            rowData: T;
+            rowIndex: number;
+            cellData: unknown;
+        }) => any) | undefined;
+        default?: ((props: {}) => any) | undefined;
+        row?: ((props: {
+            rowData: T;
+            rowIndex: number;
+        }) => any) | undefined;
+        cell?: ((props: {
+            col: TableCol;
+            colIndex: number;
+            rowData: T;
+            rowIndex: number;
+            cellData: unknown;
+        }) => any) | undefined;
     };
-};
-declare const scrollWrapper: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-declare const isColResizing: import("vue").Ref<boolean, boolean>, colResizeHandleLeft: import("vue").Ref<string, string>, colResize: (e: MouseEvent) => void, colResizeStart: (e: MouseEvent, i: number) => void, colResizeFitToData: (colIndex: number) => void;
-declare const tbodyElement: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-declare const updateThsRefs: (el: unknown, index: number) => void;
-declare const thDivClasses: (i: number) => string[];
-declare const thSubheaderClasses: (i: number) => string[];
-declare const bgColorStyle: (col: TableCol) => {
-    backgroundColor: string;
-} | {
-    backgroundColor?: undefined;
-};
-declare const headerCellTextColor: (col: TableCol) => string;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_2: `prepend-header-cell-${string}`, __VLS_3: {
-    col: TableCol;
-}, __VLS_13: `subheader-cell-${string}`, __VLS_14: {}, __VLS_16: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
-} & {
-    [K in NonNullable<typeof __VLS_13>]?: (props: typeof __VLS_14) => any;
-} & {
-    default?: (props: typeof __VLS_16) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<Props, {
-    PTableHeaderCell: typeof PTableHeaderCell;
-    kebabCase: typeof kebabCase;
-    scrollWrapper: typeof scrollWrapper;
-    isColResizing: typeof isColResizing;
-    colResizeHandleLeft: typeof colResizeHandleLeft;
-    colResize: typeof colResize;
-    colResizeStart: typeof colResizeStart;
-    colResizeFitToData: typeof colResizeFitToData;
-    tbodyElement: typeof tbodyElement;
-    updateThsRefs: typeof updateThsRefs;
-    thDivClasses: typeof thDivClasses;
-    thSubheaderClasses: typeof thSubheaderClasses;
-    bgColorStyle: typeof bgColorStyle;
-    headerCellTextColor: typeof headerCellTextColor;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    scroll: (val: Event) => any;
-    "col-resize": (colIndex: number, width: number) => any;
-    "click-filter-icon": (val: Event, col: any) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onScroll?: ((val: Event) => any) | undefined;
-    "onCol-resize"?: ((colIndex: number, width: number) => any) | undefined;
-    "onClick-filter-icon"?: ((val: Event, col: any) => any) | undefined;
-}>, {
-    isFirstColFixed: boolean;
-    isLastColFixed: boolean;
-    colsResizable: boolean;
-    lockScroll: boolean;
-    subheader: boolean;
-    virtualizer: {
-        paddingTop: number;
-        paddingBottom: number;
-    };
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<Props, {
-    tbodyElement: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    scroll: (val: Event) => any;
-    "col-resize": (colIndex: number, width: number) => any;
-    "click-filter-icon": (val: Event, col: any) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onScroll?: ((val: Event) => any) | undefined;
-    "onCol-resize"?: ((colIndex: number, width: number) => any) | undefined;
-    "onClick-filter-icon"?: ((val: Event, col: any) => any) | undefined;
-}>, {
-    isFirstColFixed: boolean;
-    isLastColFixed: boolean;
-    colsResizable: boolean;
-    lockScroll: boolean;
-    subheader: boolean;
-    virtualizer: {
-        paddingTop: number;
-        paddingBottom: number;
-    };
-}, {}, {}, {}, 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;
+    emit: {
+        (e: "scroll", val: Event): void;
+        (e: "click-filter-icon", val: Event, col: any): void;
+        (e: "col-resize", colIndex: number, width: number): void;
     };
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/squirrel.css

@@ -1128,29 +1128,29 @@ 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-8560a8de] {
+/*# sourceMappingURL=squirrel.css.map */.p-table[data-v-2a6e864b] {
   color: rgb(var(--color-night));
   height: 1px;
 }
-.p-table th[data-v-8560a8de] {
+.p-table th[data-v-2a6e864b] {
   position: sticky;
   top: 0px;
   z-index: 20;
   padding: 0px;
 }
-.p-table.first-col-fixed th[data-v-8560a8de]:first-child {
+.p-table.first-col-fixed th[data-v-2a6e864b]:first-child {
   left: 0px;
   z-index: 30;
 }
-.p-table.first-col-fixed th:first-child .th-shadow[data-v-8560a8de] {
+.p-table.first-col-fixed th:first-child .th-shadow[data-v-2a6e864b] {
   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-8560a8de]:last-child {
+.p-table.last-col-fixed th[data-v-2a6e864b]:last-child {
   right: 0px;
   z-index: 30;
 }
-.p-table.last-col-fixed th:last-child .th-shadow[data-v-8560a8de] {
+.p-table.last-col-fixed th:last-child .th-shadow[data-v-2a6e864b] {
   box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px 0px 0px -12px);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "7.1.5",
+  "version": "7.2.0",
   "packageManager": "pnpm@9.15.9",
   "type": "module",
   "scripts": {

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

@@ -47,7 +47,181 @@ const columns = [
   },
 ];
 
+const data = [
+  {
+    'First column': 'First column row 1 data',
+    'Second column': 'Second column row 1 data',
+    'Third column': 'Third column row 1 data',
+  },
+  {
+    'First column': 'First column row 2 data',
+    'Second column': 'Second column row 2 data',
+    'Third column': 'Third column row 2 data',
+  },
+];
+
 describe('PTable.vue', () => {
+  it('renders correctly when data and columns are provided', async () => {
+    const cols = cloneDeep(columns);
+
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, data },
+
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+          PTableTd: { template: `<td><slot /></td>` },
+        },
+      },
+    });
+
+    expect(wrapper.find('table.p-table').exists()).toBe(true);
+
+    cols.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      const headerCell = th.find('div.header-cell-stub');
+      const showFilterIcon = col.filterable || col.sortable;
+
+      expect(th.classes()).toContain('th-class');
+      expect(th.element.style.width).toBe(col.style.width);
+
+      expect(headerCell.text()).toBe(col.title);
+      expect(headerCell.classes()).toContain('header-cell-class');
+      expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
+      expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
+
+      if (!col.borderColor) {
+        ['border-b', 'border-p-gray-30'].forEach((className) => {
+          expect(containerDiv.classes()).toContain(className);
+        });
+      }
+    });
+
+    data.forEach((row, i) => {
+      const tr = wrapper.find(`tbody tr:nth-child(${i + 1})`);
+      const tds = tr.findAll('td');
+
+      expect(tds.length).toBe(cols.length);
+
+      cols.forEach((col, j) => {
+        const innerDiv = tds[j].find('div');
+        expect(innerDiv.text()).toBe(row[col.name]);
+        expect(innerDiv.classes()).toContain('py-2');
+      });
+    });
+  });
+
+  it('renders correctly when data and columns are provided with cell slot specified', async () => {
+    const cols = cloneDeep(columns);
+
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, data },
+      slots: {
+        cell: `<template #cell="{ cellData, col }"><div class="py-5">({{ cellData }})</div></template>`,
+      },
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+          PTableTd: { template: `<td><slot /></td>` },
+        },
+      },
+    });
+
+    expect(wrapper.find('table.p-table').exists()).toBe(true);
+
+    cols.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      const headerCell = th.find('div.header-cell-stub');
+      const showFilterIcon = col.filterable || col.sortable;
+
+      expect(th.classes()).toContain('th-class');
+      expect(th.element.style.width).toBe(col.style.width);
+
+      expect(headerCell.text()).toBe(col.title);
+      expect(headerCell.classes()).toContain('header-cell-class');
+      expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
+      expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
+
+      if (!col.borderColor) {
+        ['border-b', 'border-p-gray-30'].forEach((className) => {
+          expect(containerDiv.classes()).toContain(className);
+        });
+      }
+    });
+
+    data.forEach((row, i) => {
+      const tr = wrapper.find(`tbody tr:nth-child(${i + 1})`);
+      const tds = tr.findAll('td');
+
+      expect(tds.length).toBe(cols.length);
+
+      cols.forEach((col, j) => {
+        const innerDiv = tds[j].find('div');
+        expect(innerDiv.text()).toBe('(' + row[col.name] + ')');
+        expect(innerDiv.classes()).toContain('py-5');
+      });
+    });
+  });
+
+  it('renders correctly when data and columns are provided with certain cell slot specified', async () => {
+    const cols = cloneDeep(columns);
+
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, data },
+      slots: {
+        'cell-third-column': `<div>Constant Cell Content</div>`,
+      },
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+          PTableTd: { template: `<td><slot /></td>` },
+        },
+      },
+    });
+
+    expect(wrapper.find('table.p-table').exists()).toBe(true);
+
+    cols.forEach((col) => {
+      const th = wrapper.find(`th[data-col-id="${col.id}"]`);
+      const containerDiv = th.find('div.relative');
+      const headerCell = th.find('div.header-cell-stub');
+      const showFilterIcon = col.filterable || col.sortable;
+
+      expect(th.classes()).toContain('th-class');
+      expect(th.element.style.width).toBe(col.style.width);
+
+      expect(headerCell.text()).toBe(col.title);
+      expect(headerCell.classes()).toContain('header-cell-class');
+      expect(headerCell.attributes()['filter-active']).toBe(col.filterActive.toString());
+      expect(headerCell.attributes()['show-filter-icon']).toBe(showFilterIcon.toString());
+
+      if (!col.borderColor) {
+        ['border-b', 'border-p-gray-30'].forEach((className) => {
+          expect(containerDiv.classes()).toContain(className);
+        });
+      }
+    });
+
+    data.forEach((row, i) => {
+      const tr = wrapper.find(`tbody tr:nth-child(${i + 1})`);
+      const tds = tr.findAll('td');
+
+      expect(tds.length).toBe(cols.length);
+
+      cols.forEach((col, j) => {
+        const innerDiv = tds[j].find('div');
+        if (col.name === 'Third column') {
+          expect(innerDiv.text()).toBe('Constant Cell Content');
+        } else {
+          expect(innerDiv.text()).toBe(row[col.name]);
+          expect(innerDiv.classes()).toContain('py-2');
+        }
+      });
+    });
+  });
+
   it('renders correctly based on column attributes', async () => {
     const cols = cloneDeep(columns);
     const wrapper = createWrapperFor(PTable, {

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

@@ -96,6 +96,144 @@ export default {
 };
 
 export const Default = {
+  render: (args) => ({
+    components: { PTable },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PTable v-bind="args"/>
+    `,
+  }),
+  args: {
+    cols: cloneDeep(columns),
+    data: rows(),
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PTable :cols="cols" :data="data" />
+        `,
+      },
+    },
+  },
+};
+
+export const OverridingCellSlot = {
+  render: (args) => ({
+    components: { PTable },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PTable v-bind="args">
+        <template #cell="{ cellData, colIndex }">
+          <div v-if="colIndex%2===0" style="color: green;">{{ cellData }}</div>
+          <div v-else>{{ cellData }}</div>
+        </template>
+      </PTable>
+    `,
+  }),
+  args: {
+    cols: cloneDeep(columns),
+    data: rows(),
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PTable :cols="cols" :data="data">
+  <template #cell="{ cellData, colIndex }">
+    <div v-if="colIndex % 2 === 0" style="color: green;">{{ cellData }}</div>
+    <div v-else>{{ cellData }}</div>
+  </template>
+</PTable>
+        `,
+      },
+    },
+  },
+};
+
+export const OverridingCertainCellSlot = {
+  render: (args) => ({
+    components: { PTable },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PTable v-bind="args">
+        <template #cell-fifth-column="{ cellData }">
+          <div style="color: red;">{{ cellData }}</div>
+        </template>
+      </PTable>
+    `,
+  }),
+  args: {
+    cols: cloneDeep(columns),
+    data: rows(),
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PTable :cols="cols" :data="data">
+  <template #cell-fifth-column="{ cellData }">
+    <div style="color: red;">{{ cellData }}</div>
+  </template>
+</PTable>
+        `,
+      },
+    },
+  },
+};
+
+export const OverridingRowSlot = {
+  render: (args) => ({
+    components: { PTable, PTableTd },
+    setup() {
+      return { args };
+    },
+    template: `
+      <PTable v-bind="args">
+        <template #row="{ rowData }">
+            <PTableTd
+            v-for="(col, i) in args.cols"
+            :key="col.id"
+            :col-index="i"
+          >
+            {{ rowData[col.name] }}
+          </PTableTd>
+        </template>
+      </PTable>
+    `,
+  }),
+  args: {
+    cols: cloneDeep(columns),
+    data: rows(),
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PTable :cols="cols" :data="data">
+  <template #row="{ rowData }">
+      <PTableTd
+      v-for="(col, i) in args.cols"
+      :key="col.id"
+      :col-index="i"
+    >
+      {{ rowData[col.name] }}
+    </PTableTd>
+  </template>
+</PTable>
+        `,
+      },
+    },
+  },
+};
+
+export const OverridingDefaultSlot = {
   render: (args) => ({
     components: { PTable, PTableTd },
     setup() {
@@ -104,7 +242,7 @@ export const Default = {
     template: `
       <PTable v-bind="args">
         <tr v-for="row in args.rows" class="group/row">
-          <PTableTd 
+          <PTableTd
             v-for="(col, i) in args.cols"
             :key="col.id"
             :col-index="i"
@@ -123,4 +261,26 @@ export const Default = {
     rows: rows(),
     selectedRows: [2],
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<PTable :cols="cols" :data="data">
+  <tr v-for="row in args.rows" class="group/row">
+    <PTableTd
+      v-for="(col, i) in args.cols"
+      :key="col.id"
+      :col-index="i"
+      :is-editable="col.editable"
+      :is-selected="args.selectedRows.includes(row.id)"
+      :class="{ 'td-editable': col.editable }"
+    >
+      {{ row[col.name] }}
+    </PTableTd>
+  </tr>
+</PTable>
+        `,
+      },
+    },
+  },
 };

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

@@ -69,7 +69,28 @@
         <tr v-if="virtualizer.paddingTop > 0">
           <td :style="{ height: `${virtualizer.paddingTop}px` }"></td>
         </tr>
-        <slot />
+        <slot>
+          <tr v-for="(rowData, rowIndex) in props.data" :key="`row-${rowIndex}`">
+            <slot name="row" v-bind="{ rowData, rowIndex }">
+              <PTableTd
+                v-for="(col, colIndex) in props.cols"
+                :key="`cell-${rowIndex}-${colIndex}`"
+                :col-index="colIndex"
+              >
+                <slot name="cell" v-bind="{ col, colIndex, rowData, rowIndex, cellData: rowData[col.name] }">
+                  <slot
+                    :name="`cell-${kebabCase(col.name)}`"
+                    v-bind="{ col, rowData, rowIndex, cellData: rowData[col.name] }"
+                  >
+                    <div class="py-2">
+                      {{ rowData[col.name] }}
+                    </div>
+                  </slot>
+                </slot>
+              </PTableTd>
+            </slot>
+          </tr>
+        </slot>
         <tr v-if="virtualizer.paddingBottom > 0">
           <td :style="{ height: `${virtualizer.paddingBottom}px` }"></td>
         </tr>
@@ -78,7 +99,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Record<string, unknown>">
 import {
   colsInjectionKey,
   isColsResizableInjectionKey,
@@ -88,6 +109,7 @@ import {
 } from '@squirrel/components/p-table/p-table.types';
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
+import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import { kebabCase } from 'lodash-es';
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 
@@ -102,6 +124,7 @@ type Props = {
     paddingTop: number;
     paddingBottom: number;
   };
+  data?: T[];
 };
 
 defineOptions({ name: 'PTable' });
@@ -124,6 +147,7 @@ const props = withDefaults(defineProps<Props>(), {
     paddingTop: 0,
     paddingBottom: 0,
   }),
+  data: undefined,
 });
 
 // Provides