@tipp/ui 0.1.12 → 0.1.13

package/dist/molecules/index.js

@@ -2,15 +2,17 @@ import "../chunk-WWCWPFEJ.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "../chunk-5IE43F4V.js";
-import "../chunk-ZE5G2S34.js";
+} from "../chunk-XDLE7F7F.js";
+import "../chunk-PBPRWY2V.js";
 import "../chunk-BSTJBBEX.js";
 import "../chunk-NDUKDKGB.js";
 import "../chunk-UKJ64ZOX.js";
 import "../chunk-IIBITN2G.js";
+import "../chunk-ILRUXI2E.js";
 import "../chunk-JPIZP2PZ.js";
 import "../chunk-ACVANQJ4.js";
 import "../chunk-5U2NU566.js";
+import "../chunk-355MU6BH.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
@@ -18,7 +20,7 @@ import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
-import "../chunk-ILRUXI2E.js";
+import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
@@ -26,14 +28,14 @@ import "../chunk-FPD73OHW.js";
 import "../chunk-ZKZDVS7G.js";
 import "../chunk-MUNMDHRF.js";
 import "../chunk-TVDKGMBI.js";
-import "../chunk-355MU6BH.js";
+import "../chunk-HLOY6BIP.js";
 import "../chunk-O3T3TM3V.js";
 import "../chunk-O3DNDMV3.js";
 import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-XQOZWYUA.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
+import "../chunk-OCJNQGHN.js";
 import "../chunk-Q37G2GS6.js";
 import "../chunk-VTJZMOSP.js";
 import "../chunk-P6B2PNYI.js";
@@ -41,7 +43,7 @@ import "../chunk-YTZSKMX3.js";
 import "../chunk-2DZ2Y3JI.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-HLOY6BIP.js";
+import "../chunk-4Y5BEXVN.js";
 import "../chunk-RET725VL.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-FYEASFUU.js";
@@ -49,13 +51,11 @@ import "../chunk-MIMJ7LON.js";
 import "../chunk-IQEEPHOY.js";
 import "../chunk-JEHDCZQU.js";
 import "../chunk-OHMOP5PV.js";
-import "../chunk-OCJNQGHN.js";
 import "../chunk-J242TTFH.js";
 import "../chunk-EAXUQEO5.js";
 import "../chunk-CZEGRZBK.js";
 import "../chunk-ALOPZ54P.js";
 import "../chunk-YGL6SWKN.js";
-import "../chunk-4Y5BEXVN.js";
 import "../chunk-N552FDTV.js";
 export {
   ExpandTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "type": "module",
   "exports": {

package/src/molecules/expand-table/index.tsx

@@ -7,7 +7,7 @@ import {
   getSortedRowModel,
   createColumnHelper,
 } from '@tanstack/react-table';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Flex, Typo } from '../../atoms';
 import { TriangleArrowDownIcon } from '../../icons/down';
 import { TriangleArrowUpIcon } from '../../icons/up';
@@ -47,24 +47,32 @@ export function ExpandTable<Datum extends RowData>(
     onSortingChange: setSorting,
   });
 
+  const gridColTemp = useMemo<string>(() => {
+    return columns
+      .map((col) => {
+        if (col.meta?.autoSize) return '1fr';
+        return `${col.size || 150}px`;
+      })
+      .join(' ');
+  }, [columns]);
+
   const rowModels = getRowModel();
 
   return (
     <div className="expand-table">
       <div className="thead">
         {getHeaderGroups().map((headerGroup) => (
-          <div className="tr" key={headerGroup.id}>
+          <div
+            className="tr"
+            key={headerGroup.id}
+            style={{ gridTemplateColumns: gridColTemp }}
+          >
             {headerGroup.headers.map((header) => {
               const sortable = header.column.getCanSort();
               const sortedState = header.column.getIsSorted();
+
               return (
-                <div
-                  className="th"
-                  key={header.id}
-                  style={{
-                    width: header.getSize(),
-                  }}
-                >
+                <div className="th" key={header.id}>
                   <button
                     onClick={header.column.getToggleSortingHandler()}
                     style={sortable ? { cursor: 'pointer' } : undefined}
@@ -110,7 +118,7 @@ export function ExpandTable<Datum extends RowData>(
           <div className="tr" key="expand_placeholder">
             <Flex align="center" justify="center">
               {placeholder || (
-                <Typo color="gray" mb="6" mt="6">
+                <Typo color="gray" mb="6" mt="6" variant="body">
                   데이터가 없습니다
                 </Typo>
               )}
@@ -123,6 +131,7 @@ export function ExpandTable<Datum extends RowData>(
           return (
             <Row
               ExpandComp={ExpandComp}
+              gridColTemp={gridColTemp}
               key={`row_${row.id}`}
               onRowClick={onRowClick}
               row={row}

package/src/molecules/expand-table/row.tsx

@@ -13,13 +13,15 @@ interface RowProps<Datum extends RowData> {
   row: TanstackRow<Datum>;
   ExpandComp?: ExpandComp<Datum>;
   onRowClick?: OnRowClick<Datum>;
+  gridColTemp: string;
 }
 
 export function Row<Datum extends RowData>(
   props: RowProps<Datum>
 ): React.ReactNode {
-  const { row, ExpandComp } = props;
+  const { row, ExpandComp, gridColTemp } = props;
   const [open, setOpen] = useState(false);
+
   const onClickRow = useCallback(() => {
     props.onRowClick?.(row.original);
     setOpen((prev) => !prev);
@@ -34,14 +36,20 @@ export function Row<Datum extends RowData>(
         className="tr"
         key={`tr_${row.id}`}
         onClick={onClickRow}
+        style={{ gridTemplateColumns: gridColTemp }}
         type="button"
       >
         {row.getVisibleCells().map((cell) => {
+          const autoSize = cell.column.columnDef.meta?.autoSize;
+
           return (
             <div
               className="td"
               key={cell.id}
-              style={{ width: cell.column.getSize() }}
+              style={{
+                minWidth: autoSize ? undefined : cell.column.getSize(),
+                flexGrow: autoSize ? 1 : undefined,
+              }}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
               {cell.column.columnDef.meta?.OpenBtn ? (