@tipp/ui 1.4.7 → 1.4.9

package/dist/molecules/expand-table/row.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecules/expand-table/row.tsx","../../../src/atoms/collapse.tsx"],"sourcesContent":["import {\n  type Row as TanstackRow,\n  type RowData,\n  flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Collapse } from '../../atoms';\nimport type { CellAlign } from '../../utils/get-cell-align';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n  row: TanstackRow<Datum>;\n  ExpandComp?: ExpandComp<Datum>;\n  onRowClick?: OnRowClick<Datum>;\n  gridColTemp: string;\n  getRowStyle?: (data: Datum) => React.CSSProperties;\n  defaultAlign: CellAlign;\n}\n\nexport function Row<Datum extends RowData>(\n  props: RowProps<Datum>\n): React.ReactNode {\n  const { row, ExpandComp, gridColTemp, getRowStyle } = props;\n  const [open, setOpen] = useState(false);\n\n  const onClickRow = useCallback(() => {\n    props.onRowClick?.(row.original);\n    setOpen((prev) => !prev);\n  }, [props, row.original]);\n\n  const rowClassName = useMemo(() => {\n    const baseCls = ['tr-wrapper'];\n    if (ExpandComp) {\n      baseCls.push('expandable');\n    }\n    if (props.onRowClick) {\n      baseCls.push('clickable');\n    }\n    return baseCls.join(' ');\n  }, [ExpandComp, props.onRowClick]);\n\n  return (\n    <div className={rowClassName} key={`tr-wrapper_${row.id}`}>\n      <button\n        className=\"tr\"\n        key={`tr_${row.id}`}\n        onClick={onClickRow}\n        style={{\n          gridTemplateColumns: gridColTemp,\n          ...(getRowStyle?.(row.original) || {}),\n        }}\n        type=\"button\"\n      >\n        {row.getVisibleCells().map((cell) => {\n          const autoSize = cell.column.columnDef.meta?.autoSize;\n          const justifyContent =\n            cell.column.columnDef.meta?.align || props.defaultAlign;\n\n          return (\n            <div\n              className=\"td\"\n              key={cell.id}\n              style={{\n                // width: autoSize ? undefined : cell.column.getSize(),\n                flexGrow: autoSize ? 1 : undefined,\n                justifyContent,\n              }}\n            >\n              {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              {cell.column.columnDef.meta?.OpenBtn ? (\n                <cell.column.columnDef.meta.OpenBtn\n                  data={row.original}\n                  open={open}\n                  setIsOpen={setOpen}\n                />\n              ) : null}\n            </div>\n          );\n        })}\n      </button>\n      {ExpandComp ? (\n        <Collapse open={open}>\n          <div className=\"expand-comp-wrapper\">\n            <ExpandComp row={row} />\n          </div>\n        </Collapse>\n      ) : null}\n    </div>\n  );\n}\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n  closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n  const { children, closedHeight = '0' } = props;\n  const [open, setOpen] = useState(() => {\n    return props.open || props.defaultOpen || false;\n  });\n\n  useEffect(() => {\n    if (props.open === undefined) return;\n    setOpen(props.open);\n  }, [props.open]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    ref.current.style.maxHeight = open\n      ? `${ref.current.scrollHeight}px`\n      : closedHeight;\n  }, [closedHeight, open]);\n\n  return (\n    <div className=\"tipp-collapse\" ref={ref}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIO;AACP,IAAAA,gBAAsD;;;ACLtD,mBAAmD;AA+B/C;AArBG,SAAS,SAAS,OAAuC;AAC9D,QAAM,EAAE,UAAU,eAAe,IAAI,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM;AACrC,WAAO,MAAM,QAAQ,MAAM,eAAe;AAAA,EAC5C,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AAAW;AAC9B,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,QAAI,QAAQ,MAAM,YAAY,OAC1B,GAAG,IAAI,QAAQ,YAAY,OAC3B;AAAA,EACN,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,4CAAC,SAAI,WAAU,iBAAgB,KAC5B,UACH;AAEJ;;;AD0BY,IAAAC,sBAAA;AAxCL,SAAS,IACd,OACiB;AACjB,QAAM,EAAE,KAAK,YAAY,aAAa,YAAY,IAAI;AACtD,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AAEtC,QAAM,iBAAa,2BAAY,MAAM;AA3BvC;AA4BI,gBAAM,eAAN,+BAAmB,IAAI;AACvB,YAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC;AAExB,QAAM,mBAAe,uBAAQ,MAAM;AACjC,UAAM,UAAU,CAAC,YAAY;AAC7B,QAAI,YAAY;AACd,cAAQ,KAAK,YAAY;AAAA,IAC3B;AACA,QAAI,MAAM,YAAY;AACpB,cAAQ,KAAK,WAAW;AAAA,IAC1B;AACA,WAAO,QAAQ,KAAK,GAAG;AAAA,EACzB,GAAG,CAAC,YAAY,MAAM,UAAU,CAAC;AAEjC,SACE,8CAAC,SAAI,WAAW,cACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QAEV,SAAS;AAAA,QACT,OAAO;AAAA,UACL,qBAAqB;AAAA,YACjB,2CAAc,IAAI,cAAa,CAAC;AAAA,QAEtC,MAAK;AAAA,QAEJ,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AAvD7C;AAwDU,gBAAM,YAAW,UAAK,OAAO,UAAU,SAAtB,mBAA4B;AAC7C,gBAAM,mBACJ,UAAK,OAAO,UAAU,SAAtB,mBAA4B,UAAS,MAAM;AAE7C,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cAEV,OAAO;AAAA;AAAA,gBAEL,UAAU,WAAW,IAAI;AAAA,gBACzB;AAAA,cACF;AAAA,cAEC;AAAA,mDAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA,kBACxD,UAAK,OAAO,UAAU,SAAtB,mBAA4B,WAC3B;AAAA,kBAAC,KAAK,OAAO,UAAU,KAAK;AAAA,kBAA3B;AAAA,oBACC,MAAM,IAAI;AAAA,oBACV;AAAA,oBACA,WAAW;AAAA;AAAA,gBACb,IACE;AAAA;AAAA;AAAA,YAdC,KAAK;AAAA,UAeZ;AAAA,QAEJ,CAAC;AAAA;AAAA,MAjCI,MAAM,IAAI,EAAE;AAAA,IAkCnB;AAAA,IACC,aACC,6CAAC,YAAS,MACR,uDAAC,SAAI,WAAU,uBACb,uDAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA,OA5C6B,cAAc,IAAI,EAAE,EA6CvD;AAEJ;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/molecules/expand-table/row.tsx","../../../src/atoms/collapse.tsx"],"sourcesContent":["import {\n  type Row as TanstackRow,\n  type RowData,\n  flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Collapse } from '../../atoms';\nimport type { CellAlign } from '../../utils/get-cell-align';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n  row: TanstackRow<Datum>;\n  ExpandComp?: ExpandComp<Datum>;\n  onRowClick?: OnRowClick<Datum>;\n  gridTemplateColumns: string;\n  getRowStyle?: (data: Datum) => React.CSSProperties;\n  getCellStyle?: (data: Datum) => React.CSSProperties;\n  defaultAlign: CellAlign;\n}\n\nexport function Row<Datum extends RowData>(\n  props: RowProps<Datum>\n): React.ReactNode {\n  const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } =\n    props;\n  const [open, setOpen] = useState(false);\n\n  const onClickRow = useCallback(() => {\n    props.onRowClick?.(row.original);\n    setOpen((prev) => !prev);\n  }, [props, row.original]);\n\n  const rowClassName = useMemo(() => {\n    const baseCls = ['tr-wrapper'];\n    if (ExpandComp) {\n      baseCls.push('expandable');\n    }\n    if (props.onRowClick) {\n      baseCls.push('clickable');\n    }\n    return baseCls.join(' ');\n  }, [ExpandComp, props.onRowClick]);\n\n  return (\n    <div className={rowClassName} key={`tr-wrapper_${row.id}`}>\n      <button\n        className=\"tr\"\n        key={`tr_${row.id}`}\n        onClick={onClickRow}\n        style={{\n          gridTemplateColumns,\n          ...(getRowStyle?.(row.original) || {}),\n        }}\n        type=\"button\"\n      >\n        {row.getVisibleCells().map((cell) => {\n          const autoSize = cell.column.columnDef.meta?.autoSize;\n          const justifyContent =\n            cell.column.columnDef.meta?.align || props.defaultAlign;\n\n          return (\n            <div\n              className=\"td\"\n              key={cell.id}\n              style={{\n                // width: autoSize ? undefined : cell.column.getSize(),\n                flexGrow: autoSize ? 1 : undefined,\n                justifyContent,\n                ...(getCellStyle?.(row.original) || {}),\n              }}\n            >\n              {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              {cell.column.columnDef.meta?.OpenBtn ? (\n                <cell.column.columnDef.meta.OpenBtn\n                  data={row.original}\n                  open={open}\n                  setIsOpen={setOpen}\n                />\n              ) : null}\n            </div>\n          );\n        })}\n      </button>\n      {ExpandComp ? (\n        <Collapse open={open}>\n          <div className=\"expand-comp-wrapper\">\n            <ExpandComp row={row} />\n          </div>\n        </Collapse>\n      ) : null}\n    </div>\n  );\n}\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n  children: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n  closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n  const { children, closedHeight = '0' } = props;\n  const [open, setOpen] = useState(() => {\n    return props.open || props.defaultOpen || false;\n  });\n\n  useEffect(() => {\n    if (props.open === undefined) return;\n    setOpen(props.open);\n  }, [props.open]);\n\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    ref.current.style.maxHeight = open\n      ? `${ref.current.scrollHeight}px`\n      : closedHeight;\n  }, [closedHeight, open]);\n\n  return (\n    <div className=\"tipp-collapse\" ref={ref}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIO;AACP,IAAAA,gBAAsD;;;ACLtD,mBAAmD;AA+B/C;AArBG,SAAS,SAAS,OAAuC;AAC9D,QAAM,EAAE,UAAU,eAAe,IAAI,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM;AACrC,WAAO,MAAM,QAAQ,MAAM,eAAe;AAAA,EAC5C,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AAAW;AAC9B,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,QAAI,QAAQ,MAAM,YAAY,OAC1B,GAAG,IAAI,QAAQ,YAAY,OAC3B;AAAA,EACN,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,4CAAC,SAAI,WAAU,iBAAgB,KAC5B,UACH;AAEJ;;;AD4BY,IAAAC,sBAAA;AAzCL,SAAS,IACd,OACiB;AACjB,QAAM,EAAE,KAAK,YAAY,qBAAqB,aAAa,aAAa,IACtE;AACF,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AAEtC,QAAM,iBAAa,2BAAY,MAAM;AA7BvC;AA8BI,gBAAM,eAAN,+BAAmB,IAAI;AACvB,YAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC;AAExB,QAAM,mBAAe,uBAAQ,MAAM;AACjC,UAAM,UAAU,CAAC,YAAY;AAC7B,QAAI,YAAY;AACd,cAAQ,KAAK,YAAY;AAAA,IAC3B;AACA,QAAI,MAAM,YAAY;AACpB,cAAQ,KAAK,WAAW;AAAA,IAC1B;AACA,WAAO,QAAQ,KAAK,GAAG;AAAA,EACzB,GAAG,CAAC,YAAY,MAAM,UAAU,CAAC;AAEjC,SACE,8CAAC,SAAI,WAAW,cACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QAEV,SAAS;AAAA,QACT,OAAO;AAAA,UACL;AAAA,YACI,2CAAc,IAAI,cAAa,CAAC;AAAA,QAEtC,MAAK;AAAA,QAEJ,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AAzD7C;AA0DU,gBAAM,YAAW,UAAK,OAAO,UAAU,SAAtB,mBAA4B;AAC7C,gBAAM,mBACJ,UAAK,OAAO,UAAU,SAAtB,mBAA4B,UAAS,MAAM;AAE7C,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cAEV,OAAO;AAAA;AAAA,gBAEL,UAAU,WAAW,IAAI;AAAA,gBACzB;AAAA,kBACI,6CAAe,IAAI,cAAa,CAAC;AAAA,cAGtC;AAAA,mDAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA,kBACxD,UAAK,OAAO,UAAU,SAAtB,mBAA4B,WAC3B;AAAA,kBAAC,KAAK,OAAO,UAAU,KAAK;AAAA,kBAA3B;AAAA,oBACC,MAAM,IAAI;AAAA,oBACV;AAAA,oBACA,WAAW;AAAA;AAAA,gBACb,IACE;AAAA;AAAA;AAAA,YAfC,KAAK;AAAA,UAgBZ;AAAA,QAEJ,CAAC;AAAA;AAAA,MAlCI,MAAM,IAAI,EAAE;AAAA,IAmCnB;AAAA,IACC,aACC,6CAAC,YAAS,MACR,uDAAC,SAAI,WAAU,uBACb,uDAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA,OA7C6B,cAAc,IAAI,EAAE,EA8CvD;AAEJ;","names":["import_react","import_jsx_runtime"]}

package/dist/molecules/expand-table/row.d.cts

@@ -10,8 +10,9 @@ interface RowProps<Datum extends RowData> {
     row: Row$1<Datum>;
     ExpandComp?: ExpandComp<Datum>;
     onRowClick?: OnRowClick<Datum>;
-    gridColTemp: string;
+    gridTemplateColumns: string;
     getRowStyle?: (data: Datum) => react__default.CSSProperties;
+    getCellStyle?: (data: Datum) => react__default.CSSProperties;
     defaultAlign: CellAlign;
 }
 declare function Row<Datum extends RowData>(props: RowProps<Datum>): react__default.ReactNode;

package/dist/molecules/expand-table/row.d.ts

@@ -10,8 +10,9 @@ interface RowProps<Datum extends RowData> {
     row: Row$1<Datum>;
     ExpandComp?: ExpandComp<Datum>;
     onRowClick?: OnRowClick<Datum>;
-    gridColTemp: string;
+    gridTemplateColumns: string;
     getRowStyle?: (data: Datum) => react__default.CSSProperties;
+    getCellStyle?: (data: Datum) => react__default.CSSProperties;
     defaultAlign: CellAlign;
 }
 declare function Row<Datum extends RowData>(props: RowProps<Datum>): react__default.ReactNode;

package/dist/molecules/expand-table/row.js

@@ -1,63 +1,63 @@
 import {
   Row
-} from "../../chunk-SOMDO7V4.js";
+} from "../../chunk-PCWEW2UL.js";
 import "../../chunk-76JGDATZ.js";
