lumArc Grid (lum-grid)

Simple by Design, Profound by Nature

💫 Brand Philosophy

LumArc represents our core values:

• Clarity (명료함) - Finding essence in complexity
• Depth (깊이) - Simple surface, infinite possibilities within
• Grace (우아함) - Effortless perfection
• Innovation (혁신) - Quiet but certain change

"Like starlight in the night sky. From afar, it's just a tiny point, but in reality, it contains enormous energy. Everything LumArc creates is like that. Simple on the outside, but filled with countless thoughts and insights within. Making complex things complex is easy. But making complex things simple - that's real magic."

"가장 복잡한 문제에는 가장 단순한 해답이 숨어있다"

🚀 차세대 헤드리스 데이터 그리드 라이브러리

lumArc Grid는 고성능, 유연하고 프레임워크에 구애받지 않는 데이터 그리드 라이브러리입니다. React, (Vue, Vanilla JavaScript 예정)를 지원하며, 현대적인 웹 애플리케이션을 위한 강력한 테이블 솔루션을 제공합니다.

✨ 주요 특징

• 🎯 헤드리스 아키텍처: UI와 로직의 완전한 분리로 최대한의 커스터마이징 가능
• ⚡ 초고속 성능: 가상화 스크롤링으로 수만 개의 행도 부드럽게 처리
• 🧩 프레임워크 무관: React, Vue, Vanilla JS 어디든 사용 가능
• 🎨 완전한 스타일링 자유도: CSS-in-JS, Tailwind, styled-components 등 어떤 스타일링도 지원
• 🔧 TypeScript 우선: 타입 안전성과 뛰어난 개발자 경험
• 🌊 실시간 데이터: 서버사이드(작업중) 페이지네이션, 정렬, 필터링 지원

📦 설치

npm

npm install lumarc

pnpm

pnpm add lumarc

yarn

yarn add lumarc

🚀 빠른 시작

React에서 사용하기

import { useReactGrid } from 'lumarc/react'
import type { ColumnDef } from 'lumarc'

interface Person {
  id: number
  name: string
  age: number
  email: string
}

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: 'name',
    header: '이름',
    size: 200,
  },
  {
    accessorKey: 'age', 
    header: '나이',
    size: 100,
  },
  {
    accessorKey: 'email',
    header: '이메일',
    size: 300,
  },
]

const data: Person[] = [
  { id: 1, name: '김철수', age: 25, email: '[email protected]' },
  { id: 2, name: '이영희', age: 30, email: '[email protected]' },
  // ... more data
]

function DataGrid() {
  const grid = useReactGrid({
    columns,
    data,
    enableSorting: true,
    enableFiltering: true,
    enablePagination: true,
  })

  return (
    <div className="grid-container">
      <table>
        <thead>
          {grid.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder ? null : (
                    <div
                      {...{
                        className: header.column.getCanSort()
                          ? 'cursor-pointer select-none'
                          : '',
                        onClick: header.column.getToggleSortingHandler(),
                      }}
                    >
                      {header.renderHeader()}
                      {{
                        asc: ' 🔼',
                        desc: ' 🔽',
                      }[header.column.getIsSorted() as string] ?? null}
                    </div>
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {grid.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>
                  {cell.renderCell()}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

🎨 고급 기능

커스텀 셀 렌더러

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: 'avatar',
    header: '프로필',
    cell: ({ getValue }) => (
      <div className="flex items-center gap-2">
        <img 
          src={getValue() as string} 
          className="w-8 h-8 rounded-full"
          alt="프로필"
        />
      </div>
    ),
  },
  {
    accessorKey: 'status',
    header: '상태',
    cell: ({ getValue }) => {
      const status = getValue() as string
      return (
        <span className={`px-2 py-1 rounded-full text-xs ${
          status === 'active' 
            ? 'bg-green-100 text-green-800' 
            : 'bg-red-100 text-red-800'
        }`}>
          {status === 'active' ? '활성' : '비활성'}
        </span>
      )
    },
  },
]

가상화 스크롤링

import { useVirtualizer } from 'lumarc/react'

const grid = useReactGrid({
  columns,
  data: largeDataset, // 10,000+ 행
  enableVirtualization: true,
  getRowHeight: () => 50, // 고정 행 높이
})

const virtualizer = useVirtualizer({
  count: grid.getRowModel().rows.length,
  getScrollElement: () => scrollElementRef.current,
  estimateSize: () => 50,
})

🤝 기여하기

lumArc는 오픈소스 프로젝트입니다. 기여를 환영합니다!

📄 라이선스

MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.

🙏 감사의 말

lumArc는 다음 오픈소스 프로젝트들에서 영감을 받았습니다:

• TanStack Table - 헤드리스 테이블 아키텍처
• AG Grid - 엔터프라이즈급 그리드 기능
• PrimeReact - 풍부한 UI 컴포넌트
• Toast UI - 사용자 친화적인 UI 컴포넌트

lumArc로 더 나은 데이터 그리드 경험을 만들어보세요! 🚀