GN⁺ 2023-11-13 | parent | ★ favorite | on: HN 소개: Airtable 형식의 React 컴포넌트, DataSheetGrid(react-datasheet-grid.netlify.app)
Hacker News 의견
  • 프로젝트 목표가 기능 경쟁이 아닌 쉬운 확장성 제공에 초점을 맞춘 것은 매우 현명한 결정임.

    • 과거 프로젝트에서 고객들이 원하는 '엑셀 같은' 기능을 갖춘 데이터 그리드 컴포넌트를 선택해야 했던 경험을 회상함. 수많은 작은 기능들이 있었고, 각 고객이 원하는 기능의 부분집합이 달랐음.
    • 많은 컴포넌트가 복잡하지만, 그리드에 대한 기대는 완전히 다른 수준임.
    • 모든 것을 할 수 있는 사람은 없으며, 커뮤니티의 도움을 받는 것이 현명함.
  • 이번 주에 프로젝트에서 '각 행을 대화 상자로 편집'하는 인터페이스를 인라인 테이블 편집 모드로 교체하여 사용하기 시작함. 상자 밖에서 바로 잘 작동했으며, 각 셀에 팝오버를 이용한 유효성 검사를 처리하는 나만의 컬럼 컴포넌트를 작성함.

    • 컬럼 크기 조정 기능이 내장되어 있지 않음(하지만 사용에 큰 문제는 아님).
    • 헤더나 구토를 클릭하여 행이나 열을 선택하는 기능을 비활성화하고 싶었음. 라이브러리에 통합할 만큼 일반적인 필요는 아닐 수도 있음.
  • DataSheetGrid 컴포넌트는 UX/UI의 성배로 여겨지지만, 모든 세부 사항을 포함하기에는 정말 복잡함. 모든 성공과 자금을 기원함. 웹이든 데스크톱이든 기본 플랫폼을 넘어서 이야기가 반복되는 것을 목격함.

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

    • 그러나 좋은 개념이며, 적절한 OSS 경쟁자를 구축하는 데 행운을 빔.
  • 첫눈에는 멋져 보이지만, 페이지 상단의 끊임없이 변하는 영웅 텍스트 때문에 페이지가 위아래로 흔들려서 나머지 부분을 읽기 어려움. (iOS의 Firefox에서)

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

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

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

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

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