nowfound

Life & fun · November 11, 2023

DA

DataSheetGrid, an Airtable-like React component

I've built and have been maintaining a React component that renders an Airtable / Notion-like component for a few years. This can be seen as an where the value is an array of objects. You can then specify any number of columns that are each responsible for rendering an input for a specific key. The component handles all accessibility features like keyboard navigation, adding / removing rows, context menu, virtualization... If you ever need your users to input long lists of data, this might be a good way to render the form!

DataSheetGrid, an Airtable-like React component launched on November 11, 2023 with 342 votes, #91 of 4,333 launches that month and more than 99% of that year's launches. The site was still online in September 2026, 2 years on.

Visit react-datasheet-grid.netlify.app ↗Alternativestop 2% of November 2023

In plain words

DataSheetGrid is a React component that functions as a spreadsheet-like interface for handling structured data input. It renders tables similar to Airtable or Notion, where users can edit arrays of objects organized into customizable columns. The component includes built-in accessibility features such as keyboard navigation, row management, context menus, and virtualization for performance. It serves developers who need to let users input or manage large datasets within their applications.

written from the facts on this page · September 2026

From the sources

Description will go into a meta tag in <head />

Tggl.io is the number one solution for feature flagging and AB testing. It allows your technical and product teams to work together to ship better quality product in less time while improving conversion . React Datasheet Grid is simpler to use than a good old <input /> , just plug your state and you are good to go. DSG is optimized for speed and can easily handle hundreds of thousands of rows thanks to its virtualized architecture. Renders have been optimized to the strict minimum, follow the performance guides to get the most out of DSG. Control every behavior of the spreadsheet, implement you own widgets , and customize the style of DSG to match yourfrom react-datasheet-grid.netlify.app

In the maker’s words, at launch

I've built and have been maintaining a React component that renders an Airtable &#x2F; Notion-like component for a few years. This can be seen as an <input&#x2F;> where the value is an array of objects. You can then specify any number of columns that are each responsible for rendering an input for a specific key. The…

Does a similar job

all alternatives →

More life & fun this month

the category →

Source: Show HN post ↗ · launch text quoted in part

Launched alongside, November 2023

the whole month →
  • Flowla▲1,119

    Digital sales rooms that wow buyers

    Growth · 2023 · flowla.com

  • Passionfroot Discovery▲962

    Discover & book top creators to promote your product

    Growth · 2023 · passionfroot.me

  • Re:catch▲939

    If Google Form & Calendly had a baby

    Growth · 2023 · recatch.cc

  • Pitch 2.0▲886

    Create, share and analyze presentations faster than ever

    Work · 2023 · pitch.com

  • LeadDelta 3.0▲883

    CRM built for modern teams & creators powered by AI

    AI · 2023 · leaddelta.com

  • SpeedVitals▲829

    Hi HN, I’m Kashish, one of the co-founders of SpeedVitals, a platform for testing & monitoring website performance with a major emphasis on Core Web Vitals. Until now, our platform has only focused on Synthetic&#x2F;Lab testing, such as Lighthouse tests and TTFB tests. But now, we have developed a Real-User Monitoring platform that doubles up as a Web Analytics tool. One major feature we have that most RUM tools lack is Performance Audits. Just like Lighthouse audits work on Lab test data, our audits work across all the real-user visits and gives suggestions on what task to prioritize first.…

    Dev tools · 2023 · speedvitals.com