Headless Tables: combine Designs, UseCases and Data Sources independently

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • SaaSHub - Software Alternatives and Reviews
  • tutorials

    how-to's and curious technical approaches (by shnydercom)

    Too many tables are still implemented from scratch because requirements for the visuals, the use cases or the data source are different. So in this article we'll look at an approach that lets you replace UI libraries, UX templates and data sources - all with the same code. Pick what you need for your own tables from this github repo.

  • react-relay

    Relay is a JavaScript framework for building data-driven React applications.

    The star wars example schema also introduces some relay-concepts, which can help with making the table more dynamic. For the table to support sorting and filtering, the rows need to be identifiable. In relay, the Node-interface carries an id-field, which means all graphql-types implementing Node are identifiable as well. That means when we encounter an id on an object, we've found a candidate for a row of a table. More meta-information about the row/Node exists in the __typename-field. So here we have a type, but at runtime - that would be a good candidate for a switch/case-statement in a row-generator.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts