Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fractaledmind/hottable
A minimal Airtable clone built with Rails and HotWire
https://github.com/fractaledmind/hottable
Last synced: about 2 months ago
JSON representation
A minimal Airtable clone built with Rails and HotWire
- Host: GitHub
- URL: https://github.com/fractaledmind/hottable
- Owner: fractaledmind
- Created: 2022-09-19T10:24:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-26T09:02:14.000Z (about 2 years ago)
- Last Synced: 2024-08-07T08:11:17.754Z (5 months ago)
- Language: Ruby
- Size: 8.27 MB
- Stars: 113
- Watchers: 5
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HotTable
This application was built during the [Rails Hackathon](https://railshackathon.com) 2022. A remote hackathon for Rails developers.
We had 48 hours to build a Ruby on Rails application with the theme: **[Hotwire](https://hotwired.dev) powered Rails apps**.## Team
* [Stephen Margheim](https://github.com/fractaledmind)
* [Joel Drapper](https://github.com/joeldrapper)
* [Marco Roth](https://github.com/marcoroth)On the Rails Hackathon site: https://railshackathon.com/teams/18
## Description
This is an (minimal) [Airtable](https://airtable.com) clone. We left out any of the schema-building functionality and focused squarely on the data management functionality. Moreover, we pushed hard on using semantic HTML, so the table is an actual ``. Within the space of data management, there are a surprising number of features however:
* Manage which fields are displayed
* Sort by any field in either direction (with multi-column sorting supported as well)
* Filter by any complex query you can imagine (nested ANDs and ORs supported with a full range of predicates)
* Group by any field (sorting in either direction, collapsing or expanding the grouped rows)
* Select rows (with clear visual indication of selected rows)
* Select all rows in the dataset (with clear visual indication of how many records are selected)
* Bulk export selected rows (with whatever display/sort/filter conditions are set on the view)
* Full pagination functionality (select number of items displayed per page, jump to a specific page, see the details of the pagination window)
* Column summaries (see information about the dataset for particular columns, with calculations based on the data-type of the column)
* X- and Y-axis scrollable table on overflow, with fixed headers, footers, and primary columns
* Quick sort, group, hide options for each column in a column header dropdown
* Inline editing of all table cells
* CRUD of views, saving your configuration of a particular combination of fields, sorts, filters, grouping, and pagination## Built with
* [Ransack](https://activerecord-hackery.github.io/ransack/) drives the filtering and sorting. We extended Ransack to drive the fields and grouping.
* [Pagy](https://ddnexus.github.io/pagy/) drives the pagination. We applied Tailwind styling to the generated HTML.
* [Stimulus](https://stimulus.hotwired.dev/) drives the "details set" (only one `` element open at a time), automatic form submission of pagination items, building complex sorts/filters, etc.
* [Turbo Drive](https://turbo.hotwired.dev/handbook/drive) allows all of the "searching" to run without a mess of updating dozens of parts of the page on any change.
* [Turbo Streams](https://turbo.hotwired.dev/handbook/streams) drive the column calculations and inline editing to allow for atomic updates of individual table cells.
* [TurboPower](https://github.com/marcoroth/turbo_power) adds a bunch of additional Turbo Stream actions and drives key parts of the inline editing flow.
* [Phlex](https://phlex.fun/) replaces `ActionView` for the HTML rendering, allowing us to build layouts, pages, and components all in pure Ruby.
* [TailwindCSS](https://tailwindcss.com/) for styling## Demo
A demo application is running at [http://hottable-rails-hackathon.herokuapp.com](http://hottable-rails-hackathon.herokuapp.com)
## Entry
Our entry on the Rails Hackathon site: https://railshackathon.com/entries/6
## Application Screenshots
![](./screenshots/1.png)
![](./screenshots/2.png)
![](./screenshots/3.png)
![](./screenshots/4.png)
![](./screenshots/6.png)
![](./screenshots/7.png)
![](./screenshots/8.png)
![](./screenshots/9.png)