+import "../../chunk-ILRUXI2E.js";
+import "../../chunk-JPIZP2PZ.js";
+import "../../chunk-CYYWMYE7.js";
+import "../../chunk-3JRNKBMN.js";
+import "../../chunk-HYITAA4J.js";
+import "../../chunk-5H3YPCZK.js";
 import "../../chunk-FR2GDOU2.js";
 import "../../chunk-74DX4CU7.js";
 import "../../chunk-OYM4XCHQ.js";
 import "../../chunk-YJ7ZFOYL.js";
 import "../../chunk-5ZITU5L7.js";
-import "../../chunk-ILRUXI2E.js";
-import "../../chunk-JPIZP2PZ.js";
-import "../../chunk-CYYWMYE7.js";
+import "../../chunk-365QMK4D.js";
+import "../../chunk-YO3BQW6S.js";
+import "../../chunk-6IVCARWS.js";
 import "../../chunk-6DJOIRMF.js";
 import "../../chunk-FPD73OHW.js";
 import "../../chunk-ZKZDVS7G.js";
 import "../../chunk-MUNMDHRF.js";
 import "../../chunk-TVDKGMBI.js";
-import "../../chunk-3JRNKBMN.js";
-import "../../chunk-HYITAA4J.js";
-import "../../chunk-5H3YPCZK.js";
+import "../../chunk-O3T3TM3V.js";
 import "../../chunk-XQOL7UBI.js";
 import "../../chunk-TULWX7D6.js";
 import "../../chunk-SIM6HKVI.js";
