@iyulab/data-components

데이터 표시 및 입력을 위한 웹 컴포넌트 라이브러리.

Live Demo

• USimpleSheet — 엑셀 호환 스프레드시트 입력 컴포넌트 (Lit, compute 자동 계산 지원)
• UDataView — Grid / List / Table 뷰 전환 컴포넌트 (Lit)
• UDataGrid — OData 기반 서버 사이드 데이터 그리드 (React + DevExtreme)

Installation

npm install @iyulab/data-components

Quick Start

USimpleSheet

<u-simple-sheet
  style="height: 300px;"
  .rows=${20}
  .cols=${8}
  @change=${(e) => console.log(e.detail.data)}
></u-simple-sheet>

컬럼 정의 + 초기 데이터:

<u-simple-sheet
  style="height: 400px;"
  .columns=${[
    { key: 'name',  label: '이름',   width: 150 },
    { key: 'email', label: '이메일', width: 220 },
  ]}
  .data=${[
    ['홍길동', '[email protected]'],
    ['김철수', '[email protected]'],
  ]}
  @change=${(e) => console.log(e.target.getDataAsObjects())}
></u-simple-sheet>

자동 계산 열 (compute):

<u-simple-sheet
  .columns=${[
    { key: 'item',  label: '품목', width: 150 },
    { key: 'qty',   label: '수량', width: 80 },
    { key: 'price', label: '단가', width: 100 },
    { key: 'total', label: '합계', width: 100,
      compute: (r, data) => {
        const qty = Number(data[r][1]) || 0;
        const price = Number(data[r][2]) || 0;
        return String(qty * price);
      }
    },
  ]}
></u-simple-sheet>

UDataView

<u-data-view
  .items=${myData}
  mode="grid"
  @select=${(e) => console.log(e.detail)}
></u-data-view>

UDataGrid (React)

import { UDataGrid } from '@iyulab/data-components';

<UDataGrid
  dataSourceUrl="https://api.example.com/odata/products"
  keyField="id"
  columns={[
    { dataField: 'name',  caption: '상품명' },
    { dataField: 'price', caption: '가격', dataType: 'number' },
  ]}
/>

Documentation

• USimpleSheet
• UDataView
• UDataGrid

Theming

@iyulab/components의 테마 시스템을 사용합니다. 라이트/다크 모드 자동 지원.

import { Theme } from '@iyulab/components';

Theme.init({ default: 'system' });
Theme.set('dark'); // 'light' | 'dark' | 'system'

License

MIT