HN 소개: Airtable 형식의 React 컴포넌트, DataSheetGrid

 (react-datasheet-grid.netlify.app)
2P by GN⁺ | ★ favorite | 댓글 1개
  • React Datasheet Grid는 React 앱에 스프레드시트형 UI를 넣기 위한 컴포넌트로, 상태와 컬럼 정의를 연결해 데이터 입력 화면을 구성할 수 있음
  • 기본 사용은 value, onChange, columns를 <DataSheetGrid />에 넘기는 방식이며, 일반 <input />보다 단순한 흐름을 지향함
  • 가상화 아키텍처와 최소 렌더링 최적화로 수십만 행을 다룰 수 있어 대용량 테이블 UI에 맞음
  • 동작, 위젯, 스타일을 제어할 수 있어 제품 요구에 맞춘 커스터마이징이 가능함
  • Excel, Google Sheets, Notion 복사/붙여넣기와 키보드 탐색, 컨텍스트 메뉴, 선택 영역 드래그, 애니메이션, TypeScript 기반 구현을 지원함

React Datasheet Grid 개요

  • React Datasheet Grid는 React에서 스프레드시트 UI를 만들기 위한 컴포넌트임
  • 설치와 배포 채널로 NPM과 GitHub가 제공됨
  • 기본 사용 예시는 React 상태를 value와 onChange에 연결하고, columns를 넘기는 방식임
    • const [rows, setRows] = useState([])
    • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

사용성과 성능

  • 시작 방식

    • 상태와 컬럼을 연결하면 바로 사용할 수 있는 구조임
    • 문서로 Getting started가 제공됨

  • 대용량 처리

    • DSG는 속도에 최적화되어 있으며, 가상화 아키텍처 덕분에 수십만 행을 처리할 수 있음
    • 렌더링은 최소한으로 최적화되어 있고, 성능을 더 끌어내기 위한 performance guides가 제공됨

  • 커스터마이징

    • 스프레드시트의 동작을 제어할 수 있음
    • 자체 위젯을 구현할 수 있음
    • 앱에 맞게 DSG의 스타일을 바꿀 수 있음