-import "../../chunk-5X3BCQPR.js";
+import "../../chunk-IM7DSIK2.js";
+import "../../chunk-O3DNDMV3.js";
 import "../../chunk-5AVBYDPB.js";
-import "../../chunk-365QMK4D.js";
-import "../../chunk-YO3BQW6S.js";
-import "../../chunk-6IVCARWS.js";
-import "../../chunk-DJN2IEY6.js";
+import "../../chunk-4WFMOFN2.js";
+import "../../chunk-WKFZ5MMN.js";
+import "../../chunk-ACVANQJ4.js";
+import "../../chunk-2DZ2Y3JI.js";
+import "../../chunk-QDZS4B6A.js";
+import "../../chunk-52MVZ6AN.js";
 import "../../chunk-25HMMI7R.js";
 import "../../chunk-2CVXGGI5.js";
 import "../../chunk-EGEQY3KT.js";
 import "../../chunk-HK224ADT.js";
-import "../../chunk-O3T3TM3V.js";
-import "../../chunk-O3DNDMV3.js";
+import "../../chunk-IQEEPHOY.js";
+import "../../chunk-LHCDPZ5E.js";
+import "../../chunk-OHMOP5PV.js";
 import "../../chunk-LZJR77Q2.js";
 import "../../chunk-Q37G2GS6.js";
 import "../../chunk-VTJZMOSP.js";
