@tapie-kr/inspire-react/dist/esm/components/molecules/DataTable/index.js

React Component Collection for INSPIRE

/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { colorVars } from '../../../lib/style/contract/color.css.js';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { Button } from '../../atoms/Button/index.js';
import { Typography } from '../../foundations/Typography/index.js';
import { HStack } from '../../miscellaneous/layout/HStack/index.js';
import { Table } from '../Table/index.js';
import { ButtonSize, ButtonVariant } from '../../atoms/Button/shared.js';
import { TypographyWeight } from '../../foundations/Typography/shared.js';

function DataTable(props){const shouldShowActions=props.actions&&props.actions.length>0;return jsxs(Table,{children:[jsxs(Table.Head,{children:[props.showIndex&&jsx(Table.Head.Cell,{width:40,children:"#"}),props.columns.map(c=>jsx(Table.Head.Cell,{width:c.width,isSortable:c.isSortable,children:c.label},c.key.toString())),shouldShowActions&&jsx(Table.Head.Cell,{width:100,children:"액션"})]}),jsx(Table.Body,{children:props.data.map((d,i)=>jsxs(Table.Body.Row,{children:[props.showIndex&&jsx(Table.Body.Cell,{children:jsx(Typography.Petite,{weight:TypographyWeight.MEDIUM,color:colorVars.content.muted,children:i+1})}),props.columns.map(c=>jsx(Table.Body.Cell,{children:c.cell?c.cell(d[c.key],i+1,d):jsx(Typography.Base,{weight:TypographyWeight.MEDIUM,children:String(d[c.key])})},c.key.toString())),shouldShowActions&&jsx(Table.Body.Cell,{children:jsx(HStack,{spacing:spacingVars.base,children:props.actions?.map((a,i)=>{const handleClick=()=>a.onClick(d,props.data,i);return jsx(Button.Icon,{variant:ButtonVariant.SECONDARY,size:ButtonSize.MEDIUM,icon:typeof a.icon==="function"?a.icon(d):a.icon,disabled:typeof a.disabled==="function"?a.disabled(d):a.disabled,color:colorVars.content.default,onClick:handleClick},i)})})})]},i))})]})}

export { DataTable };