지원 기능과 문서

  • Excel, Google Sheets, Notion과의 복사/붙여넣기를 지원함
  • 키보드 탐색과 단축키를 지원함
  • 우클릭과 사용자 지정 컨텍스트 메뉴를 지원함
  • 모서리 드래그로 선택 영역을 확장할 수 있음
  • 부드러운 애니메이션을 제공하며, TypeScript로 구현됨
  • 관련 문서로 Features, Examples, Reference가 제공됨

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 기능 경쟁을 하지 않고 쉽게 확장 가능하게 만드는 프로젝트 목표는 정말 올바른 결정이라고 봄
    10년도 더 전에 어떤 프로젝트에서 쓸 데이터 그리드 컴포넌트를 골라야 했는데, 고객들은 “Excel 같은” 기능을 원했음
    컴포넌트 벤더들이 만들어야 할 가능한 기능 목록이 엄청 길었고, “작은” 개별 기능만 해도 200개는 쉽게 넘었으며 고객마다 원하는 부분집합이 달랐음
    날짜/시간 선택기 같은 컴포넌트도 복잡하지만, 그리드에 걸리는 기대치는 완전히 다른 수준임
    누구도 전부 다 할 수 없으니 커뮤니티가 돕게 하는 판단이 아주 현명함

    • 어떤 업계에서 쓰던 프로젝트였는지 공유해 줄 수 있는지 궁금함

  • 이번 주에 프로젝트에서 쓰기 시작했는데, “각 행을 대화상자로 편집”하는 인터페이스를 인라인 테이블 편집 모드로 바꾸는 용도였고 편집이 훨씬 빨라졌음
    행 붙여넣기 같은 것도 가능해졌고, 기본 상태로도 잘 동작함
    셀마다 팝오버로 검증을 처리하려고 컬럼 컴포넌트는 직접 작성했음
    부딪힌 점은 두 가지였음: 내장 컬럼 크기 조절이 없고, 헤더나 거터를 클릭해 행/열을 선택하는 기능을 끄고 싶었음
    후자는 라이브러리에 넣을 만큼 흔한 요구인지는 잘 모르겠음

    • 피드백 고마움. DSG는 기본적인 일을 최대한 잘하게 만들고, 사용자가 원하는 대로 확장할 수 있게 만든 도구임
      컬럼 크기 조절은 오래 논쟁이 있었지만, 쓰기 쉬운 단순한 도구를 만든다는 방향과는 어긋난다고 봄
      반응형 컬럼 크기 조정이 더 나은 절충안이라고 느낌
      두 번째 아이디어는 실제로 쉽게 구현할 수 있을 것 같음
    • 컬럼 크기 조절은 꽤 일반적인 기능이라, 아마 곧 추가되지 않을까 싶음

  • DataSheetGrid류 컴포넌트는 UX/UI의 성배 같지만, 모든 세부 사항을 갖추려면 정말 복잡하다는 기억이 있음
    성공과 펀딩을 기원함
    웹이든 데스크톱이든 기반 플랫폼과 상관없이 같은 일이 반복되는 걸 봤고, [1] 같은 것에 좋은 기억이 있음
    [1] https://www.infragistics.com/

    • 동의함. 반복되는 많은 데이터를 입력하는 데는 이게 최고의 UI라고 봄
      물론 뭔가를 발명했다고 주장하는 건 아님
      좋은 말 고맙고, 오픈소스 펀딩은 쉽지 않음

  • 처음 보기엔 좋아 보이지만, 상단의 끝없이 바뀌는 히어로 문구가 3줄과 4줄 사이를 오가면서 페이지가 계속 위아래로 흔들려서 나머지 내용을 읽기 조금 힘듦
    Firefox iOS에서 그럼

    • 여기서도 같은 문제가 있고, 페이지가 임의로 위아래로 튀어서 보기 매우 짜증남
      iOS Safari에서 발생함
    • 이 문제를 알려준 모두에게 고마움. 직접 마주친 적은 없었고, 곧 고치겠음
    • Firefox iOS에서는 실제로 잘 보임

  • 괜찮지만 Airtable이나 MUI DataGrid 같은 것들의 핵심 기능 몇 가지가 빠져 있음: 정렬/필터링, 행/열 고정, 집계 행, 피벗 등
    개념은 좋고, 독점 컴포넌트의 제대로 된 오픈소스 경쟁자를 잘 만들어 가길 바람

    • 피드백 고마움. DSG는 기능으로 경쟁하려고 만든 게 아니라, 가능한 최고의 UX/UI와 확장성을 목표로 만든 것임
      그래서 그런 부분은 직접 구현해야 함
      이상적으로는 큰 기능마다 npm 패키지가 만들어지면 좋겠지만, 그러려면 프로젝트가 훨씬 더 많은 관심을 받아야 함

  • DataTables는 어떻게 됐나? 기억하는 사람 있나? 그 도구가 별로이면서도 어디에나 쓰이다 보니, 작성자가 지원 비용을 받곤 했음

    • 아직도 쓰고 있고, 여전히 꽤 훌륭함
      작성자는 10년 넘게 완벽한 하위 호환성을 유지하며 관리해 왔음
      지금은 React로 감쌌고, 이후 React로 다시 작성했지만 서버 엔드포인트를 바꾸지 않으려고 통신 API는 그대로 유지했음
    • 다행히 jQuery와 함께 대부분 뒤로 밀려난 듯함

  • 다른 셀을 클릭할 때 포커스 사각형이 실제로 한 위치에서 다른 위치로 이동하는 방식이 거슬리는 건 나뿐인가?
    몇 칸 떨어진 셀을 클릭하면 파란 포커스 사각형이 새 목표로 미끄러져 가는 게 특히 잘 보임
    Google은 이렇게 하지 않음

  • 잘 만들었고 보기 좋지만, 새로 나오는 모든 것이 React 기반이 아니었으면 좋겠음
    React의 복잡한 광기를 요구하지 않고 내 프로젝트에서 쓸 수 있는 멋진 웹용 새 도구는 어디서 찾을 수 있을까?
    npm으로 뭔가 설치하는 방식이 별로 마음에 들지 않음

  • @nick-keller, 만들어줘서 고마움. 한 달 전에 알게 됐고 꽤 유망해 보였음
    기본으로 범위 선택이 들어 있고, 일부 대안에서는 유료 기능인 데다 셀도 커스터마이즈할 수 있음
    다만 이걸로 무엇을 만들 수 있는지 가장 잘 보여주는 예시는 랜딩 페이지의 “customizable” 섹션 스크린샷인데, 실제로 가능하다는 데모가 없음
    커스텀 헤더와 헤더 메뉴를 만들다가 어려움을 겪어서 AG-Grid로 옮겼고, 범위 선택은 직접 구현했음

    • 예제를 더 구현해야 할지도 모르겠음. 사람들을 돕는 가장 효율적인 방법이 그쪽인 것 같음

  • iOS에서는 셀에 붙여넣기가 안 되고 입력은 되는 것 같음
    의도된 동작인지 버그인지 궁금함
    데스크톱 버전에서는 붙여넣기가 가능한가?

답변달기