-import "../../chunk-6AJTMXLJ.js";
-import "../../chunk-3IZQ2PIQ.js";
-import "../../chunk-4WFMOFN2.js";
-import "../../chunk-WKFZ5MMN.js";
-import "../../chunk-ACVANQJ4.js";
-import "../../chunk-52MVZ6AN.js";
-import "../../chunk-2DZ2Y3JI.js";
+import "../../chunk-WM3XQMNK.js";
+import "../../chunk-3YBBMDHJ.js";
+import "../../chunk-3SSSCLJ5.js";
+import "../../chunk-EWD4AO5N.js";
+import "../../chunk-YGL6SWKN.js";
 import "../../chunk-4Y5BEXVN.js";
-import "../../chunk-P3YCIJUP.js";
+import "../../chunk-EIAK47TI.js";
 import "../../chunk-B6XJN6EC.js";
 import "../../chunk-UVKNLJDZ.js";
 import "../../chunk-MIMJ7LON.js";
-import "../../chunk-IQEEPHOY.js";
-import "../../chunk-LHCDPZ5E.js";
-import "../../chunk-OHMOP5PV.js";
 import "../../chunk-66C4U3BG.js";
 import "../../chunk-J242TTFH.js";
 import "../../chunk-EAXUQEO5.js";
 import "../../chunk-YJCCE5WP.js";
