bo-grid · Svelte 5 · MIT

바쁜 시장을 위한 데이터 그리드.

시세판, 관심 종목, 주문 내역, 호가창. 초당 수만 건의 틱이 프레임당 한 번의 갱신으로 모이고, 바뀐 셀만 다시 그립니다. 그룹화, 피벗, 트리 데이터, Excel 내보내기가 같은 무료 패키지에 들어 있습니다.

npm i bo-grid

시뮬레이션 시세입니다. 값이 바뀐 셀은 깜박이고, Ctrl/⌘+F로 종목을 찾습니다.

1,000 × 24한 시세판의 종목과 열
30,000초당 이벤트를 프레임당 한 번에
~45 KBgzip 코어, 런타임 의존성 없음
8테마 프리셋, 직접 만든 토큰도

Chrome에서 프로덕션 빌드로 측정: 1,000종목 24열 시세판은 초당 10,000 이벤트에서 프레임당 약 9 ms, 30,000 이벤트에서 약 12 ms의 메인 스레드 작업을 쓰며, 바뀐 셀은 모두 깜박입니다.

가격을 위해 만든

트레이딩 화면에 필요한 것이 셀 렌더러에 맡겨지지 않고 기본으로 들어 있습니다.

틱마다 깜박임값이 바뀌면 셀이 상승·하락 색으로 물들고, 움직인 크기도 보여 줄 수 있습니다. 바쁜 시세판에서는 유지형 깜박임으로 비용을 낮춥니다.
상·하한가 색상상한가, 하한가, 기준가를 거래소처럼 색으로 표시하고, 호가 단위에 맞춘 서식과 장 상태를 지원합니다.
화면에 보이는 것만 스트리밍틱을 모으는 스트림이 행을 제자리에서 패치하고, 뷰포트 구독은 화면에 보이는 종목만 스트리밍합니다.
호가창과 체결 도우미호가창, 가격 사다리, 체결 내역을 위한 도우미가 약 1 KB의 선택 엔트리에 있습니다.

둘러보기

거래소의 색상을 그대로 쓴 시세판. 찾기 막대가 열려 있고, 고정 행이 스크롤 위에 있습니다.

필요할 때는 스프레드시트로: 행 번호, 필터 행, 타입별 편집기, 채우기 핸들과 실행 취소, 라이트 테마.

하나의 패키지에 모두

한 번 설치, 애드온 없음, 라이선스 키 없음.

실시간: 틱 깜박임 · 움직임 크기 · 제자리 패치 · 틱 병합 스트림 · 화면의 행만 스트리밍 · 실시간 재정렬
데이터: 단일·다중 정렬 · 텍스트, 숫자, 날짜, 집합 필터 · 빠른 검색 · 그리드 내 찾기 · 소계가 있는 그룹화 · 피벗 · 트리 데이터 · 마스터-디테일 · 서버 측 행
편집: 인라인·타입별 편집기 · 유효성 검사 · 클립보드 · 채우기 핸들 · 실행 취소와 다시 실행
레이아웃: 열과 행 고정 · 맞춰 늘거나 값에 따라 넓어지는 열 · 크기 조절, 순서 변경, 숨기기 · 헤더 그룹 · 병합 셀 · 열 가상화 · 페이지 나누기
모양: 8가지 테마 프리셋과 직접 만든 토큰 · 데이터 막대, 아이콘, 색상 척도 · 스파크라인 · 현지화
플랫폼: 키보드와 스크린 리더 지원 · SSR과 SvelteKit · 레이아웃 저장·복원 · CSV와 Excel 내보내기·가져오기

1분이면 시작

Svelte 5에서 바로 쓰고, React, Vue, Angular, 순수 JavaScript는 <bo-grid> 요소를 써서 Svelte 설정 없이 씁니다.

Svelte

<script lang="ts">
  import { Grid, type ColumnDef } from 'bo-grid';

  const columns: ColumnDef[] = [
    { type: 'text',    key: 'symbol', header: 'Symbol' },
    { type: 'price',   key: 'price',  header: 'Price', flash: 'auto', showChange: true },
    { type: 'percent', key: 'change', header: 'Chg %' },
    { type: 'volume',  key: 'volume', header: 'Volume' },
  ];
  let rows = $state.raw(quotes);
</script>

<Grid {rows} {columns} height={480} fitColumns findBar />

모든 프레임워크

// React, Vue, Angular or plain JS: no Svelte setup
import 'bo-grid/element';

document.querySelector('bo-grid').config = {
  columns,
  rows,
  height: 480,
  theme: 'dark',
  // Ticks patch rows in place: only changed cells repaint
  onReady: (api) => feed.onTicks((changes) => api.patchRows(changes)),
};

차트 옆에

bo-grid와 TradeCanvas는 나란히 놓이도록 만들어졌습니다. 행을 누르면 차트가 열리는 시세판, 주문 내역 옆의 차트처럼요. 함께라면 트레이딩 소프트웨어 툴킷의 시작입니다: 차트, 주문 입력, 시세판, 주문 흐름.

TradeCanvas 차트 시세판 데모 보기

TradeCanvas로 트레이딩 화면을 만들고 계신가요?

이야기를 듣고 싶습니다.

[email protected]문의하기