▲

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

 (react-datasheet-grid.netlify.app)
2P by neo 2023-11-13 | favorite | 댓글 1개

React Datasheet Grid 소개

  • React Datasheet Grid는 Airtable과 유사한 React 컴포넌트로 아름다운 스프레드시트 생성 가능.
  • 기술 및 제품 팀이 더 나은 품질의 제품을 더 빠르게 출시하고 전환율을 개선할 수 있도록 돕는 Tggl.io와의 파트너십.
  • 사용이 간단하며, 상태를 연결하기만 하면 되는 DataSheetGrid 컴포넌트 제공.

사용의 용이성

  • React Datasheet Grid는 <input />보다 사용하기 쉬움.
  • useState를 사용하여 스프레드시트의 행 상태 관리 및 변경 가능.

성능

  • 가상화 아키텍처로 수십만 개의 행을 쉽게 처리할 수 있는 최적화된 속도.
  • 최소한의 렌더링으로 성능 최적화, 성능 가이드를 따라 DSG의 최대 성능 활용.

커스터마이징 가능성

  • 스프레드시트의 모든 동작을 제어하고, 자체 위젯 구현 및 DSG 스타일을 앱에 맞게 커스터마이징.

기능 풍부함

  • Excel, Google Sheets, Notion 등에서 복사 및 붙여넣기 지원.
  • 키보드 탐색 및 단축키 완벽 지원.
  • 우클릭 및 사용자 정의 컨텍스트 메뉴 지원.
  • 선택 확장을 위한 모서리 드래그 지원.
  • 부드러운 애니메이션.
  • Typescript로 구축.

GN⁺의 의견

React Datasheet Grid는 사용의 용이성, 뛰어난 성능, 커스터마이징 가능성, 다양한 기능을 제공하는 것이 가장 중요함. 이 컴포넌트는 개발자들이 빠르고 효율적으로 스프레드시트 기능을 구현할 수 있게 하여, 사용자 경험을 향상시키고 제품 개발 시간을 단축시키는 데 기여할 수 있음. 이러한 이유로 소프트웨어 개발자들에게 매우 흥미로운 도구가 될 수 있음.

▲
neo 2023-11-13  [-]
Hacker News 의견

  • 프로젝트 목표가 기능 경쟁이 아닌 쉬운 확장성 제공에 초점을 맞춘 것은 매우 현명한 결정임.

    • 과거 프로젝트에서 고객들이 원하는 '엑셀 같은' 기능을 갖춘 데이터 그리드 컴포넌트를 선택해야 했던 경험을 회상함. 수많은 작은 기능들이 있었고, 각 고객이 원하는 기능의 부분집합이 달랐음.
    • 많은 컴포넌트가 복잡하지만, 그리드에 대한 기대는 완전히 다른 수준임.
    • 모든 것을 할 수 있는 사람은 없으며, 커뮤니티의 도움을 받는 것이 현명함.

  • 이번 주에 프로젝트에서 '각 행을 대화 상자로 편집'하는 인터페이스를 인라인 테이블 편집 모드로 교체하여 사용하기 시작함. 상자 밖에서 바로 잘 작동했으며, 각 셀에 팝오버를 이용한 유효성 검사를 처리하는 나만의 컬럼 컴포넌트를 작성함.

    • 컬럼 크기 조정 기능이 내장되어 있지 않음(하지만 사용에 큰 문제는 아님).
    • 헤더나 구토를 클릭하여 행이나 열을 선택하는 기능을 비활성화하고 싶었음. 라이브러리에 통합할 만큼 일반적인 필요는 아닐 수도 있음.

  • DataSheetGrid 컴포넌트는 UX/UI의 성배로 여겨지지만, 모든 세부 사항을 포함하기에는 정말 복잡함. 모든 성공과 자금을 기원함. 웹이든 데스크톱이든 기본 플랫폼을 넘어서 이야기가 반복되는 것을 목격함.

  • 이 컴포넌트는 좋아 보이지만, Airtable이나 MUI DataGrid와 같은 몇 가지 핵심 기능(정렬/필터링, 행/열 고정, 집계 행, 피벗 등)이 빠져 있음.

    • 그러나 좋은 개념이며, 적절한 OSS 경쟁자를 구축하는 데 행운을 빔.

  • 첫눈에는 멋져 보이지만, 페이지 상단의 끊임없이 변하는 영웅 텍스트 때문에 페이지가 위아래로 흔들려서 나머지 부분을 읽기 어려움. (iOS의 Firefox에서)

  • DataTables에 무슨 일이 있었는지 기억나는 사람이 있는가? 그 도구는 형편없으면서도 널리 사용되어, 작성자가 지원을 위해 비용을 청구했음.

  • 다른 셀을 클릭할 때 포커스 사각형이 실제로 한 곳에서 다른 곳으로 움직이는 방식이 거슬림. 몇 칸 떨어진 곳을 클릭하면 파란색 포커스 사각형이 새로운 목표로 빠르게 이동하는 것을 볼 수 있음. Google은 이렇게 하지 않음.

  • 이 컴포넌트는 정말 멋져 보이며, 한 달 전에 필요했었음. 사용해볼 예정임.

  • iOS에서는 셀에 붙여넣기가 안 되지만, 타이핑은 가능함. 이것이 의도된 동작인지 버그인지? 데스크톱 버전에서는 붙여넣기가 가능한가?

  • @nick-keller에게 감사함. 한 달 전에 이것을 발견했고, 매우 유망해 보임. 범위 선택이 기본적으로 가능하며(일부 대안 솔루션에서는 프로 기능), 셀을 사용자 정의할 수 있음. 그러나 실제로 가능하다는 것을 보여주는 데모가 없어서, '사용자 정의 가능' 섹션의 랜딩 페이지에서 스크린샷으로만 최고의 예를 보여줌. 사용자 정의 헤더와 헤더 메뉴를 만드는 데 어려움을 겪어 AG-Grid로 옮겨 자체 범위 선택을 구현함.

답변달기