-import "../../chunk-3SSSCLJ5.js";
-import "../../chunk-EWD4AO5N.js";
-import "../../chunk-YGL6SWKN.js";
 import "../../chunk-N552FDTV.js";
 export {
   Row

package/dist/molecules/index.cjs

@@ -147,20 +147,40 @@ var import_themes4 = require("@radix-ui/themes");
 var import_themes5 = require("@radix-ui/themes");
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var convertSizeStr = (size) => {
+  switch (size) {
+    case "small":
+      return "1";
+    case "medium":
+      return "2";
+    case "large":
+      return "3";
+    default:
+      return "2";
+  }
+};
+var convertSizeResponse = (size) => {
+  if (typeof size === "string" || typeof size === "undefined") {
+    return convertSizeStr(size);
+  }
+  const radixSize = {};
+  let key = "initial";
+  for (key in radixSize) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+var convertSize = (size) => {
+  if (typeof size === "string") {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};
 var Button = (0, import_react3.forwardRef)(
   (props, ref) => {
     const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
     const radixSize = (0, import_react3.useMemo)(() => {
-      switch (size) {
-        case "small":
-          return "1";
-        case "medium":
-          return "2";
-        case "large":
-          return "3";
-        default:
-          return "2";
-      }
+      return convertSize(size);
     }, [size]);
     const mergedStyle = (0, import_react3.useMemo)(() => {
       const baseStyle = {
@@ -484,7 +504,7 @@ var import_react_table = require("@tanstack/react-table");
 var import_react9 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function Row(props) {
-  const { row, ExpandComp, gridColTemp, getRowStyle } = props;
+  const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } = props;
   const [open, setOpen] = (0, import_react9.useState)(false);
   const onClickRow = (0, import_react9.useCallback)(() => {
     var _a;
@@ -508,7 +528,7 @@ function Row(props) {
         className: "tr",
         onClick: onClickRow,
         style: __spreadValues({
-          gridTemplateColumns: gridColTemp
+          gridTemplateColumns
         }, (getRowStyle == null ? void 0 : getRowStyle(row.original)) || {}),
         type: "button",
         children: row.getVisibleCells().map((cell) => {
@@ -519,11 +539,11 @@ function Row(props) {
             "div",
             {
               className: "td",
-              style: {
+              style: __spreadValues({
                 // width: autoSize ? undefined : cell.column.getSize(),
                 flexGrow: autoSize ? 1 : void 0,
                 justifyContent
-              },
+              }, (getCellStyle == null ? void 0 : getCellStyle(row.original)) || {}),
               children: [
                 (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
                 ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -561,7 +581,8 @@ function ExpandTable(props) {
     pageIndex = 0,
     pageSize = 10,
     siblingCount = 2,
-    getRowStyle
+    getRowStyle,
+    getCellStyle
   } = props;
   const defaultAlign = "left";
   const [pagination, setPagination] = (0, import_react10.useState)({
@@ -582,7 +603,7 @@ function ExpandTable(props) {
     getPaginationRowModel: (0, import_react_table2.getPaginationRowModel)(),
     onPaginationChange: setPagination
   });
-  const gridColTemp = (0, import_react10.useMemo)(() => {
+  const gridTemplateColumns = (0, import_react10.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize)
@@ -629,7 +650,7 @@ function ExpandTable(props) {
       "div",
       {
         className: "tr",
-        style: { gridTemplateColumns: gridColTemp },
+        style: { gridTemplateColumns },
         children: headerGroup.headers.map((header) => {
           var _a;
           const sortable = header.column.getCanSort();
@@ -680,8 +701,9 @@ function ExpandTable(props) {
         {
           ExpandComp,
           defaultAlign,
+          getCellStyle,
           getRowStyle,
-          gridColTemp,
+          gridTemplateColumns,
           onRowClick,
           row
         },